/* Tema «Modo Seguro» — derivado de la gráfica del Mes de la Ciberseguridad INACAP 60 años.
   Concepto: cielo nocturno azul eléctrico sobre el campus; paneles de vidrio con filo cian,
   como el panel de agenda del afiche. Diseño de un solo tema (oscuro) por identidad del evento. */

@font-face { font-family: 'Krona One'; src: url('/fuentes/krona-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('/fuentes/chakra-petch-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('/fuentes/chakra-petch-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('/fuentes/chakra-petch-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fuentes/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  /* Color */
  --noche: #030824;          /* fondo: cielo nocturno */
  --abismo: #071245;         /* capa intermedia */
  --panel: rgba(10, 24, 86, .62);     /* vidrio de los paneles */
  --panel-solido: #0b1a5c;
  --panel-2: rgba(22, 46, 140, .45);  /* filas / campos */
  --linea: rgba(84, 190, 255, .22);   /* filo de los paneles */
  --linea-fuerte: rgba(46, 230, 240, .55);
  --texto: #eef4ff;
  --texto-2: #a9b8e6;        /* texto secundario, azul lavado */
  --texto-3: #7584bd;
  --cian: #2ee6f0;           /* acento: el «Modo seguro» */
  --cian-suave: rgba(46, 230, 240, .14);
  --electrico: #1f5bff;      /* azul eléctrico */
  --ok: #3ef0a5;
  --ok-suave: rgba(62, 240, 165, .14);
  --alerta: #ffc24b;
  --alerta-suave: rgba(255, 194, 75, .14);
  --peligro: #ff5d73;
  --peligro-suave: rgba(255, 93, 115, .15);
  --brillo: 0 0 0 1px var(--linea), 0 18px 50px rgba(0, 4, 30, .55);
  --halo-cian: 0 0 18px rgba(46, 230, 240, .45);
  /* Tipografía */
  --f-display: 'Krona One', 'Arial Black', system-ui, sans-serif;
  --f-ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Forma */
  --radio: 14px;
  --radio-chico: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  font-family: var(--f-texto); color: var(--texto); line-height: 1.55; min-height: 100vh;
  background: var(--noche); -webkit-font-smoothing: antialiased;
}
/* Cielo: halo eléctrico + estrellas + retícula tenue, fijo detrás del contenido. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -120px, rgba(31, 91, 255, .55), transparent 70%),
    radial-gradient(600px 400px at 100% 30%, rgba(46, 230, 240, .10), transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 78% 12%, #cfe 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 64% 38%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 30% 62%, #bde 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 88% 70%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 46% 86%, #cfe 60%, transparent 61%),
    radial-gradient(1px 1px at 6% 80%, #fff 60%, transparent 61%),
    linear-gradient(rgba(84, 190, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(84, 190, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, var(--abismo), var(--noche) 60%);
}
a { color: var(--cian) }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px }
::selection { background: var(--cian); color: var(--noche) }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.oculto { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* ===== Tipografía ===== */
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 4.2vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 10px; text-transform: uppercase }
h2 { font-family: var(--f-ui); font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; margin-bottom: 12px; text-wrap: balance }
h3 { font-family: var(--f-ui); font-weight: 700; font-size: 1.12rem; line-height: 1.25 }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--cian); font-family: var(--f-ui); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; margin-bottom: 10px }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cian); box-shadow: var(--halo-cian) }
.sub { color: var(--texto-2) }
.vacio { text-align: center; color: var(--texto-2); padding: 36px 12px }

/* ===== Cabecera ===== */
header.cab {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(3, 8, 36, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
header.cab .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px }
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); min-width: 0 }
.lockup img { height: 26px; width: auto; display: block }
.lockup .seccion { font-family: var(--f-ui); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--texto-2); padding-left: 14px; border-left: 1px solid var(--linea); white-space: nowrap }
nav.tabs { display: flex; gap: 2px; align-items: center }
nav.tabs a { padding: 8px 14px; border-radius: 999px; font-family: var(--f-ui); font-weight: 600; font-size: .95rem; color: var(--texto-2); text-decoration: none; transition: .15s }
nav.tabs a:hover { color: var(--texto); background: var(--panel-2) }
nav.tabs a[aria-current="page"] { color: var(--noche); background: var(--cian); box-shadow: var(--halo-cian) }

