*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,figure,fieldset{margin:0;padding:0}
fieldset{border:0}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  color-scheme:dark;
  --serif:"Times New Roman",Tinos,Times,"Liberation Serif","Nimbus Roman",Georgia,serif;

  --ground:#060D1E; --surface:#0E1B37; --surface-2:#142549; --surface-3:#0A1530;
  --line:#22365E; --line-2:#34507F;
  --ink:#F5EEDC; --ink-2:#C3CEE6; --ink-3:#8A9BC2;

  --oro:#E0C377; --oro-claro:#F7E7B4; --oro-hondo:#A8862F; --oro-tinta:#0A1226;
  --verde:#5FD29B; --rojo:#F0948F; --rojo-hondo:#8E2B2E;

  --metal-oro:linear-gradient(152deg,#F7E7B4 0%,#DFC275 24%,#A8862F 52%,#F2DFA4 74%,#C9A950 100%);
  --metal-azul:linear-gradient(170deg,#1A2E5B 0%,#12213F 50%,#0C1830 100%);
  --brillo:inset 0 1px 0 rgba(255,255,255,.06);
  --sombra:0 1px 2px rgba(0,0,0,.5),0 18px 40px -22px rgba(0,0,0,.95);
  --r:12px;
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif); font-size:17px; line-height:1.5;
  background:var(--ground); color:var(--ink); min-height:100vh;
  padding-inline:max(16px,env(safe-area-inset-left));
  -webkit-font-smoothing:antialiased;
}
.fondo{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(38,78,150,.55), transparent 62%),
    radial-gradient(700px 500px at 100% 100%, rgba(168,134,47,.12), transparent 60%),
    radial-gradient(600px 460px at 0% 90%, rgba(42,90,65,.16), transparent 60%),
    linear-gradient(180deg,#0A1633 0%, #060D1E 70%);
}
.fondo::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 7px);
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--surface-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--oro-claro)}

h1{font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:700; line-height:1.12; letter-spacing:.005em}
h2{font-size:1.35rem; font-weight:700}
.sobretitulo{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); font-weight:700; margin-bottom:.35rem}
.guia{color:var(--ink-2); max-width:62ch}
.panel-cabeza .guia{margin-top:.35rem}
.guia.pequena{font-size:.9rem; margin-top:.4rem}
.mensaje{min-height:1.5em; margin-top:.8rem; color:var(--ink-2)}
.mensaje.error{color:var(--rojo)}
.mensaje.ok{color:var(--verde)}

.vista{max-width:1180px; margin:0 auto; padding-block:18px 64px}

