/* ══════════════════════════════════════════════════════════════════
   EXPO UTN 2026 · Stand Ingeniería en Sistemas de Información
   base.css — identidad compartida por el index y todos los módulos.

   REGLAS DE ORO DE ESTE PROYECTO
   1. Cero recursos externos. Nada de Google Fonts, nada de CDN.
      El día del evento no hay internet garantizado.
   2. Solo fuentes de sistema. Si querés una tipografía propia,
      hay que embeberla como archivo local en /assets/fuentes/ y
      declararla con @font-face acá abajo.
   3. Todo se abre con doble clic (protocolo file://). Por eso no
      hay fetch(), ni módulos ES, ni build.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Paleta institucional UTN.BA — tomada de la minuta de reunión */
  --rojo:        #D8232A;
  --rojo-oscuro: #A4161C;
  --rojo-tenue:  #FCEDEE;
  --tinta:       #16181D;
  --tinta-2:     #3A414B;
  --apagado:     #6E7681;
  --papel:       #FFFFFF;
  --gris:        #F4F5F7;
  --gris-2:      #EAECEF;
  --borde:       #DFE2E7;

  /* Acentos de apoyo — paleta Okabe-Ito, segura para daltonismo.
     Se usan para categorizar (niveles, áreas), nunca como único canal. */
  --a1: #0072B2;  /* azul     */
  --a2: #009E73;  /* verde    */
  --a3: #E69F00;  /* naranja  */
  --a4: #CC79A7;  /* magenta  */
  --a5: #56B4E9;  /* celeste  */

  /* Tipografía: SOLO fuentes de sistema (ver regla 2) */
  --tipo: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Escala. Grande a propósito: se lee parado, a distancia, en un stand. */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 2rem;
  --t-2xl: 3rem;
  --t-3xl: 4.25rem;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(22,24,29,.05), 0 8px 24px rgba(22,24,29,.07);
  --sombra-alta: 0 4px 8px rgba(22,24,29,.08), 0 20px 48px rgba(22,24,29,.14);

  /* Objetivo mínimo de clic. El visitante apunta con la MANO, no con
     un mouse: todo lo accionable tiene que ser grande y separado. */
  --hit: 88px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--tipo);
  font-size:var(--t-md);
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--rojo-oscuro)}

/* ── Encabezado institucional ─────────────────────────────────── */
.marca{
  display:flex;align-items:center;gap:14px;
  padding:18px 32px;border-bottom:1px solid var(--borde);
  background:var(--papel);position:sticky;top:0;z-index:50;
}
.marca-logo{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.marca-logo span{color:var(--rojo)}
.marca-sub{
  font-size:var(--t-xs);line-height:1.25;color:var(--apagado);
  padding-left:14px;border-left:1px solid var(--borde);text-transform:uppercase;
  letter-spacing:.06em;
}
.marca-volver{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:52px;padding:0 22px;border-radius:var(--radio);
  border:1px solid var(--borde);background:var(--papel);
  color:var(--tinta-2);text-decoration:none;font-size:var(--t-sm);font-weight:600;
}
.marca-volver:hover{background:var(--gris);border-color:var(--apagado)}

/* ── Contenedor y encabezados de sección ──────────────────────── */
.envoltorio{max-width:1240px;margin:0 auto;padding:0 32px}
.bloque{padding:64px 0;border-bottom:1px solid var(--borde)}
.bloque:last-child{border-bottom:0}

.epigrafe{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rojo);margin-bottom:12px;
}
h1{font-size:var(--t-2xl);line-height:1.05;letter-spacing:-.03em;font-weight:700}
h2{font-size:var(--t-xl);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin-bottom:10px}
h3{font-size:var(--t-lg);line-height:1.25;font-weight:600;margin-bottom:6px}
.bajada{font-size:var(--t-lg);color:var(--tinta-2);max-width:62ch;line-height:1.45}
.nota{font-size:var(--t-sm);color:var(--apagado)}

/* ── Portada de módulo ────────────────────────────────────────── */
.portada{
  padding:72px 0 56px;background:var(--gris);
  border-bottom:1px solid var(--borde);
}
.portada h1{max-width:20ch}
.portada .bajada{margin-top:18px}