/* Interruptor «Modo seguro»: indica la conexión en vivo de los cupos. */
.modo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-ui); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap }
.modo i { position: relative; width: 34px; height: 18px; border-radius: 99px; border: 2px solid currentColor; transition: .3s }
.modo i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: .3s }
.modo.on { color: var(--cian) }
.modo.on i { box-shadow: var(--halo-cian) }
.modo.on i::after { left: 18px }

/* Navegación inferior en teléfono */
@media (max-width: 760px) {
  header.cab nav.tabs { display: none }
  nav.inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(3, 8, 36, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linea);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  nav.inferior a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 10px; font-family: var(--f-ui); font-size: .74rem; font-weight: 600; color: var(--texto-3); text-decoration: none; position: relative }
  nav.inferior a svg { width: 22px; height: 22px }
  nav.inferior a[aria-current="page"] { color: var(--cian) }
  nav.inferior a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--cian); box-shadow: var(--halo-cian) }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) }
  .lockup .seccion { display: none }
}
@media (min-width: 761px) { nav.inferior { display: none } }

main { padding-block: 26px 48px }
.pie { color: var(--texto-3); font-size: .8rem; text-align: center; padding-block: 8px 28px }
.pie a { color: var(--texto-3) }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 46px;
  border-radius: 999px; font-family: var(--f-ui); font-weight: 700; font-size: .98rem; letter-spacing: .02em;
  cursor: pointer; border: 1.5px solid transparent; transition: .16s ease; line-height: 1.1; text-decoration: none; text-align: center
}
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none }
.btn-primario { background: var(--cian); color: var(--noche); box-shadow: var(--halo-cian) }
.btn-primario:hover:not(:disabled) { background: #7ff3f8; transform: translateY(-1px) }
.btn-secundario { background: var(--electrico); color: #fff }
.btn-secundario:hover:not(:disabled) { background: #3a71ff }
.btn-contorno { background: transparent; color: var(--texto); border-color: var(--linea-fuerte) }
.btn-contorno:hover:not(:disabled) { border-color: var(--cian); color: var(--cian) }
.btn-exito { background: var(--ok); color: var(--noche) }
.btn-chico { padding: 8px 15px; min-height: 36px; font-size: .88rem }
.btn-bloque { width: 100% }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }

/* ===== Paneles ===== */
.card {
  background: var(--panel); border-radius: var(--radio); padding: 22px; box-shadow: var(--brillo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0
}
.grid { display: grid; gap: 16px }
.arriba { align-items: start }
@media (min-width: 761px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* ===== Portada del evento ===== */
.hero {
  position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 22px;
  background: linear-gradient(180deg, rgba(31, 91, 255, .22), rgba(3, 8, 36, .2)); box-shadow: var(--brillo);
  display: grid; grid-template-rows: auto auto
}
.hero .contenido { position: relative; z-index: 1; padding: 30px 22px 8px; display: grid; gap: 4px; justify-items: start }
.hero .mes { font-family: var(--f-display); font-size: clamp(.9rem, 2.6vw, 1.25rem); letter-spacing: .12em; text-transform: uppercase; color: var(--texto) }
.hero h1 { font-size: clamp(1.35rem, 6.2vw, 3.6rem); overflow-wrap: anywhere; margin: 0; line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 0 34px rgba(120, 190, 255, .55) }
.hero .lema { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-family: var(--f-display); font-size: clamp(1rem, 3.6vw, 1.5rem); line-height: 1; color: var(--cian); text-transform: uppercase; text-shadow: var(--halo-cian) }
.hero .lema .modo i { width: 52px; height: 28px; border-width: 3px }
.hero .lema .modo i::after { width: 16px; height: 16px; top: 3px; left: 27px }
.hero .desc { color: var(--texto-2); max-width: 60ch; margin-top: 12px }
.fecha-evento {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; margin-top: 18px;
  padding: 14px 18px; border-radius: var(--radio); background: rgba(3, 8, 36, .55); box-shadow: 0 0 0 1px var(--linea-fuerte);
}
.fecha-evento .dia { font-family: var(--f-display); font-size: 2.7rem; line-height: 1; color: var(--cian); text-shadow: var(--halo-cian); padding-right: 18px; border-right: 1px solid var(--linea) }
.fecha-evento .mesano { font-family: var(--f-display); text-transform: uppercase; line-height: 1.1 }
.fecha-evento .mesano span { display: block; font-family: var(--f-ui); color: var(--cian); font-weight: 700; font-size: 1.15rem }
.fecha-evento .donde { grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-top: 9px; font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; color: var(--texto-2) }
.fecha-evento .donde strong { color: var(--texto) }
.hero .acciones { margin-top: 20px }
.hero .campus { position: relative; height: clamp(120px, 26vw, 230px); background: url('/img/campus-noche.webp') center 60% / cover no-repeat; margin-top: -10px }
/* El campus se funde hacia arriba con el video (o con el fondo si no hay video). */
.hero .campus { -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%) }
.hero .campus { z-index: 1 }
/* Video de fondo (INACAPITO): muy tenue, aparece suave cuando ya está reproduciéndose y se funde con el campus. */
.hero .video-fondo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  opacity: 0; transition: opacity 1.6s ease; pointer-events: none; filter: saturate(.85);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 92%); mask-image: linear-gradient(180deg, #000 60%, transparent 92%)
}
.hero .video-fondo.visible { opacity: .28 }
@media (min-width: 761px) { .hero .video-fondo.visible { opacity: .22 } }
@media (prefers-reduced-motion: reduce) { .hero .video-fondo { display: none } }
.hero .campus::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cian); box-shadow: var(--halo-cian) }
.cuenta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; background: var(--cian-suave); color: var(--cian); box-shadow: 0 0 0 1px var(--linea-fuerte) }

