/* MINUME XVII · sistema de diseño · tokens (colores, letras, espacios, radios, sombras, movimiento)
     Línea gráfica MXVII y el sistema de EyC como referencia: azules de #0a0464 a #00b5ff, cian #00fdef, rosa #ffbeff y rojo #e53535.
     Dos temas: claro (por defecto, se lee bien al sol) y oscuro («noche»). Sigue al teléfono y se puede cambiar con el botón del tema.
     Las zonas de marca (bienvenida, saludo) usan siempre «noche»: clase .zona-noche.
     Las rutas de las fuentes se resuelven durante la compilación del sitio. */

  @font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-400-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-500-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-600-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-700-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow'; font-weight: 800; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-800-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow'; font-weight: 900; font-style: normal; font-display: swap; src: url(/fuentes/barlow-latin-900-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url(/fuentes/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url(/fuentes/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
  @font-face { font-family: 'Libre Baskerville'; font-weight: 400; font-style: italic; font-display: swap; src: url(/fuentes/libre-baskerville-latin-400-italic.woff2) format('woff2'); }

  :root {
    /* Marca (no cambian con el tema) */
    --m-noche: #0a0464; --m-marino: #002193; --m-rey: #0043c5; --m-azul: #0090fb; --m-celeste: #00b5ff; --m-turquesa: #00fdef; --m-rosa: #ffbeff; --m-rojo: #e53535;
    --grad-heroe: linear-gradient(120deg, #002193 0%, #0043c5 58%, #0090fb 100%);
    --grad-noche: linear-gradient(160deg, #07075e 0%, #00209a 55%, #0043c5 100%);
    --grad-primario: linear-gradient(180deg, #0a4fd6 0%, #0043c5 100%);
    --grad-celeste: linear-gradient(90deg, #0095fa 0%, #22c4f0 100%);
    --grad-rosa: linear-gradient(180deg, #d33a3a 0%, #c42b2b 100%);

    /* Letras: Barlow para leer, Barlow Condensed para títulos, Libre Baskerville cursiva solo como acento (como «de» en MINUME de ESTRELLAS) */
    --f-txt: 'Barlow', system-ui, 'Segoe UI', sans-serif;
    --f-tit: 'Barlow', system-ui, 'Segoe UI', sans-serif;
    --f-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --f-ed: 'Libre Baskerville', Georgia, serif;

    /* Escala de letra (mayor tercera ≈ 1.25) */
    --t-xs: .75rem; --t-sm: .8125rem; --t-md: .9375rem; --t-base: 1rem; --t-lg: 1.25rem; --t-xl: 1.5625rem; --t-2xl: 2rem; --t-3xl: clamp(2.25rem, 5vw, 3.25rem);

    /* Espacios (rejilla de 4 y 8) */
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

    /* Radios */
    --r-sm: 10px; --r-md: 12px; --r-lg: 20px; --r-card: 28px 6px 28px 28px; --r-pill: 999px; --radio: var(--r-lg);

    /* Tamaños */
    --toque: 44px; --ancho-max: 1280px; --cab-h: 64px;

    /* Movimiento */
    --ease: cubic-bezier(.2, .7, .2, 1); --t-rapido: 140ms; --t-medio: 240ms;

    color-scheme: light;
  }

  /* ---------- Claro ---------- */
  :root, :root[data-theme="light"] {
    /* Texto con color de equipo: tonos medidos (4.5 o más sobre blanco y sobre el fondo de página) */
    --tx-mix: #000000; --tx-p: 55%; --eq-txt: #006dc1;
    --fondo: #eef3fc;
    --fondo-arte: radial-gradient(1100px 520px at 90% -10%, rgb(0 144 251 / .14), transparent 60%), radial-gradient(900px 480px at -10% 0%, rgb(0 33 147 / .08), transparent 60%), #eef3fc;
    --panel: #ffffff;
    --panel2: #e6eefc;
    --panel-vidrio: rgb(255 255 255 / .86);
    --campo: #f6f9ff;
    --borde: #cbd8ee;
    --borde-fuerte: #8597b3;
    --texto: #07174a;
    --suave: #33476a;
    --tenue: #51668a;
    --velo: rgb(7 23 74 / .035);
    --velo-2: rgb(7 23 74 / .06);
    --velo-3: rgb(7 23 74 / .1);

    --acento: #0043c5;
    --acento-fuerte: #00329a;
    --acento-sobre: #ffffff;
    --acento-suave: #dfe9ff;
    --enlace: #0043c5;
    --foco: #0043c5;

    /* Estados: texto/relleno, fondo suave y borde, calculados para pasar contraste AA sobre el panel */
    --verde: #0f7a4f;   --verde-bg: #ddf4e4;   --verde-borde: rgb(15 122 79 / .4);
    --amarillo: #7a4f00; --amarillo-bg: #ffefc2; --amarillo-borde: rgb(138 90 0 / .4);
    --rojo: #b3261e;    --rojo-bg: #fde4e6;    --rojo-borde: rgb(179 38 30 / .4);
    --naranja: #b24a00; --naranja-bg: #ffe6d1;
    --azul: #0043c5; --azul2: #0043c5; --cian: #00719c; --texto-azul: #0043c5;

    /* Texto con color de equipo: tonos medidos (4.5 o más sobre blanco y sobre el fondo de página) */
    --tx-mix: #000000; --tx-p: 55%;
    --eq-txt: #006dc1;
    --sombra-1: 0 1px 2px rgb(0 33 147 / .06);
    --sombra-2: 0 1px 2px rgb(0 33 147 / .06), 0 10px 30px -14px rgb(0 33 147 / .24);
    --sombra-3: 0 2px 6px rgb(0 33 147 / .08), 0 22px 48px -18px rgb(0 33 147 / .34);
    --sombra-boton: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 14px -8px rgb(0 33 147 / .55);
    --cab-fondo: rgb(255 255 255 / .86);
    --cab-borde: #cbd8ee;
    --scrim: rgb(5 5 74 / .55);
  }

  /* ---------- Oscuro («noche») ---------- */
  :root[data-theme="dark"], .zona-noche {
    --fondo: #05054a;
    --fondo-arte: radial-gradient(1100px 600px at 80% -10%, rgb(0 144 251 / .3), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgb(0 240 230 / .09), transparent 60%), linear-gradient(180deg, #05054a 0%, #001a6e 100%);
    --panel: #0b1a6b;
    --panel2: #12257f;
    --panel-vidrio: rgb(13 30 120 / .66);
    --campo: #081052;
    --borde: rgb(120 170 255 / .22);
    --borde-fuerte: rgb(150 190 255 / .5);
    --texto: #f1f6ff;
    --suave: #cddaf6;
    --tenue: #a9bce4;
    --velo: rgb(255 255 255 / .035);
    --velo-2: rgb(255 255 255 / .06);
    --velo-3: rgb(255 255 255 / .1);

    --acento: #3fc4ff;
    --acento-fuerte: #7fd8ff;
    --acento-sobre: #04121d;
    --acento-suave: rgb(63 196 255 / .16);
    --enlace: #7fdcff;
    --foco: #00f0e6;

    --verde: #5fe3b4;   --verde-bg: rgb(52 211 120 / .15);  --verde-borde: rgb(95 227 180 / .45);
    --amarillo: #ffd23f; --amarillo-bg: rgb(255 210 63 / .13); --amarillo-borde: rgb(255 210 63 / .45);
    --rojo: #ff8a95;    --rojo-bg: rgb(229 53 53 / .2);     --rojo-borde: rgb(255 138 149 / .5);
    --naranja: #ffa95c; --naranja-bg: rgb(255 154 60 / .16);
    --azul: #3fc4ff; --azul2: #0043c5; --cian: #00d9ff; --texto-azul: #7fdcff;

    --tx-mix: #ffffff; --tx-p: 70%; --eq-txt: #379cfd;
    --sombra-1: 0 1px 0 rgb(255 255 255 / .05) inset;
    --sombra-2: 0 1px 0 rgb(255 255 255 / .06) inset, 0 18px 40px -20px rgb(0 0 0 / .7);
    --sombra-3: 0 1px 0 rgb(255 255 255 / .08) inset, 0 28px 60px -22px rgb(0 0 0 / .8);
    --sombra-boton: 0 1px 0 rgb(255 255 255 / .16) inset, 0 6px 16px -8px rgb(0 0 0 / .6);
    --cab-fondo: rgb(5 5 74 / .84);
    --cab-borde: rgb(120 170 255 / .22);
    --scrim: rgb(2 2 36 / .66);
    color-scheme: dark;
  }

  /* El teléfono manda: si no se eligió tema a mano y el sistema es oscuro, se usa «noche» */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fondo: #05054a;
      --fondo-arte: radial-gradient(1100px 600px at 80% -10%, rgb(0 144 251 / .3), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgb(0 240 230 / .09), transparent 60%), linear-gradient(180deg, #05054a 0%, #001a6e 100%);
      --panel: #0b1a6b; --panel2: #12257f; --panel-vidrio: rgb(13 30 120 / .66); --campo: #081052;
      --borde: rgb(120 170 255 / .22); --borde-fuerte: rgb(150 190 255 / .5);
      --texto: #f1f6ff; --suave: #cddaf6; --tenue: #a9bce4;
      --velo: rgb(255 255 255 / .035); --velo-2: rgb(255 255 255 / .06); --velo-3: rgb(255 255 255 / .1);
      --acento: #3fc4ff; --acento-fuerte: #7fd8ff; --acento-sobre: #04121d; --acento-suave: rgb(63 196 255 / .16); --enlace: #7fdcff; --foco: #00f0e6;
      --verde: #5fe3b4; --verde-bg: rgb(52 211 120 / .15); --verde-borde: rgb(95 227 180 / .45);
      --amarillo: #ffd23f; --amarillo-bg: rgb(255 210 63 / .13); --amarillo-borde: rgb(255 210 63 / .45);
      --rojo: #ff8a95; --rojo-bg: rgb(229 53 53 / .2); --rojo-borde: rgb(255 138 149 / .5);
      --naranja: #ffa95c; --naranja-bg: rgb(255 154 60 / .16);
      --azul: #3fc4ff; --azul2: #0043c5; --cian: #00d9ff; --texto-azul: #7fdcff;
      --tx-mix: #ffffff; --tx-p: 70%; --eq-txt: #379cfd;
      --sombra-1: 0 1px 0 rgb(255 255 255 / .05) inset;
      --sombra-2: 0 1px 0 rgb(255 255 255 / .06) inset, 0 18px 40px -20px rgb(0 0 0 / .7);
      --sombra-3: 0 1px 0 rgb(255 255 255 / .08) inset, 0 28px 60px -22px rgb(0 0 0 / .8);
      --sombra-boton: 0 1px 0 rgb(255 255 255 / .16) inset, 0 6px 16px -8px rgb(0 0 0 / .6);
      --cab-fondo: rgb(5 5 74 / .84); --cab-borde: rgb(120 170 255 / .22); --scrim: rgb(2 2 36 / .66);
      color-scheme: dark;
    }
  }

  /* Color de texto de cada equipo, por tema */
  :root[data-sistema="asistencia"] { --eq-txt: #0073a4; } :root[data-sistema="acreditacion"] { --eq-txt: #7c54be; } :root[data-sistema="seguridad"] { --eq-txt: #c72d2d; }
  :root[data-sistema="bienestar"] { --eq-txt: #007972; } :root[data-sistema="eventos"] { --eq-txt: #a3338f; } :root[data-sistema="coordinacion"] { --eq-txt: #006dc1; }
  :root[data-theme="dark"][data-sistema="asistencia"] { --eq-txt: #00b5ff; } :root[data-theme="dark"][data-sistema="acreditacion"] { --eq-txt: #af80ff; } :root[data-theme="dark"][data-sistema="seguridad"] { --eq-txt: #f27167; }
  :root[data-theme="dark"][data-sistema="bienestar"] { --eq-txt: #00fdef; } :root[data-theme="dark"][data-sistema="eventos"] { --eq-txt: #ffbeff; } :root[data-theme="dark"][data-sistema="coordinacion"] { --eq-txt: #379cfd; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"])[data-sistema="asistencia"] { --eq-txt: #00b5ff; } :root:not([data-theme="light"])[data-sistema="acreditacion"] { --eq-txt: #af80ff; } :root:not([data-theme="light"])[data-sistema="seguridad"] { --eq-txt: #f27167; }
    :root:not([data-theme="light"])[data-sistema="bienestar"] { --eq-txt: #00fdef; } :root:not([data-theme="light"])[data-sistema="eventos"] { --eq-txt: #ffbeff; } :root:not([data-theme="light"])[data-sistema="coordinacion"] { --eq-txt: #379cfd; }
  }

:root{font-family:var(--f-txt);color-scheme:light;color:#07174a;background:#05054a}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse 900px 620px at 85% 0%,#0043c5 0%,transparent 65%),radial-gradient(ellipse 760px 620px at 0% 100%,#002193 0%,transparent 65%),#06033f}
button,input{font:inherit} button{cursor:pointer} :focus-visible{outline:3px solid #0043c5;outline-offset:3px;border-radius:8px}
html.modo-evento .solo-demo{display:none!important}

/* Marco blanco con dos mitades: a la izquierda el panel de marca con degradado azul y a la derecha el formulario. Todo en una sola pantalla. */
.marco{height:100dvh;display:grid;place-items:center;padding:clamp(8px,2.4vw,28px)}
.hoja{width:min(1180px,100%);height:min(100%,740px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(8px,1.4vw,16px);padding:clamp(6px,.8vw,10px);border-radius:32px;background:#fff;box-shadow:0 40px 90px -30px #000a;overflow:hidden}
.marca{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:clamp(22px,3vw,40px);border-radius:26px;color:#fff;overflow:hidden;background:radial-gradient(60% 50% at 28% 22%,#0095fa 0%,transparent 70%),radial-gradient(70% 55% at 80% 70%,#00b5ff 0%,transparent 70%),linear-gradient(160deg,#002193 0%,#0043c5 55%,#06033f 130%)}
.marca::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:min(120%,820px);aspect-ratio:1;transform:translate(-50%,-50%);background:url('/marca/anillo.svg') center/contain no-repeat;opacity:.22;mix-blend-mode:screen;animation:girar 240s linear infinite}
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg)}}
.marca::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(1.5px 1.5px at 14% 30%,#fff9,transparent),radial-gradient(2px 2px at 84% 22%,#00f0e6cc,transparent),radial-gradient(1.5px 1.5px at 66% 62%,#fff8,transparent),radial-gradient(1px 1px at 30% 80%,#fff9,transparent)}
.logo{width:clamp(118px,13vw,168px);height:auto;display:block}
.centro{align-self:end;display:grid;gap:12px;justify-items:start}
.pildora{display:inline-block;padding:7px 16px;border-radius:99px;background:#ffffff2e;backdrop-filter:blur(6px);font-size:14px;font-weight:700}
h1{margin:0;font:900 clamp(52px,7.6vw,104px)/.9 var(--f-tit);letter-spacing:-.035em}
h1 span{display:block;font-family:var(--f-ed);font-style:italic;font-weight:400;letter-spacing:0;color:#8af8f2;font-size:.46em;line-height:1.1;margin-bottom:.08em}
.sub{margin:0;max-width:34ch;font-size:clamp(15px,1.5vw,18px);line-height:1.45;color:#ffffffeb}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.pasos li{display:grid;align-content:space-between;gap:20px;min-height:clamp(96px,17dvh,132px);padding:14px;border-radius:18px 5px 18px 18px;background:#ffffff26;backdrop-filter:blur(8px);font-size:13.5px;font-weight:600;line-height:1.3;color:#ffffffe6}
.pasos li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #ffffff99;font-size:12px}
.pasos li.on{background:#fff;color:#07174a}.pasos li.on b{background:#0043c5;border-color:#0043c5;color:#fff}

.forma{display:grid;grid-template-rows:1fr auto;gap:10px;padding:clamp(18px,3vw,40px) clamp(18px,3.4vw,52px) clamp(14px,2vw,24px);min-height:0;color:#07174a}
.forma>div{display:grid;align-content:center;min-height:0}
h2{margin:0 0 clamp(14px,3dvh,26px);text-align:center;font:900 clamp(28px,3.4vw,38px)/1.05 var(--f-tit);letter-spacing:-.02em}
h2 em{font-family:var(--f-ed);font-style:italic;font-weight:400;letter-spacing:0;color:#0043c5}
label{display:block;margin-bottom:8px;font-size:14px;font-weight:700}
input{width:100%;min-width:0;min-height:56px;padding:10px 16px;border:1.5px solid transparent;border-radius:14px;background:#f2f5fb;color:#07174a;text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(20px,5.4vw,24px);font-weight:800}
input::placeholder{color:#7d8cab;letter-spacing:.04em;text-transform:none;font-weight:600}
input:focus{outline:none;border-color:#0043c5;background:#fff;box-shadow:0 0 0 4px #0043c522}
.mensaje{min-height:30px;display:flex;align-items:center;margin:6px 0 4px;color:#51668a;font-size:13px;line-height:1.35}
.mensaje.error{color:#b3261e;font-weight:700}
.accion{width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 24px;border:0;border-radius:14px;color:#fff;background:linear-gradient(180deg,#0a4fd6,#0043c5);font-size:17px;font-weight:800;box-shadow:0 10px 24px -10px #0043c5;transition:transform .14s,filter .14s}
.accion:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.accion:active:not(:disabled){transform:scale(.98)}
.accion:disabled{background:#c9d3e6;color:#fff;box-shadow:none;cursor:default}
.sesiones{display:grid;gap:8px;margin-top:12px}.sesiones:empty{display:none}
.sesiones button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:8px 16px;border:1.5px solid #dfe5f2;border-radius:14px;background:#fff;color:#07174a;text-align:left;font-weight:700;overflow:hidden}
.sesiones button:hover{border-color:#0043c5}
.sesiones button>span{flex:1 1 0;min-width:0;overflow:hidden}.sesiones button>span>span,.sesiones button>span>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sesiones small{color:#51668a;font-weight:500;font-size:12px}
.o{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:#51668a;font-size:13px}.o::before,.o::after{content:"";flex:1;height:1px;background:#e3e8f3}
.prueba-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prueba-g button{min-height:42px;padding:6px 8px;border:1.5px solid #dfe5f2;border-radius:12px;background:#fff;color:#0b2a78;font-size:12.5px;font-weight:700;line-height:1.1}
.prueba-g button:hover{background:#eef3fc;border-color:#0043c5}
.pie{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;color:#51668a;font-size:11.5px;line-height:1.35;text-align:left}
.pie img{height:30px;width:auto;flex:none}.pie span{max-width:36ch}

@media (max-width:899px){
  .marco{padding:0}
  .hoja{height:100%;max-height:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-radius:0;gap:0;padding:6px 6px 0}
  .marca{grid-template-rows:auto auto;gap:10px;padding:16px 18px 18px;border-radius:24px}
  .centro{align-self:start;gap:8px}.pasos{display:none}.sub{display:none}
  h1{font-size:clamp(46px,14vw,64px)}
  .forma{padding:16px 18px 10px;gap:6px}
  h2{font-size:24px;margin-bottom:10px;text-align:left}
  .mensaje{min-height:24px}
}
@media (max-width:899px) and (max-height:720px){.pildora{display:none}.pie span{display:none}.accion{min-height:50px}input{min-height:50px}.prueba-g button{min-height:38px}}
@media (min-width:900px) and (max-height:700px){.sub{display:none}.pasos li{min-height:84px}}
@media (prefers-reduced-motion:reduce){.marca::before{animation:none}.accion{transition:none}}