/* ── Rejilla y tarjetas ───────────────────────────────────────── */
.rejilla{display:grid;gap:20px}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rejilla.cuatro{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.tarjeta{
  background:var(--papel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:26px 26px 26px 30px;
  position:relative;overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tarjeta::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rojo);
}
.tarjeta.sin-barra::before{display:none}
.tarjeta.accionable{cursor:pointer;min-height:var(--hit)}
.tarjeta.accionable:hover,
.tarjeta.accionable:focus-visible{
  transform:translateY(-3px);box-shadow:var(--sombra-alta);
  border-color:var(--rojo);outline:none;
}

/* ── Botones y controles (dimensionados para tracking de manos) ── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 26px;border-radius:var(--radio);
  border:1px solid var(--rojo);background:var(--rojo);color:#fff;
  font-family:inherit;font-size:var(--t-sm);font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s;
}
.boton:hover{background:var(--rojo-oscuro);border-color:var(--rojo-oscuro)}
.boton.secundario{background:var(--papel);color:var(--tinta);border-color:var(--borde)}
.boton.secundario:hover{background:var(--gris);border-color:var(--apagado)}
.boton[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}

.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}

/* ── Etiquetas ────────────────────────────────────────────────── */
.etiqueta{
  display:inline-block;padding:5px 12px;border-radius:100px;
  font-size:var(--t-xs);font-weight:600;line-height:1.4;
  background:var(--gris);color:var(--tinta-2);border:1px solid var(--borde);
}
.etiqueta.roja{background:var(--rojo-tenue);color:var(--rojo-oscuro);border-color:#F3C9CC}
/* Troncal: se distingue de Integradora a propósito. La ordenanza no la
   define como integradora, así que el color no debe sugerir que lo es. */
.etiqueta.troncal{background:#EAF1FB;color:#1B4F9C;border-color:#C6D8F2}

/* ── Logo institucional ─────────────────────────────────────────
   El PNG tiene transparencia real (verificado: 0 píxeles blancos
   opacos). Por eso se puede poner sobre cualquier fondo claro sin que
   aparezca un recuadro. Para el pie, que es oscuro, hay una versión
   invertida: el mismo archivo en negro no se vería. */
.marca-img{
  height:44px;width:auto;display:block;flex-shrink:0;
}
/* :not(.marca-volver): el botón también es hijo directo de .marca, y
   con display:block y line-height:0 el texto se le iba arriba. */
.marca > a:not(.marca-volver){display:block;line-height:0;text-decoration:none;color:inherit;flex-shrink:0}
.marca > a:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:4px}
/* Ingresar va pegado al borde derecho, separado del resto de la marca.
   margin-left:auto lo empuja; no hace falta tocar el layout del header. */
.marca-ingresar{
  margin-left:auto;min-height:44px;padding:11px 22px;cursor:pointer;
  font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--tinta-2);
  background:var(--papel);border:1px solid var(--borde);border-radius:100px;
  transition:border-color .15s,color .15s;
}
.marca-ingresar:hover{border-color:var(--rojo);color:var(--rojo)}
body.editando .marca-ingresar{background:var(--rojo);border-color:var(--rojo);color:#fff}
/* Si la página tiene "Volver al inicio", ese va antes y el botón queda
   igual a la derecha: solo uno de los dos puede llevar el margin auto. */
.marca-volver{margin-left:auto}
.marca-volver ~ .marca-ingresar{margin-left:10px}
@media (max-width:820px){ .marca-img{height:34px} }
.pie-logo{
  height:38px;width:auto;display:block;margin-bottom:18px;opacity:.9;
}
.etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ── Carrusel ─────────────────────────────────────────────────── */
.carrusel{position:relative}
.carrusel-pista{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 18px;scrollbar-width:thin;
}
.carrusel-item{
  flex:0 0 auto;width:min(440px,80vw);scroll-snap-align:start;
  border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;background:var(--papel);
}
.carrusel-item img{width:100%;height:280px;object-fit:cover;background:var(--gris-2)}
.carrusel-pie{padding:16px 18px}
.carrusel-pie h3{font-size:var(--t-md);margin-bottom:4px}
.carrusel-pie p{font-size:var(--t-sm);color:var(--apagado)}
.carrusel-mandos{display:flex;gap:10px;margin-top:6px}
.carrusel-mandos button{
  width:var(--hit);height:56px;border-radius:var(--radio);
  border:1px solid var(--borde);background:var(--papel);
  font-size:1.25rem;cursor:pointer;color:var(--tinta-2);
}
.carrusel-mandos button:hover{background:var(--gris);border-color:var(--apagado)}

/* ── QR ───────────────────────────────────────────────────────── */
.qr{
  width:132px;height:132px;padding:8px;background:#fff;
  border:1px solid var(--borde);border-radius:8px;flex:0 0 auto;
}
/* EXPO.qr() inserta el SVG con <object>, no inline: sin "object" acá
   cada QR queda con su tamaño en mm (125–170 px) y se sale de la caja. */
.qr svg,.qr object{width:100%;height:100%;display:block}
/* El QR y su texto: el QR con ancho FIJO y el texto ocupando el resto.
   Sin flex-shrink:0 el QR se comprimía y el texto se le encimaba encima
   en columnas angostas, que es lo que pasaba en la tarjeta de Electivas. */
.qr-fila{display:flex;gap:18px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
.qr-fila > .qr{flex:0 0 auto}
.qr-fila > div{flex:1 1 180px;min-width:0}
.qr-fila .nota{max-width:34ch;margin:0 0 6px}
.qr-fila a.nota{display:block;word-break:break-all;font-size:var(--t-xs)}
@media (max-width:520px){ .qr-fila{gap:14px} }

/* ── Acordeón ─────────────────────────────────────────────────── */
.acordeon{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.acordeon+.acordeon{margin-top:12px}
.acordeon>summary{
  padding:22px 26px;cursor:pointer;font-weight:600;font-size:var(--t-lg);
  list-style:none;display:flex;align-items:center;gap:14px;min-height:var(--hit);
}
.acordeon>summary::-webkit-details-marker{display:none}
.acordeon>summary::after{content:"+";margin-left:auto;font-size:1.6rem;color:var(--rojo);font-weight:400}
.acordeon[open]>summary::after{content:"–"}
.acordeon>summary:hover{background:var(--gris)}
.acordeon-cuerpo{padding:0 26px 26px;border-top:1px solid var(--borde);padding-top:22px}

/* ── Listas ───────────────────────────────────────────────────── */
.lista-limpia{list-style:none}
.lista-limpia li{
  padding:10px 0 10px 22px;position:relative;border-bottom:1px solid var(--gris-2);
}
.lista-limpia li:last-child{border-bottom:0}
.lista-limpia li::before{
  content:"";position:absolute;left:0;top:20px;width:7px;height:7px;
  border-radius:50%;background:var(--rojo);
}

/* ── Aviso de contenido pendiente ─────────────────────────────── */
/* Los avisos de "falta cargar" salieron del sitio: los campos _pendiente
   ya no están en datos/*.js y la lista de tareas del equipo vive en
   PENDIENTES.md. Estas reglas quedan por si alguien vuelve a usar
   EXPO.pendiente() en el futuro: nunca se muestran solas. */
.pendiente{display:none}
body.editando .pendiente,
body.mostrar-pendientes .pendiente{
  display:block;
  border:1px dashed var(--a3);background:#FFF9EF;color:#7A5100;
  border-radius:8px;padding:14px 18px;font-size:var(--t-sm);margin-top:14px;
}
body.editando .pendiente[hidden],
body.mostrar-pendientes .pendiente[hidden]{display:block}
.pendiente strong{display:block;margin-bottom:2px}

/* ── Pie ──────────────────────────────────────────────────────── */
.pie{
  padding:36px 0;background:var(--tinta);color:#B9BFC8;
  font-size:var(--t-sm);
}
.pie a{color:#fff}

/* ── Accesibilidad y stand ────────────────────────────────────── */
:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* El tracking de manos marca el elemento apuntado con esta clase.
   Ver js/comun.js → API de integración. */
.apuntado{box-shadow:0 0 0 4px var(--rojo), var(--sombra-alta)!important}
.progreso-dwell{
  position:absolute;left:0;bottom:0;height:4px;background:var(--rojo);
  width:0;transition:width .1s linear;
}

@media (max-width:720px){
  :root{--t-2xl:2.25rem;--t-3xl:2.75rem;--t-xl:1.6rem}
  .envoltorio{padding:0 20px}
  .marca{padding:14px 20px;flex-wrap:wrap}
  .bloque{padding:44px 0}
}

/* ══════════════════════════════════════════════════════════════════
   MODO EDICIÓN — estilos de js/editor.js
   Solo se activan cuando <body> tiene la clase .editando
   ══════════════════════════════════════════════════════════════════ */
.solo-edicion[hidden]{display:none}
body.editando{padding-bottom:96px}

.campo-editable{
  outline:1px dashed var(--a1);outline-offset:3px;border-radius:3px;
  cursor:text;transition:background .12s;
}
.campo-editable:hover{background:#EAF3FA}
.campo-editable:focus{outline:2px solid var(--a1);background:#fff}
.campo-editable:empty::before{content:"(vacío — escribí acá)";color:var(--apagado);font-style:italic}

.barra-edicion{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 28px;background:var(--tinta);color:#fff;
  box-shadow:0 -4px 24px rgba(0,0,0,.2);
}
.be-titulo{font-weight:700;letter-spacing:.02em}
.be-nota{font-size:var(--t-sm);color:#AAB2BD;flex:1;min-width:220px}
.be-boton{
  min-height:46px;padding:0 20px;border-radius:8px;border:1px solid #4A525E;
  background:#2A303A;color:#fff;font-family:inherit;font-size:var(--t-sm);
  font-weight:600;cursor:pointer;
}
.be-boton:hover{background:#3A424E}
.be-boton.fantasma{background:transparent}
.be-boton.hay-cambios{background:var(--rojo);border-color:var(--rojo)}
.be-boton.hay-cambios::after{content:" •"}

/* Panel de fotos */
.panel-fotos{
  margin-top:16px;padding:16px;border:1px dashed var(--a1);
  border-radius:var(--radio);background:#F5FAFE;
}
.fila-foto{
  display:grid;grid-template-columns:96px 1fr auto;gap:12px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--gris-2);
}
.fila-foto:last-of-type{border-bottom:0}
.fila-foto img{width:96px;height:64px;object-fit:cover;border-radius:6px;background:var(--gris-2)}
.fila-foto img.rota{outline:2px solid var(--rojo);opacity:.4}
.fila-foto .campos{display:grid;gap:6px}
.fila-foto input{
  font-family:inherit;font-size:var(--t-xs);padding:7px 10px;
  border:1px solid var(--borde);border-radius:6px;width:100%;
}
.fila-foto input[data-c="img"]{font-family:var(--mono)}
.mandos-foto{display:flex;gap:5px}
.mandos-foto button{
  width:38px;height:38px;border-radius:6px;border:1px solid var(--borde);
  background:var(--papel);cursor:pointer;font-size:1rem;
}
.mandos-foto button:hover{background:var(--gris)}
@media(max-width:640px){.fila-foto{grid-template-columns:1fr}}

/* Panel de fotos — cabecera y pie */
.panel-cab{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--gris-2);
  font-size:var(--t-sm);
}
.panel-cab span{color:var(--apagado);font-size:var(--t-xs)}
.panel-cab code{font-family:var(--mono);background:var(--papel);padding:2px 6px;border-radius:4px;border:1px solid var(--borde)}
.panel-pie{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--gris-2)}
.panel-pie select{
  font-family:inherit;font-size:var(--t-xs);padding:0 12px;height:46px;
  border:1px solid var(--borde);border-radius:8px;background:var(--papel);cursor:pointer;
}

/* Alternativa en texto para lectores de pantalla (grafo de incumbencias). */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}