.pasos { counter-reset: p; display: grid; gap: 14px; list-style: none }
.pasos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; color: var(--texto-2) }
.pasos li strong { color: var(--texto) }
.pasos li::before { counter-increment: p; content: counter(p, decimal-leading-zero); font-family: var(--f-ui); font-weight: 700; color: var(--cian); border: 1.5px solid var(--linea-fuerte); border-radius: 8px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: .85rem }

/* ===== Formularios ===== */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; min-width: 0 }
.campo label { font-family: var(--f-ui); font-weight: 600; font-size: .9rem; letter-spacing: .03em; color: var(--texto) }
.campo input, .campo select, .campo textarea {
  padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: var(--radio-chico); background: rgba(3, 8, 36, .55);
  font-size: 1rem; width: 100%; color: var(--texto); transition: .15s
}
.campo textarea { resize: vertical }
.campo select option { background: var(--panel-solido); color: var(--texto) }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3) }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px var(--cian-suave) }
.campo .err { color: var(--peligro); font-size: .83rem }
.campo .ayuda { color: var(--texto-3); font-size: .8rem }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--peligro) }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--texto-2); margin: 8px 0 16px; cursor: pointer }
.check input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--cian); flex: 0 0 auto }
fieldset { border: none; min-width: 0 }
legend { font-family: var(--f-ui); font-weight: 700; margin-bottom: 4px }
.aviso { padding: 12px 15px; border-radius: var(--radio-chico); font-size: .92rem; margin-bottom: 16px; border: 1px solid transparent }
.aviso.error { background: var(--peligro-suave); color: #ffd0d7; border-color: rgba(255, 93, 115, .4) }
.aviso.ok { background: var(--ok-suave); color: #c8ffe6; border-color: rgba(62, 240, 165, .35) }
.aviso.info { background: var(--cian-suave); color: var(--texto); border-color: var(--linea-fuerte) }

/* ===== Chips de estado ===== */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: .76rem; font-weight: 700; letter-spacing: .05em; padding: 4px 11px; border-radius: 99px; background: var(--panel-2); color: var(--texto-2); white-space: nowrap }
.chip.ok { background: var(--ok-suave); color: var(--ok) }
.chip.alerta { background: var(--alerta-suave); color: var(--alerta) }
.chip.peligro { background: var(--peligro-suave); color: var(--peligro) }
.chip.fuerte { background: var(--cian); color: var(--noche) }

/* ===== Cupos ===== */
.cupo { margin: 12px 0 4px }
.cupo .barra { height: 8px; border-radius: 8px; background: rgba(3, 8, 36, .7); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden }
.cupo .barra i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--electrico), var(--cian)); box-shadow: var(--halo-cian); transition: width .6s ease }
.cupo.medio .barra i { background: linear-gradient(90deg, #ff9b3d, var(--alerta)); box-shadow: 0 0 14px rgba(255, 194, 75, .45) }
.cupo.lleno .barra i { background: var(--peligro); box-shadow: 0 0 14px rgba(255, 93, 115, .5) }
.cupo .txt { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--texto-2); margin-top: 6px; font-variant-numeric: tabular-nums }
.cupo .txt strong { color: var(--texto); font-family: var(--f-ui); font-size: .95rem }
.cupo.flash .barra { animation: flash .9s ease }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(46, 230, 240, .7) } 100% { box-shadow: 0 0 0 9px rgba(46, 230, 240, 0) } }

