/* Red VAM · estilos compartidos — cartel portuario: Archivo Black + Space Mono, sin curvas */
:root{
  --papel:#F7F4EC; --tinta:#121212; --muelle:#E7E2D4;
  --pacifico:#0033E6; --grua:#FF4A17; --verde:#0B7A4B;
  --display:'Archivo Black',sans-serif; --body:'Archivo',sans-serif; --mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font-family:var(--body);line-height:1.55}
a{color:inherit}
::selection{background:var(--pacifico);color:#fff}

/* header */
header{position:sticky;top:0;z-index:50;background:var(--papel);border-bottom:2px solid var(--tinta);
  display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:22px;letter-spacing:-.5px;text-transform:uppercase}
.logo span{color:var(--pacifico)}
.logo small{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#666;display:block}
nav{display:flex;gap:22px;font-family:var(--mono);font-size:13px;text-transform:uppercase}
nav a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
nav a:hover,nav a:focus-visible{border-color:var(--tinta)}
.sesion{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase}

/* botones */
.btn{font-family:var(--mono);font-size:13px;text-transform:uppercase;cursor:pointer;
  background:var(--tinta);color:var(--papel);border:2px solid var(--tinta);padding:10px 18px;letter-spacing:.5px}
.btn:hover{background:var(--pacifico);border-color:var(--pacifico);color:#fff}
.btn:focus-visible{outline:3px solid var(--grua);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--tinta)}
.btn.ghost:hover{background:var(--tinta);color:var(--papel)}
.btn.mini{padding:6px 12px;font-size:11px}
.btn.peligro:hover{background:var(--grua);border-color:var(--grua)}

/* ticker */
.ticker{border-bottom:2px solid var(--tinta);background:var(--tinta);color:var(--papel);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-block;font-family:var(--mono);font-size:14px;padding:8px 0;text-transform:uppercase;animation:mar 28s linear infinite}
.ticker-track b{color:var(--grua);font-weight:700}
@keyframes mar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* estructura */
section{padding:56px 24px;border-bottom:2px solid var(--tinta)}
.wrap{max-width:1120px;margin:0 auto}
h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,7vw,84px);line-height:.94;letter-spacing:-2px}
h1 .azul{color:var(--pacifico)}
h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,4vw,40px);letter-spacing:-1px;margin-bottom:8px}
.sub{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:30px;color:#555}
.eyebrow{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:2px;margin-bottom:18px}
.eyebrow i{display:inline-block;width:10px;height:10px;background:var(--grua);margin-right:8px}

/* stats */
.stats{display:flex;margin-top:36px;border:2px solid var(--tinta);background:#fff}
.stat{flex:1;padding:16px 20px;border-right:2px solid var(--tinta)}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--display);font-size:32px}
.stat span{font-family:var(--mono);font-size:12px;text-transform:uppercase}