/* ---------- botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.55rem 1.15rem; border-radius:10px; border:1px solid transparent;
  font-weight:700; font-size:1rem; letter-spacing:.01em; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.boton svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.boton:active{transform:translateY(1px)}
.boton:focus-visible,.opcion:focus-visible,.pestana:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.icono:focus-visible{outline:2px solid var(--oro-claro); outline-offset:2px}
.boton-oro{background:var(--metal-oro); color:var(--oro-tinta); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px -12px rgba(224,195,119,.8)}
.boton-oro:hover{filter:brightness(1.07)}
.boton-linea{background:rgba(255,255,255,.02); color:var(--oro-claro); border-color:rgba(224,195,119,.45)}
.boton-linea:hover{background:rgba(224,195,119,.1); border-color:var(--oro)}
.boton-fantasma{background:transparent; color:var(--ink-2); border-color:var(--line-2)}
.boton-fantasma:hover{color:var(--ink); border-color:var(--ink-3)}
.boton-peligro{background:transparent; color:var(--rojo); border-color:rgba(240,148,143,.45)}
.boton-peligro:hover{background:rgba(240,148,143,.1)}
.boton-grande{min-height:54px; padding:.7rem 1.6rem; font-size:1.08rem}
.boton-ancho{width:100%}
.boton[disabled]{opacity:.55; cursor:progress}

/* ---------- inicio ---------- */
.inicio{display:flex; flex-direction:column; align-items:center; min-height:100vh; padding-top:clamp(20px,5vh,56px)}
.heroe{text-align:center; display:flex; flex-direction:column; align-items:center}
.heroe-marca{position:relative; display:flex; flex-direction:column; align-items:center; isolation:isolate}
.heroe-arbol{display:block; width:clamp(150px,22vw,230px); height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.heroe-letras{display:block; width:clamp(220px,34vw,360px); height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.caja-letras{margin-top:10px}

/* Animación de la marca: el árbol crece desde el tronco, las letras se revelan de izquierda a derecha
   y después un destello dorado recorre ambos de vez en cuando. */
.brillo{position:relative; display:block; line-height:0}
.brillo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,246,214,.95) 49%, rgba(255,255,255,.9) 50%, rgba(255,246,214,.95) 51%, transparent 62%);
  background-size:300% 100%; background-position:120% 0; background-repeat:no-repeat;
  -webkit-mask:var(--mascara) center/100% 100% no-repeat; mask:var(--mascara) center/100% 100% no-repeat;
  mix-blend-mode:screen; opacity:0;
}
.caja-arbol{animation:crecer 1.6s cubic-bezier(.45,.05,.25,1) both}
.caja-arbol::after{animation:destello 7s ease-in-out 2.6s infinite; background-image:linear-gradient(105deg, transparent 42%, rgba(255,244,205,.5) 50%, transparent 58%)}
.caja-letras{animation:revelar 1.05s cubic-bezier(.3,.7,.2,1) .95s both}
.caja-letras::after{animation:destello 7s ease-in-out 1.9s infinite}
.flota{animation:flotar 7s ease-in-out 1.4s infinite}
.halo{
  position:absolute; z-index:-1; left:50%; top:0; width:clamp(240px,34vw,360px); aspect-ratio:1; transform:translate(-50%,-6%);
  background:radial-gradient(closest-side, rgba(232,194,91,.34), rgba(232,194,91,.10) 55%, transparent 72%);
  filter:blur(6px); animation:halo-entra 1.6s ease .2s both, halo-late 6s ease-in-out 1.8s infinite;
}
.chispa{
  position:absolute; z-index:2; width:12px; height:12px; opacity:0; pointer-events:none;
  background:radial-gradient(circle, #FFF8E1 0 18%, #F2D98E 30%, transparent 62%);
  clip-path:polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation:titilar 3.6s ease-in-out infinite;
}
.c1{left:calc(50% - 96px); top:12%; animation-delay:1.6s}
.c2{left:calc(50% + 78px); top:6%; width:9px; height:9px; animation-delay:2.5s}
.c3{left:calc(50% + 104px); top:40%; animation-delay:3.3s}
.c4{left:calc(50% - 118px); top:44%; width:8px; height:8px; animation-delay:4.1s}
.c5{left:calc(50% - 36px); top:-2%; width:10px; height:10px; animation-delay:2.9s}
.c6{left:calc(50% + 150px); top:80%; width:9px; height:9px; animation-delay:4.7s}

@keyframes crecer{
  0%{clip-path:inset(100% -30% -30% -30%); transform:translateY(14px) scale(.94); opacity:0}
  25%{opacity:1}
  100%{clip-path:inset(-30% -30% -30% -30%); transform:none; opacity:1}
}
@keyframes revelar{
  0%{clip-path:inset(-30% 100% -30% -30%); opacity:0; transform:translateY(4px)}
  30%{opacity:1}
  100%{clip-path:inset(-30% -30% -30% -30%); opacity:1; transform:none}
}
@keyframes destello{
  0%{background-position:120% 0; opacity:0}
  4%{opacity:1}
  26%{background-position:-20% 0; opacity:1}
  30%,100%{background-position:-20% 0; opacity:0}
}
@keyframes flotar{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
@keyframes halo-entra{from{opacity:0; transform:translate(-50%,-6%) scale(.6)} to{opacity:1; transform:translate(-50%,-6%) scale(1)}}
@keyframes halo-late{0%,100%{opacity:.75} 50%{opacity:1}}
@keyframes titilar{0%,100%{opacity:0; transform:scale(.2) rotate(0)} 12%{opacity:1; transform:scale(1) rotate(45deg)} 26%{opacity:0; transform:scale(.3) rotate(90deg)}}
.heroe-sub{animation:aparecer .8s 1.6s ease both; margin-top:18px; font-size:clamp(1.05rem,2.2vw,1.35rem); letter-spacing:.34em; text-transform:uppercase; color:var(--ink); font-weight:700}
.heroe-lema{animation:aparecer .8s 1.75s ease both; margin-top:8px; font-style:italic; color:var(--ink-3); font-size:1.02rem}
@keyframes aparecer{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.opciones{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; max-width:860px; margin-top:clamp(28px,6vh,54px)}
.opcion{
  position:relative; display:flex; align-items:center; gap:16px; padding:22px 22px; border-radius:16px;
  text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--metal-azul);
  box-shadow:var(--sombra), var(--brillo); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation:aparecer .8s 1.9s ease both;
}
.opcion:hover{transform:translateY(-3px); border-color:rgba(224,195,119,.7); box-shadow:var(--sombra), 0 0 0 1px rgba(224,195,119,.25), var(--brillo)}
.opcion-oro{border-color:rgba(224,195,119,.55)}
.opcion-icono{flex:none; width:58px; height:58px; border-radius:14px; display:grid; place-items:center; background:var(--metal-oro); color:var(--oro-tinta); box-shadow:0 1px 0 rgba(255,255,255,.55) inset}
.opcion-azul .opcion-icono{background:linear-gradient(152deg,#3A5E9E,#1B3466 60%,#2D4C86); color:var(--oro-claro); box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.opcion-icono svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.opcion-texto{display:flex; flex-direction:column; gap:3px; min-width:0}
.opcion-texto strong{font-size:1.3rem}
.opcion-texto span{color:var(--ink-2); font-size:.98rem}
.opcion-flecha{margin-left:auto; font-size:1.5rem; color:var(--oro)}
.pie{margin-top:auto; padding-top:48px; color:var(--ink-3); font-size:.88rem; letter-spacing:.06em; text-align:center}

/* ---------- barra ---------- */
.barra{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:6px 18px; border-bottom:1px solid var(--line); margin-bottom:28px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.marca img{height:42px; width:auto}
.marca .marca-letras{height:22px}
.enlace-volver{color:var(--ink-2); text-decoration:none; background:none; border:0; cursor:pointer; padding:6px 0; font-size:1rem}
.enlace-volver:hover{color:var(--oro-claro)}
.panel>.enlace-volver{align-self:flex-start}

/* ---------- participante ---------- */
.consulta{max-width:640px; margin:clamp(10px,6vh,60px) auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem}
.consulta .guia{margin-inline:auto}
.form-codigo{display:flex; flex-direction:column; gap:14px; width:100%; max-width:420px; margin-top:18px}
.campo-codigo{
  width:100%; text-align:center; font-size:clamp(2rem,8vw,2.7rem); letter-spacing:.18em; font-weight:700;
  padding:14px 12px; border-radius:14px; border:1px solid rgba(224,195,119,.5);
  background:linear-gradient(180deg,#0B1733,#0E1D3F); color:var(--oro-claro); font-variant-numeric:tabular-nums;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45);
}
.campo-codigo::placeholder{color:#3C5282}
.resultado{display:flex; flex-direction:column; gap:22px}
.resultado-cabeza{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.res-curso{color:var(--ink-2); font-size:1.1rem; font-style:italic; margin-top:.3rem}
.resultado-acciones{display:flex; gap:10px; flex-wrap:wrap}
.lienzo-marco{border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(224,195,119,.25); background:#F6F1E4; line-height:0}
.lienzo{display:block; width:100%; height:auto; aspect-ratio:279.4/215.9}

/* ---------- entrar ---------- */
.tarjeta-entrar{max-width:440px; margin:clamp(10px,5vh,50px) auto 0; background:var(--metal-azul); border:1px solid var(--line); border-radius:18px; padding:34px 30px 26px; box-shadow:var(--sombra),var(--brillo)}
.tarjeta-entrar form{display:flex; flex-direction:column; gap:14px}
.tarjeta-entrar h1{font-size:1.9rem}
.candado{width:60px; height:60px; border-radius:16px; display:grid; place-items:center; background:var(--metal-oro); color:var(--oro-tinta); margin-bottom:18px}
.candado svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8}

/* ---------- campos ---------- */
.campo{display:flex; flex-direction:column; gap:6px}
.campo>span,legend{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-2)}
legend small{letter-spacing:0; text-transform:none; font-weight:400; color:var(--ink-3)}
.campo small{color:var(--ink-3); font-size:.85rem}
.campo input,.campo select,.campo textarea,.buscador{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--surface-3); color:var(--ink); font-size:1.02rem;
}
.campo textarea{resize:vertical; min-height:160px; line-height:1.45}
.campo input[type=date]{color-scheme:dark}
.campo input:focus,.campo select:focus,.campo textarea:focus,.buscador:focus{border-color:var(--oro)}
.casilla{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); cursor:pointer}
.casilla input{margin-top:5px; accent-color:var(--oro); width:18px; height:18px; flex:none}

/* ---------- admin ---------- */
.barra-admin{flex-wrap:wrap}
.pestanas{display:flex; gap:4px; background:var(--surface-3); border:1px solid var(--line); border-radius:12px; padding:4px}
.pestana{background:none; border:0; padding:8px 18px; border-radius:9px; cursor:pointer; color:var(--ink-2); font-weight:700; font-size:1rem}
.pestana:hover{color:var(--ink)}
.pestana[aria-current="page"]{background:var(--metal-oro); color:var(--oro-tinta)}
.panel{display:flex; flex-direction:column; gap:20px}
.panel-cabeza{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.herramientas{display:flex; gap:10px}
.buscador{max-width:440px}

.rejilla-cursos{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.curso-tarjeta{
  text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:14px;
  background:var(--metal-azul); border:1px solid var(--line); color:var(--ink); box-shadow:var(--sombra),var(--brillo);
  transition:transform .14s ease, border-color .14s ease; font-size:1rem;
}
.curso-tarjeta:hover{transform:translateY(-2px); border-color:rgba(224,195,119,.6)}
.curso-tarjeta .cod{font-size:.76rem; letter-spacing:.16em; color:var(--oro); font-weight:700}
.curso-tarjeta h3{font-size:1.2rem; line-height:1.25; margin:0}
.curso-tarjeta .meta{color:var(--ink-3); font-size:.95rem; font-style:italic}
.barra-avance{height:6px; background:var(--surface-3); border-radius:6px; overflow:hidden; margin-top:auto}
.barra-avance i{display:block; height:100%; background:var(--metal-oro)}
.curso-tarjeta .pie-t{display:flex; justify-content:space-between; color:var(--ink-2); font-size:.92rem}

.vacio{border:1px dashed var(--line-2); border-radius:14px; padding:36px 20px; text-align:center; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:14px}

.curso-cabeza{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px; border-radius:16px; background:var(--metal-azul); border:1px solid var(--line); box-shadow:var(--sombra),var(--brillo)}
.curso-info{min-width:0; flex:1 1 420px}
.det-meta{color:var(--ink-2); margin-top:.5rem; font-style:italic}
.det-firmas{color:var(--ink-3); margin-top:.3rem; font-size:.95rem}
.cifras{display:flex; gap:12px}
.cifra{min-width:120px; padding:14px 16px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center}
.cifra strong{font-size:2rem; line-height:1; color:var(--oro-claro)}
.cifra span{color:var(--ink-3); font-size:.88rem; margin-top:4px}
.acciones-curso{display:flex; gap:10px; flex-wrap:wrap}

.tabla-marco{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface-3)}
.tabla{width:100%; border-collapse:collapse; font-size:1rem}
.tabla th{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0}
.tabla td{padding:10px 14px; border-bottom:1px solid rgba(34,54,94,.6); vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:rgba(255,255,255,.025)}
.tabla .num{text-align:right; width:1%; white-space:nowrap; font-variant-numeric:tabular-nums}
.tabla .der{text-align:right}
.codigo{font-weight:700; letter-spacing:.1em; color:var(--oro-claro); font-variant-numeric:tabular-nums; white-space:nowrap}
.acciones-fila{display:flex; gap:4px; justify-content:flex-end}
.icono{width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer}
.icono:hover{border-color:var(--line-2); color:var(--oro-claro); background:rgba(255,255,255,.03)}
.icono.peligro:hover{color:var(--rojo)}
.icono svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pastilla{display:inline-block; padding:1px 9px; border-radius:20px; font-size:.82rem; background:rgba(95,210,155,.12); color:var(--verde); border:1px solid rgba(95,210,155,.3)}
.pastilla.no{background:transparent; color:var(--ink-3); border-color:var(--line-2)}

.rejilla-firmas{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.firma-tarjeta{display:flex; flex-direction:column; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--metal-azul); box-shadow:var(--sombra)}
.firma-papel{background:#F6F1E4; height:120px; display:grid; place-items:center; padding:12px}
.firma-papel img{max-height:96px; max-width:88%; object-fit:contain}
.firma-datos{padding:14px 16px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.firma-datos strong{display:block; font-size:1.1rem}
.firma-datos span{color:var(--ink-3); font-style:italic; font-size:.95rem}
.firma-datos .falta{color:var(--oro)}

.columnas-ajustes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:start}
.tarjeta{background:var(--metal-azul); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--sombra),var(--brillo)}
.tarjeta .boton{align-self:flex-start}

/* ---------- diálogos ---------- */
.dialogo{border:1px solid var(--line-2); border-radius:18px; padding:0; background:#0C1834; color:var(--ink); width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 32px); box-shadow:0 40px 90px -30px #000}
.dialogo-ancho{width:min(1120px, calc(100vw - 32px))}
.dialogo-chico{width:min(440px, calc(100vw - 32px))}
.dialogo::backdrop{background:rgba(3,7,18,.72); backdrop-filter:blur(3px)}
.dialogo-cuerpo{display:flex; flex-direction:column; gap:16px; padding:22px 24px 20px}
.dialogo-cabeza{display:flex; justify-content:space-between; align-items:center; gap:12px}
.cerrar{background:none; border:0; font-size:2rem; line-height:1; color:var(--ink-3); cursor:pointer; padding:0 4px}
.cerrar:hover{color:var(--ink)}
.dialogo-pie{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding-top:6px}
.fila-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.curso-editor{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; align-items:start}
.curso-campos{display:flex; flex-direction:column; gap:12px}
.curso-vista{position:sticky; top:0}
.lista-elegir{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; margin-top:8px}
.elegible{position:relative; display:flex; flex-direction:column; gap:4px; padding:8px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-3); cursor:pointer}
.elegible input{position:absolute; opacity:0}
.elegible .papel{background:#F6F1E4; border-radius:6px; height:48px; display:grid; place-items:center}
.elegible .papel img{max-height:40px; max-width:90%}
.elegible strong{font-size:.95rem; line-height:1.2}
.elegible small{color:var(--ink-3); font-style:italic; line-height:1.2}
.elegible:has(input:checked){border-color:var(--oro); box-shadow:0 0 0 1px var(--oro)}
.elegible:has(input:focus-visible){outline:2px solid var(--oro-claro); outline-offset:2px}
.elegible .orden{position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:var(--metal-oro); color:var(--oro-tinta); font-weight:700; font-size:.8rem; display:grid; place-items:center}

.zona-archivo{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:22px; border:1.5px dashed rgba(224,195,119,.5); border-radius:14px; background:rgba(224,195,119,.04); cursor:pointer; color:var(--ink-2)}
.zona-archivo:hover,.zona-archivo.encima{background:rgba(224,195,119,.1); border-color:var(--oro)}
.zona-archivo svg{width:30px; height:30px; fill:none; stroke:var(--oro); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.zona-archivo strong{color:var(--ink)}
.zona-archivo span{font-size:.92rem; color:var(--ink-3)}
.zona-firma img{background:#F6F1E4; border-radius:8px; max-height:110px; padding:8px; margin-bottom:6px}

/* ---------- avisos y progreso ---------- */
.avisos{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:50; width:min(480px, calc(100vw - 32px))}
.aviso{background:#13244A; border:1px solid var(--line-2); border-left:4px solid var(--oro); padding:12px 16px; border-radius:10px; box-shadow:var(--sombra); animation:aparecer .25s ease both}
.aviso.error{border-left-color:var(--rojo)}
.progreso{position:fixed; inset:0; background:rgba(3,7,18,.72); display:grid; place-items:center; z-index:60}
.progreso-caja{background:#0C1834; border:1px solid var(--line-2); border-radius:16px; padding:26px 34px; display:flex; flex-direction:column; align-items:center; gap:14px}
.giro{width:38px; height:38px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--oro); animation:girar 0.9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.lista-logos{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.logo-mini{position:relative; width:110px; height:64px; border-radius:8px; border:1px solid var(--line-2); background:repeating-conic-gradient(#EDEAE3 0 25%, #FFFFFF 0 50%) 0 0/14px 14px; display:grid; place-items:center; padding:6px}
.logo-mini img{max-width:100%; max-height:100%; object-fit:contain}
.logo-mini button{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); background:#0C1834; color:var(--rojo); cursor:pointer; font-size:15px; line-height:1}
.boton-chico{min-height:36px; padding:.35rem .9rem; font-size:.92rem}
.a-mano{font-style:italic; color:#6B6F78; font-size:.85rem; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.a-mano i{display:block; width:70%; min-width:90px; border-bottom:1px solid #A8862F; height:28px}
.demo-cinta{position:sticky; top:0; z-index:40; margin-inline:-16px; padding:8px 16px; text-align:center; font-size:.92rem; background:linear-gradient(90deg,#3A2E0E,#5A4715,#3A2E0E); color:var(--oro-claro); border-bottom:1px solid var(--oro-hondo)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .curso-editor{grid-template-columns:1fr}
  .curso-vista{position:static; order:-1}
}
@media (max-width:720px){
  body{font-size:16px}
  .opciones{grid-template-columns:1fr}
  .opcion{padding:18px}
  .opcion-texto strong{font-size:1.18rem}
  .barra-admin .pestanas{order:3; width:100%; justify-content:space-between}
  .pestana{flex:1; padding:8px 6px}
  .fila-2{grid-template-columns:1fr}
  .cifras{width:100%}
  .cifra{flex:1; min-width:0}
  .resultado-acciones{width:100%}
  .resultado-acciones .boton{flex:1 1 200px}
  .marca .marca-letras{display:none}
  .dialogo-cuerpo{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none!important; transition:none!important} .chispa,.brillo::after{display:none}}
.dialogo .lienzo-marco{max-width:calc((100vh - 230px) * 279.4 / 215.9); width:100%; margin-inline:auto}
.curso-vista .lienzo-marco{max-width:none}

/* ---------- roles y vista previa ---------- */
.vista-cabeza{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.vista-cabeza .sobretitulo{margin:0}
.conmutador{display:flex; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
.conm{background:none; border:0; border-radius:8px; padding:5px 12px; color:var(--ink-2); cursor:pointer; font-weight:700; font-size:.92rem}
.conm[aria-pressed="true"]{background:var(--metal-oro); color:var(--oro-tinta)}
.conm:focus-visible{outline:2px solid var(--oro-claro); outline-offset:2px}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.rol-opcion{position:relative; display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface-3); cursor:pointer}
.rol-opcion input{position:absolute; opacity:0}
.rol-opcion:has(input:checked){border-color:var(--oro); box-shadow:0 0 0 1px var(--oro)}
.rol-opcion:has(input:focus-visible){outline:2px solid var(--oro-claro); outline-offset:2px}
.rol-opcion strong{display:block}
.rol-opcion small{color:var(--ink-3)}
.muestra{flex:none; width:46px; height:32px; border-radius:5px; position:relative; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.muestra::before,.muestra::after{content:""; position:absolute; top:-4px; bottom:-4px; width:9px; border-radius:50%; border:2px solid #D9B45E; border-top-color:transparent; border-bottom-color:transparent}
.muestra::before{left:2px; border-right-color:transparent}
.muestra::after{right:2px; border-left-color:transparent}
.muestra-blanca{background:linear-gradient(160deg,#FFFFFF,#E9E7E1)}
.muestra-azul{background:linear-gradient(160deg,#1C3A72,#081634)}
.pastilla.instructor{background:rgba(224,195,119,.14); color:var(--oro-claro); border-color:rgba(224,195,119,.45)}
.pastilla.participante{background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.28)}
@media (max-width:720px){ .roles{grid-template-columns:1fr} .tabla th:nth-child(5),.tabla td:nth-child(5){display:none} }