/* ===== Talleres ===== */
.taller { display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden }
.taller::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cian), transparent) }
.taller.mio { box-shadow: 0 0 0 1.5px var(--ok), 0 18px 50px rgba(0, 4, 30, .55) }
.taller.mio::before { background: linear-gradient(90deg, transparent, var(--ok), transparent) }
.taller .cabt { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px }
.taller h3 { font-size: 1.2rem }
.taller .datos { font-size: .88rem; color: var(--texto-2); display: grid; gap: 3px; font-family: var(--f-ui); font-weight: 500 }
.taller .desc { font-size: .93rem; color: var(--texto-2); margin-top: 6px }
.taller .pie-t { margin-top: auto; padding-top: 6px; display: grid; gap: 12px }
.docente { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px }
.docente img, .docente .sin-foto {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--panel-2);
  box-shadow: 0 0 0 2px var(--noche), 0 0 0 3.5px var(--cian), var(--halo-cian);
  display: flex; align-items: center; justify-content: center; font-family: var(--f-ui); font-weight: 700; color: var(--cian)
}
.docente span { font-family: var(--f-ui); font-weight: 600; color: var(--texto) }
.docente small { display: block; color: var(--texto-3); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700 }

/* ===== Agenda (como el panel del afiche) ===== */
.dias { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px }
.dias button { flex: 0 0 auto; border: 1.5px solid var(--linea); background: var(--panel); padding: 10px 16px; border-radius: 12px; cursor: pointer; text-align: left; font-family: var(--f-ui) }
.dias button[aria-pressed="true"] { border-color: var(--cian); color: var(--cian); box-shadow: var(--halo-cian) }
.filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap }
.agenda { padding: 10px; display: grid; gap: 8px }
.agenda-titulo { text-align: center; font-family: var(--f-ui); font-weight: 700; font-size: 1.35rem; letter-spacing: .18em; padding: 10px 0 12px; margin: 0 6px 4px; border-bottom: 1.5px solid var(--cian); box-shadow: 0 1px 0 rgba(46, 230, 240, .3) }
.linea { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 0; background: rgba(3, 8, 36, .6); border-radius: 11px; position: relative; overflow: hidden }
.linea::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; background: var(--cian); box-shadow: var(--halo-cian) }
.linea .hora { font-family: var(--f-ui); font-weight: 700; color: var(--cian); font-size: 1rem; padding: 16px 12px 16px 24px; border-right: 1px solid var(--linea); font-variant-numeric: tabular-nums; display: flex; align-items: center }
.linea .items { padding: 8px 14px; display: grid; gap: 8px; min-width: 0 }
.linea.pausa { background: rgba(3, 8, 36, .35) }
.linea.pausa::before { background: var(--texto-3); box-shadow: none }
.linea.pausa .hora { color: var(--texto-2) }
.item { padding: 6px 0; min-width: 0 }
.item + .item { border-top: 1px dashed var(--linea); padding-top: 12px }
.item .tit { font-family: var(--f-ui); font-weight: 700; font-size: 1.15rem; line-height: 1.25 }
.item .quien { color: var(--cian); font-family: var(--f-ui); font-weight: 600; margin-top: 2px }
.item .det { font-size: .9rem; color: var(--texto-2); margin-top: 2px }
.item .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px }
.item .cupo { margin: 8px 0 0; max-width: 420px }
.item.mio .tit::after { content: " ✓"; color: var(--ok) }
@media (max-width: 520px) {
  .linea { grid-template-columns: 1fr }
  .linea .hora { border-right: 0; border-bottom: 1px solid var(--linea); padding: 10px 14px 6px 24px }
  .linea .items { padding: 6px 14px 10px 24px }
}