/* filtros / chips */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{font-family:var(--mono);font-size:12px;text-transform:uppercase;background:transparent;border:2px solid var(--tinta);padding:7px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.chip:focus-visible{outline:3px solid var(--grua);outline-offset:2px}

/* tarjetas de aviso */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.aviso{border:2px solid var(--tinta);background:#fff;position:relative;display:flex;flex-direction:column}
.aviso-top{padding:18px 20px 10px;border-bottom:2px solid var(--tinta)}
.aviso-genero{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#555}
.aviso h3{font-family:var(--display);font-size:23px;text-transform:uppercase;line-height:1.02;margin:6px 0 4px;letter-spacing:-.5px;padding-right:84px}
.aviso-origen{font-size:14px;color:#444}
.ruta{font-family:var(--mono);font-weight:700;font-size:15px;padding:14px 20px;background:var(--muelle);border-bottom:2px solid var(--tinta);text-transform:uppercase;word-spacing:2px}
.ruta em{font-style:normal;color:var(--pacifico)}
.aviso-body{padding:14px 20px;font-size:14px;flex:1}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-family:var(--mono);font-size:12px;margin-bottom:10px}
.meta dt{text-transform:uppercase;color:#777}
.meta dd{font-weight:700}
.aviso-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-top:2px solid var(--tinta);font-family:var(--mono);font-size:12px}
.sello{position:absolute;top:14px;right:-8px;transform:rotate(6deg);font-family:var(--mono);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:5px 10px;border:2px solid currentColor;background:var(--papel)}
.s-abierto{color:var(--pacifico)}
.s-en_ruta{color:var(--grua);transform:rotate(-5deg)}
.s-confirmado{color:var(--verde);transform:rotate(4deg)}
.s-cerrado{color:#888}

/* mapa */
#mapa{height:520px;border:2px solid var(--tinta);background:var(--muelle)}
.leyenda{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-family:var(--mono);font-size:12px;text-transform:uppercase}
.leyenda i{display:inline-block;width:12px;height:12px;border:2px solid var(--tinta);margin-right:6px;vertical-align:-1px}
.leaflet-popup-content-wrapper{border-radius:0!important;border:2px solid var(--tinta);font-family:var(--body)}
.leaflet-popup-content b{font-family:var(--display);text-transform:uppercase;font-size:14px}
.leaflet-popup-content small{font-family:var(--mono);text-transform:uppercase;font-size:10px;color:#555}

/* regiones */
.regiones{display:flex;flex-direction:column;border:2px solid var(--tinta);background:#fff}
.region{display:grid;grid-template-columns:220px 1fr 60px;align-items:center;gap:16px;padding:14px 20px;border-bottom:2px solid var(--tinta)}
.region:last-child{border-bottom:none}
.region-nombre{font-family:var(--mono);font-size:13px;text-transform:uppercase;font-weight:700}
.region-pais{color:#777;font-weight:400}
.barra{height:18px;background:var(--muelle);position:relative}
.barra i{position:absolute;inset:0;background:var(--pacifico);width:0;transition:width .6s ease}
.region b{font-family:var(--display);font-size:20px;text-align:right}

/* directorio */
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.prog{border:2px solid var(--tinta);background:#fff;padding:18px 20px}
.prog-tipo{display:inline-block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border:2px solid var(--tinta);margin-bottom:10px}
.t-festival{background:var(--grua);color:#fff;border-color:var(--grua)}
.t-teatro{background:var(--pacifico);color:#fff;border-color:var(--pacifico)}
.t-mercado{background:var(--verde);color:#fff;border-color:var(--verde)}
.prog h3{font-family:var(--display);font-size:17px;text-transform:uppercase;line-height:1.1;letter-spacing:-.3px}
.prog p{font-family:var(--mono);font-size:12px;margin-top:6px;color:#555}
.prog .linea{font-family:var(--body);font-size:13px;color:#333;margin-top:8px}

/* tablas admin */
.tabla{width:100%;border:2px solid var(--tinta);border-collapse:collapse;background:#fff;font-size:14px}
.tabla th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;text-align:left;background:var(--tinta);color:var(--papel);padding:10px 14px}
.tabla td{padding:10px 14px;border-top:2px solid var(--tinta);vertical-align:middle}
.badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border:2px solid currentColor}
.b-pendiente{color:var(--pacifico)}
.b-aceptada{color:var(--verde)}
.b-expirada{color:#888}
.b-inactivo{color:var(--grua)}

/* formularios y diálogos */
dialog{border:3px solid var(--tinta);background:var(--papel);max-width:560px;width:calc(100% - 40px);padding:0}
dialog::backdrop{background:rgba(18,18,18,.72)}
.d-head{display:flex;justify-content:space-between;align-items:center;background:var(--tinta);color:var(--papel);padding:14px 20px}
.d-head h3{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:-.3px}
.d-head button{background:none;border:none;color:var(--papel);font-family:var(--mono);font-size:16px;cursor:pointer}
form{display:grid;gap:14px}
dialog form,.panel form{padding:20px}
.panel{border:2px solid var(--tinta);background:#fff}
.panel-head{background:var(--tinta);color:var(--papel);padding:12px 20px;font-family:var(--display);text-transform:uppercase;font-size:16px;letter-spacing:-.3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;display:grid;gap:5px}
input,select,textarea{font-family:var(--body);font-size:15px;padding:10px 12px;border:2px solid var(--tinta);background:#fff;width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pacifico);outline-offset:1px}
.nota{font-family:var(--mono);font-size:11px;color:#666;text-transform:none;letter-spacing:0}
.aviso-ref,.resultado{font-family:var(--mono);font-size:13px;background:var(--muelle);border:2px solid var(--tinta);padding:12px 14px;word-break:break-all}
.error-msg{font-family:var(--mono);font-size:12px;color:var(--grua);font-weight:700}

/* perfil */
.perfil-foto-fila{display:flex;gap:18px;align-items:center}
.foto-perfil{width:88px;height:88px;border:2px solid var(--tinta);background:var(--muelle);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.foto-perfil img{width:100%;height:100%;object-fit:cover}
.foto-perfil span{font-family:var(--display);font-size:28px}
.seccion-perfil{font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:.5px;
  border-bottom:2px solid var(--tinta);padding-bottom:6px;margin-top:10px}
.prog-cab{display:flex;gap:14px;align-items:flex-start}
.prog-foto{width:56px;height:56px;border:2px solid var(--tinta);background:var(--muelle);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.prog-foto img{width:100%;height:100%;object-fit:cover}
.prog-foto span{font-family:var(--display);font-size:18px}
.generos-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.genero-chip{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 8px;background:var(--muelle);border:2px solid var(--tinta)}
.prog-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase}
.prog-links a{text-decoration:none;border-bottom:2px solid var(--pacifico);color:var(--pacifico);padding-bottom:1px}
.prog-links a:hover{background:var(--pacifico);color:#fff}
.prog-fechas{font-family:var(--mono);font-size:11px;text-transform:uppercase;margin-top:10px;
  border:2px solid var(--tinta);display:inline-block;padding:3px 8px;background:#fff}
.prog-fechas.evento{border-color:var(--grua);color:var(--grua)}

/* login */
.acceso{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;max-width:1120px;margin:0 auto;padding:72px 24px}
.login-card{border:3px solid var(--tinta);background:#fff}

/* pie, toast, modo demo */
footer{padding:40px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:12px;text-transform:uppercase}
.modo{position:fixed;bottom:16px;left:16px;z-index:60;font-family:var(--mono);font-size:11px;text-transform:uppercase;background:var(--grua);color:#fff;padding:6px 12px;border:2px solid var(--tinta);display:none}
.toast{position:fixed;bottom:16px;right:16px;z-index:1200;font-family:var(--mono);font-size:13px;background:var(--tinta);color:var(--papel);padding:12px 18px;border:2px solid var(--tinta);opacity:0;transform:translateY(8px);transition:.25s}
.toast.on{opacity:1;transform:none}

@media(max-width:780px){
  nav{display:none}
  .stats{flex-direction:column}
  .stat{border-right:none;border-bottom:2px solid var(--tinta)}
  .stat:last-child{border-bottom:none}
  .region{grid-template-columns:1fr 60px}
  .barra{grid-column:1/-1}
  .grid2{grid-template-columns:1fr}
  .acceso{grid-template-columns:1fr;padding:48px 24px}
  #mapa{height:380px}
  .tabla{display:block;overflow-x:auto}
}