/* ===== Entrada (ticket) ===== */
.ticket { max-width: 420px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, var(--panel-solido), var(--noche)); box-shadow: 0 0 0 1.5px var(--linea-fuerte), 0 24px 70px rgba(0, 4, 30, .7), 0 0 60px rgba(46, 230, 240, .12) }
.ticket .top { padding: 20px 22px 16px; background: linear-gradient(120deg, var(--electrico), #0a2a9e 70%); position: relative }
.ticket .top img { height: 20px; width: auto; display: block; margin-bottom: 14px }
.ticket .top .eyebrow { color: var(--cian); margin-bottom: 4px }
.ticket .top h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; line-height: 1.25 }
.ticket .qr { margin: 22px auto 10px; width: min(78%, 280px); padding: 12px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 4px var(--cian-suave), var(--halo-cian) }
.ticket .qr svg { width: 100%; height: auto; display: block }
.ticket .cod { text-align: center; font-family: var(--f-mono); letter-spacing: .14em; font-size: .86rem; color: var(--texto-2) }
.ticket .quien { padding: 16px 22px 22px; text-align: center; border-top: 1.5px dashed var(--linea); margin-top: 16px; display: grid; gap: 4px; justify-items: center }
.ticket .quien strong { font-family: var(--f-ui); font-size: 1.3rem }
.ticket .estado { margin-top: 8px }
.mis { margin-top: 18px }
.mis ul { list-style: none }
.mis li { padding: 12px 0; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 12px }
.mis li:last-child { border-bottom: none }
.codigo-acceso {
  font-family: var(--f-mono); font-size: 1.9rem; font-weight: 800; letter-spacing: .2em; text-align: center; color: var(--cian);
  background: rgba(3, 8, 36, .7); border: 2px dashed var(--cian); border-radius: 12px; padding: 16px; margin: 14px 0; user-select: all; text-shadow: var(--halo-cian)
}

/* ===== Selector de talleres en la inscripción ===== */
.elegir { display: grid; gap: 10px; margin: 8px 0 16px }
.elegir label { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px; cursor: pointer; background: rgba(3, 8, 36, .45); transition: .15s }
.elegir label:hover { border-color: var(--linea-fuerte) }
.elegir label.sel { border-color: var(--ok); background: var(--ok-suave) }
.elegir label.no { opacity: .5; cursor: not-allowed }
.elegir input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--ok); flex: 0 0 auto }
.elegir .t { font-family: var(--f-ui); font-weight: 700; font-size: 1rem; line-height: 1.3 }
.elegir .d { font-size: .82rem; color: var(--texto-2) }
.elegir .cupo { margin: 8px 0 0 }

/* ===== Toast ===== */
#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px);
  background: var(--panel-solido); color: var(--texto); box-shadow: 0 0 0 1px var(--linea-fuerte), 0 12px 40px rgba(0, 0, 0, .5);
  padding: 12px 18px; border-radius: 12px; font-size: .94rem; opacity: 0; transition: .25s; z-index: 50; max-width: calc(100% - 32px); pointer-events: none
}
#toast.ver { opacity: 1; transform: translateX(-50%) translateY(0) }
#toast.error { box-shadow: 0 0 0 1px var(--peligro), 0 12px 40px rgba(0, 0, 0, .5) }
@media (min-width: 761px) { #toast { bottom: 28px } }

.legal h2 { font-size: 1.08rem; margin: 22px 0 6px }
.legal p { color: var(--texto-2); font-size: .96rem; max-width: 68ch }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }
.hero .cuenta { margin-bottom: 10px }
.legal { max-width: 760px; margin: 0 auto }
.legal .volver { margin-top: 24px }

/* ===== Inscripción en dos pasos ===== */
.registro { max-width: 640px; margin: 0 auto }
.progreso { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 22px }
.progreso li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(3, 8, 36, .5); box-shadow: inset 0 0 0 1px var(--linea); font-family: var(--f-ui); font-weight: 600; font-size: .9rem; color: var(--texto-3) }
.progreso .num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px currentColor; font-size: .85rem }
.progreso li.actual { color: var(--cian); box-shadow: inset 0 0 0 1.5px var(--cian), var(--halo-cian) }
.progreso li.actual .num { background: var(--cian); color: var(--noche); box-shadow: none }
.progreso li.hecho { color: var(--ok) }
.resumen dl { display: grid; gap: 0; margin: 4px 0 16px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea) }
.fila-resumen { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 12px; padding: 13px 16px; background: rgba(3, 8, 36, .45) }
.fila-resumen + .fila-resumen { border-top: 1px solid var(--linea) }
.fila-resumen dt { font-family: var(--f-ui); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cian); padding-top: 2px }
.fila-resumen dd { min-width: 0; overflow-wrap: anywhere; font-weight: 500 }
.fila-resumen ul { list-style: none; display: grid; gap: 8px }
.nota-resumen { font-size: .9rem; color: var(--texto-2); margin-bottom: 8px }
.acciones-resumen { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 4px }
@media (max-width: 520px) { .acciones-resumen { grid-template-columns: 1fr } .acciones-resumen .btn-contorno { order: 2 } }
.bienvenida { max-width: 520px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 4px }
.bienvenida .sello { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--noche); background: var(--ok); box-shadow: 0 0 0 8px var(--ok-suave), 0 0 40px rgba(62, 240, 165, .45); margin-bottom: 14px }

/* ===== Talleres: tarjetas grandes ===== */
.talleres-xl { display: grid; gap: 20px }
@media (min-width: 900px) { .talleres-xl { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.taller-xl { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--panel); box-shadow: var(--brillo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0 }
.taller-xl.mio { box-shadow: 0 0 0 2px var(--ok), 0 18px 50px rgba(0, 4, 30, .55) }
.taller-xl .portada {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 22px 20px;
  background:
    linear-gradient(rgba(84, 190, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(84, 190, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(130deg, var(--electrico), #0b2a9a 55%, var(--abismo));
  border-bottom: 1px solid var(--linea-fuerte)
}
.taller-xl .sala { display: inline-block; font-family: var(--f-ui); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--noche); background: var(--cian); padding: 4px 10px; border-radius: 6px; box-shadow: var(--halo-cian) }
.taller-xl .horario { font-family: var(--f-display); font-size: clamp(1.3rem, 5vw, 1.7rem); margin-top: 12px; line-height: 1.1; font-variant-numeric: tabular-nums }
.taller-xl .duracion { font-family: var(--f-ui); font-weight: 600; color: var(--texto-2); margin-top: 4px; font-size: .9rem }
.taller-xl .cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1 }
.taller-xl h3 { font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1.22; text-wrap: balance }
.relator { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(3, 8, 36, .45); box-shadow: inset 0 0 0 1px var(--linea) }
.relator img, .relator .sin-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--panel-2); box-shadow: 0 0 0 2px var(--noche), 0 0 0 3.5px var(--cian), var(--halo-cian); display: flex; align-items: center; justify-content: center; font-family: var(--f-ui); font-weight: 700; font-size: 1.2rem; color: var(--cian) }
.relator > div { display: grid; gap: 1px; min-width: 0 }
.relator small { font-family: var(--f-ui); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3) }
.relator strong { font-family: var(--f-ui); font-size: 1.12rem }
.relator span { color: var(--texto-2); font-size: .9rem }
.descripcion { display: grid; gap: 10px; font-size: 1.03rem; line-height: 1.7; color: var(--texto) }
.descripcion p { max-width: 68ch }
.taller-xl .pie-t { margin-top: auto; padding-top: 4px; display: grid; gap: 12px }

/* Anillo de cupos */
.anillo { position: relative; flex: 0 0 auto; display: grid; place-items: center }
.anillo svg { display: block }
.anillo circle { fill: none; stroke-width: 3.2 }
.anillo .pista { stroke: rgba(3, 8, 36, .55) }
.anillo .valor { stroke: var(--cian); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(46, 230, 240, .7)); transition: stroke-dasharray .6s ease }
.anillo.medio .valor { stroke: var(--alerta); filter: drop-shadow(0 0 3px rgba(255, 194, 75, .7)) }
.anillo.lleno .valor { stroke: var(--peligro) }
.anillo .cifra { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1 }
.anillo .cifra strong { font-family: var(--f-display); font-size: 1.15rem; font-variant-numeric: tabular-nums }
.anillo .cifra span { font-family: var(--f-ui); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-top: 3px }

/* Mosaico de talleres en la portada */
.cabecera-seccion { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px }
.cabecera-seccion h2 { margin: 0 }
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.cuadro {
  aspect-ratio: 1; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--texto);
  background: linear-gradient(150deg, rgba(31, 91, 255, .35), rgba(3, 8, 36, .6)); box-shadow: inset 0 0 0 1px var(--linea); transition: .18s; min-width: 0; overflow: hidden
}
.cuadro:hover { box-shadow: inset 0 0 0 1.5px var(--cian), var(--halo-cian); transform: translateY(-2px) }
.cuadro.mio { box-shadow: inset 0 0 0 2px var(--ok) }
.cuadro .sala { font-family: var(--f-ui); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cian) }
.cuadro strong { font-family: var(--f-ui); font-size: .98rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.cuadro .quien { font-size: .8rem; color: var(--texto-2) }
.cuadro .base { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; font-family: var(--f-ui); font-weight: 600; font-size: .8rem; color: var(--texto-2) }
.cuadro .anillo .cifra strong { font-size: .85rem }
.cuadro .anillo .cifra span { font-size: .5rem }
@media (max-width: 380px) { .cuadro { aspect-ratio: auto; min-height: 170px } }

/* Tipo de participante */
.campo .etiqueta { font-family: var(--f-ui); font-weight: 600; font-size: .9rem; letter-spacing: .03em }
.selector-tipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(3, 8, 36, .55); box-shadow: inset 0 0 0 1px var(--linea) }
.selector-tipo label { position: relative; cursor: pointer; min-width: 0 }
.selector-tipo input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.selector-tipo span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-family: var(--f-ui); font-weight: 700; font-size: .92rem; color: var(--texto-2); transition: .15s; overflow-wrap: anywhere }
.selector-tipo input:checked + span { background: var(--cian); color: var(--noche); box-shadow: var(--halo-cian) }
.selector-tipo input:focus-visible + span { outline: 2px solid var(--cian); outline-offset: 2px }

/* Nivel del taller */
.taller-xl .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.nivel { font-family: var(--f-ui); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: rgba(3, 8, 36, .6); box-shadow: inset 0 0 0 1.5px currentColor }
.nivel-basico { color: var(--ok) }
.nivel-intermedio { color: var(--alerta) }
.nivel-avanzado { color: var(--peligro) }
@media (max-width: 440px) {
  .selector-tipo { gap: 4px; padding: 4px }
  .selector-tipo span { font-size: .8rem; padding: 10px 2px; letter-spacing: 0; overflow-wrap: normal }
}

/* Constancia de participación: pensada para imprimirse/guardarse como PDF, por eso en claro.
   Estética «tech»: barras degradé cian/azul y esquinas tipo HUD, pero con suficiente contraste
   en negro sobre blanco para que se lea bien impresa o en blanco y negro. */
.constancia { position: relative; background: #fff; color: #10172a; border-radius: 6px; padding: 46px 42px 32px; box-shadow: var(--brillo); overflow: hidden }
.constancia::before, .constancia::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--electrico), var(--cian)) }
.constancia::before { top: 0 }
.constancia::after { bottom: 0; background: linear-gradient(90deg, var(--cian), var(--electrico)) }
.constancia .esquina { position: absolute; width: 22px; height: 22px; border: 2px solid var(--cian); opacity: .6 }
.constancia .esquina.ei { top: 16px; left: 16px; border-right: 0; border-bottom: 0 }
.constancia .esquina.ad { bottom: 16px; right: 16px; border-left: 0; border-top: 0 }
.constancia .enc { text-align: center; margin-bottom: 24px }
.constancia .enc img { height: 44px; width: auto; margin-bottom: 18px; filter: none }
.constancia .eyebrow-mes { display: block; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; color: var(--electrico); margin-bottom: 12px }
.constancia .area { display: inline-block; font-family: var(--f-ui); font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--electrico); border: 1.5px solid var(--electrico); border-radius: 999px; padding: 7px 18px; margin-bottom: 18px }
.constancia .enc h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; color: #0a2a9e }
.constancia .cuerpo { font-family: var(--f-texto); font-size: 1.05rem; line-height: 1.7; text-align: center; max-width: 520px; margin: 0 auto 22px }
.constancia .talleres-constancia { margin: 0 auto 26px; max-width: 480px; text-align: left; background: #f3f6fc; border-radius: 10px; padding: 16px 20px; border-left: 3px solid var(--cian) }
.constancia .talleres-constancia p { font-weight: 700; margin: 0 0 6px; font-size: .92rem }
.constancia .talleres-constancia ul { margin: 0; padding-left: 20px }
.constancia .disclaimer { text-align: center; font-size: .76rem; font-style: italic; color: #5a6587; margin: 8px 0 0; padding-top: 18px; border-top: 1.5px dashed #c7cedf }

/* Encuesta: selector de 1 a 5 estrellas */
.estrellas { display: flex; gap: 6px; margin-top: 6px }
.estrella { background: none; border: none; padding: 2px; font-size: 1.9rem; line-height: 1; color: var(--texto-3); cursor: pointer; transition: .1s; min-height: 0 }
.estrella:hover { color: var(--cian-suave) }
.estrella.activa { color: var(--cian); text-shadow: var(--halo-cian) }
.campo-taller { margin-bottom: 14px }
.campo-taller:last-child { margin-bottom: 0 }
.subtitulo-encuesta { font-family: var(--f-ui); font-weight: 700; font-size: 1rem; color: var(--cian); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--linea) }
.subtitulo-encuesta:first-of-type { margin-top: 4px; padding-top: 0; border-top: none }

/* Encuesta: selector 0-10 (NPS) */
.escala-nps { margin-top: 8px }
.escala-nps .botones { display: flex; flex-wrap: wrap; gap: 5px }
.escala-nps .num {
  flex: 1 0 28px; min-width: 28px; height: 36px; padding: 0; border-radius: 8px; border: 1.5px solid var(--linea-fuerte);
  background: transparent; color: var(--texto-2); font-family: var(--f-ui); font-weight: 600; font-size: .88rem; cursor: pointer; transition: .1s; min-height: 0;
}
.escala-nps .num:hover { border-color: var(--cian) }
.escala-nps .num.activo { background: var(--cian); border-color: var(--cian); color: var(--noche); box-shadow: var(--halo-cian) }
.escala-nps .extremos { display: flex; justify-content: space-between; margin-top: 6px; font-size: .76rem; color: var(--texto-3) }

@media print {
  body { background: #fff }
  body::before { display: none }
  .cab, .pie, .inferior, #toast, .no-imprimir { display: none !important }
  main.wrap { max-width: none; padding: 0; margin: 0 }
  .constancia { box-shadow: none; border-radius: 0; padding: 40px 36px 26px }
  @page { margin: 14mm }
}
@media (max-width: 380px) { .selector-tipo span { font-size: .72rem } }