/* ============================================================
   Sistema de Registro de Asistencia — hoja de estilos principal
   Sin frameworks: todo el diseno vive aqui.
   ============================================================ */

:root {
    --tinta:        #0f172a;
    --tinta-suave:  #475569;
    --tinta-tenue:  #94a3b8;

    --fondo:        #f1f3f7;
    --superficie:   #ffffff;
    --superficie-2: #f8fafc;
    --borde:        #e2e8f0;
    --borde-fuerte: #cbd5e1;

    --acento:       #4f46e5;
    --acento-osc:   #4338ca;
    --acento-claro: #eef2ff;

    --exito:        #15803d;
    --exito-claro:  #dcfce7;
    --alerta:       #b45309;
    --alerta-claro: #fef3c7;
    --peligro:      #b91c1c;
    --peligro-claro:#fee2e2;
    --info:         #0369a1;
    --info-claro:   #e0f2fe;

    --lateral:      #101528;
    --lateral-2:    #1b2136;

    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;

    --sombra-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --sombra:    0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --sombra-lg: 0 24px 60px -20px rgba(15, 23, 42, .3);

    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    --ancho-lateral: 250px;
}

* { box-sizing: border-box; }

/* Los estilos de esta hoja le ganan al [hidden] del navegador, asi que
   cualquier regla con display propio dejaria visible un elemento oculto.
   Un modal invisible pero presente se traga todos los clics de la pagina. */
[hidden] { display: none !important; }

svg {
    flex: 0 0 auto;
    vertical-align: -0.14em;
}

/* Tamano por defecto de los iconos.

   Los SVG que arma icono() no traen width ni height: sin esta regla, uno
   colocado donde no hay un tamano especifico se dibuja al tamano por
   omision de los elementos reemplazados (300x150) y se estira hasta llenar
   su contenedor. Con 1em queda a la medida del texto que lo acompana.

   Dos detalles que hacen que esto no estorbe:
   - :where() no suma especificidad, asi que la regla pesa lo mismo que un
     "svg" pelon y cualquier regla con clase le sigue ganando.
   - :not([width]) deja fuera a los iconos que el JavaScript genera con su
     propia medida; si no, se veian aplastados. */
svg:where(:not([width])) {
    width: 1em;
    height: 1em;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.175rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }
small { font-size: .8125rem; }

code, kbd { font-family: var(--mono); font-size: .875em; }
kbd {
    background: var(--superficie-2);
    border: 1px solid var(--borde-fuerte);
    border-bottom-width: 2px;
    border-radius: var(--r-sm);
    padding: 1px 6px;
    font-size: .75rem;
}

.silencio { color: var(--tinta-suave); }
.tenue    { color: var(--tinta-tenue); }
.mono     { font-family: var(--mono); }
.centro   { text-align: center; }
.derecha  { text-align: right; }
.nowrap   { white-space: nowrap; }
.oculto   { display: none !important; }

/* ============================================================
   Estructura general
   ============================================================ */

.armazon {
    display: flex;
    min-height: 100vh;
}

/* ---------- Barra lateral ---------- */

.lateral {
    width: var(--ancho-lateral);
    flex: 0 0 var(--ancho-lateral);
    background: linear-gradient(178deg, var(--lateral) 0%, var(--lateral-2) 100%);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.lateral__marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #fff;
}

.lateral__marca:hover { text-decoration: none; }

.lateral__logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .8);
}

.lateral__logo svg { width: 19px; height: 19px; }

.lateral__titulo {
    font-weight: 650;
    font-size: .95rem;
    line-height: 1.15;
}

.lateral__sub {
    font-size: .7rem;
    color: #8b93ad;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lateral__nav {
    flex: 1;
    overflow-y: auto;
    padding: .9rem .7rem 1.5rem;
}

.lateral__grupo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #6b7490;
    padding: 1rem .6rem .4rem;
    font-weight: 600;
}

.lateral__enlace {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: var(--r-sm);
    color: #c3cad9;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 1px;
    transition: background .12s, color .12s;
}

.lateral__enlace:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    text-decoration: none;
}

.lateral__enlace.activo {
    background: rgba(99, 102, 241, .18);
    color: #fff;
    box-shadow: inset 2px 0 0 #818cf8;
}

.lateral__enlace svg { width: 17px; height: 17px; opacity: .85; flex: 0 0 17px; }

.lateral__pie {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: .8rem;
}

.lateral__usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b4260;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 650;
    flex: 0 0 32px;
}

.lateral__usuario-datos { min-width: 0; flex: 1; }
.lateral__usuario-nombre {
    font-size: .82rem;
    color: #fff;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lateral__usuario-rol { font-size: .7rem; color: #7d859e; }

.lateral__salir {
    background: none;
    border: 0;
    color: #7d859e;
    cursor: pointer;
    padding: 5px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
}
.lateral__salir:hover { color: #fda4af; background: rgba(255, 255, 255, .06); }
.lateral__salir svg { width: 17px; height: 17px; }

/* ---------- Zona de contenido ---------- */

.principal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.barra-sup {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    padding: .85rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra-sup__titulo { flex: 1; min-width: 0; }
.barra-sup__titulo h1 { margin: 0; font-size: 1.2rem; }
.barra-sup__titulo p  { margin: .1rem 0 0; font-size: .82rem; color: var(--tinta-suave); }

.barra-sup__acciones { display: flex; gap: .5rem; align-items: center; }

.menu-movil {
    display: none;
    background: none;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    cursor: pointer;
}
.menu-movil svg { width: 18px; height: 18px; display: block; }

.contenido {
    padding: 1.5rem 1.6rem 3rem;
    flex: 1;
    max-width: 1400px;
    width: 100%;
}

/* ============================================================
   Tarjetas
   ============================================================ */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    box-shadow: var(--sombra-sm);
    margin-bottom: 1.15rem;
}

.tarjeta__cabecera {
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.tarjeta__cabecera h2, .tarjeta__cabecera h3 { margin: 0; flex: 1; }
.tarjeta__cuerpo { padding: 1.15rem; }
.tarjeta__cuerpo--apretado { padding: 0; }
.tarjeta__pie {
    padding: .8rem 1.15rem;
    border-top: 1px solid var(--borde);
    background: var(--superficie-2);
    border-radius: 0 0 var(--r) var(--r);
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ---------- Cuadricula de indicadores ---------- */

.rejilla-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.kpi {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    box-shadow: var(--sombra-sm);
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.kpi__icono {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--acento-claro);
    color: var(--acento);
    flex: 0 0 38px;
}
.kpi__icono svg { width: 19px; height: 19px; }
.kpi__icono--exito   { background: var(--exito-claro);   color: var(--exito); }
.kpi__icono--alerta  { background: var(--alerta-claro);  color: var(--alerta); }
.kpi__icono--info    { background: var(--info-claro);    color: var(--info); }
.kpi__icono--peligro { background: var(--peligro-claro); color: var(--peligro); }

.kpi__valor { font-size: 1.65rem; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.kpi__etiqueta { font-size: .8rem; color: var(--tinta-suave); }

/* ============================================================
   Tablas
   ============================================================ */

.tabla-envoltura { overflow-x: auto; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .885rem;
}

.tabla th {
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    background: var(--superficie-2);
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla__principal { font-weight: 550; }
.tabla__acciones { width: 1%; white-space: nowrap; text-align: right; }

/* ============================================================
   Botones
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    padding: .5rem .9rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .06s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--principal { background: var(--acento); color: #fff; }
.btn--principal:hover { background: var(--acento-osc); color: #fff; }

.btn--borde { border-color: var(--borde-fuerte); color: var(--tinta-suave); }
.btn--borde:hover { background: var(--superficie-2); color: var(--tinta); border-color: var(--tinta-tenue); }

.btn--peligro { background: var(--peligro); color: #fff; }
.btn--peligro:hover { background: #991b1b; color: #fff; }

.btn--peligro-suave { color: var(--peligro); border-color: #fecaca; background: #fff; }
.btn--peligro-suave:hover { background: var(--peligro-claro); }

.btn--exito { background: var(--exito); color: #fff; }
.btn--exito:hover { background: #166534; color: #fff; }

.btn--plano { background: transparent; color: var(--tinta-suave); }
.btn--plano:hover { background: var(--superficie-2); color: var(--tinta); }

.btn--sm { padding: .3rem .6rem; font-size: .8rem; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { padding: .7rem 1.4rem; font-size: .95rem; }
.btn--bloque { width: 100%; }
.btn--icono { padding: .38rem; }
.btn--icono svg { width: 16px; height: 16px; }

.grupo-btn { display: inline-flex; gap: .4rem; align-items: center; }

/* ============================================================
   Formularios
   ============================================================ */

.campo { margin-bottom: 1rem; }

/* La etiqueta de un campo normal.
   Se excluyen los interruptores y las casillas: esos labels se acomodan
   con flexbox, y este "display: block" les gana por especificidad y les
   aplasta la pista del apagador hasta dejarla en cero. */
.campo > label:not(.interruptor):not(.casilla),
.etiqueta {
    display: block;
    font-size: .82rem;
    font-weight: 550;
    margin-bottom: .3rem;
    color: var(--tinta);
}

.requerido-marca { color: var(--peligro); margin-left: 2px; }

.entrada, .selector, .area,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"],
select, textarea {
    width: 100%;
    font: inherit;
    font-size: .9rem;
    padding: .5rem .7rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--tinta);
    transition: border-color .12s, box-shadow .12s;
}

textarea, .area { min-height: 90px; resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

input[type="color"] {
    padding: 2px;
    height: 38px;
    cursor: pointer;
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--superficie-2);
    color: var(--tinta-suave);
    cursor: not-allowed;
}

.campo__ayuda { font-size: .78rem; color: var(--tinta-suave); margin-top: .25rem; }
.campo__error { font-size: .78rem; color: var(--peligro); margin-top: .25rem; font-weight: 500; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--peligro); }

.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.fila--2 { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.fila--3 { grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }

.casilla {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    cursor: pointer;
    padding: .2rem 0;
}
.casilla input[type="checkbox"], .casilla input[type="radio"] {
    width: 17px; height: 17px;
    margin: 2px 0 0;
    accent-color: var(--acento);
    flex: 0 0 17px;
    cursor: pointer;
}
.casilla span { flex: 1; }
.casilla__nota { display: block; font-size: .78rem; color: var(--tinta-suave); }

.interruptor {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 0; cursor: pointer; font-size: .88rem;
}
.interruptor input { display: none; }
.interruptor__pista {
    width: 38px; height: 21px; border-radius: 999px;
    background: var(--borde-fuerte); position: relative;
    transition: background .16s; flex: 0 0 38px;
}
.interruptor__pista::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; transition: transform .16s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.interruptor input:checked + .interruptor__pista { background: var(--acento); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(17px); }

/* ============================================================
   Distintivos y avisos
   ============================================================ */

.distintivo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .73rem;
    font-weight: 600;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--tinta-suave);
    border: 1px solid var(--borde);
    white-space: nowrap;
    letter-spacing: .01em;
}
.distintivo--exito   { background: var(--exito-claro);   color: var(--exito);   border-color: #bbf7d0; }
.distintivo--alerta  { background: var(--alerta-claro);  color: var(--alerta);  border-color: #fde68a; }
.distintivo--peligro { background: var(--peligro-claro); color: var(--peligro); border-color: #fecaca; }
.distintivo--info    { background: var(--info-claro);    color: var(--info);    border-color: #bae6fd; }
.distintivo--acento  { background: var(--acento-claro);  color: var(--acento);  border-color: #c7d2fe; }
.distintivo__punto   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.aviso {
    display: flex;
    gap: .7rem;
    padding: .8rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    background: var(--superficie);
    font-size: .875rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}
.aviso svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso--exito   { background: var(--exito-claro);   border-color: #bbf7d0; color: #14532d; }
.aviso--error   { background: var(--peligro-claro); border-color: #fecaca; color: #7f1d1d; }
.aviso--alerta  { background: var(--alerta-claro);  border-color: #fde68a; color: #78350f; }
.aviso--info    { background: var(--info-claro);    border-color: #bae6fd; color: #0c4a6e; }

/* ---------- Estado vacio ---------- */

.vacio {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--tinta-suave);
}
.vacio__icono {
    width: 52px; height: 52px;
    margin: 0 auto 1rem;
    border-radius: 14px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    display: grid; place-items: center;
    color: var(--tinta-tenue);
}
.vacio__icono svg { width: 24px; height: 24px; }
.vacio h3 { color: var(--tinta); }
.vacio p { max-width: 420px; margin: 0 auto 1.2rem; font-size: .9rem; }

/* ============================================================
   Utilidades de disposicion
   ============================================================ */

.entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.linea { display: flex; align-items: center; gap: .5rem; }
.apilado { display: flex; flex-direction: column; gap: .25rem; }
.envolver { flex-wrap: wrap; }
.crecer { flex: 1; min-width: 0; }

.mt-0 { margin-top: 0; }  .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }  .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }   .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }

.barra-herramientas {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.barra-herramientas .buscador { flex: 1; min-width: 200px; max-width: 380px; }

.buscador { position: relative; }
.buscador input { padding-left: 2.1rem; }
.buscador svg {
    position: absolute; left: .65rem; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--tinta-tenue);
    pointer-events: none;
}

/* ---------- Paginacion ---------- */

.paginacion {
    display: flex;
    gap: .3rem;
    align-items: center;
    justify-content: center;
    padding: .9rem;
    flex-wrap: wrap;
}
.paginacion a, .paginacion span {
    min-width: 32px;
    height: 32px;
    padding: 0 .55rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .84rem;
    color: var(--tinta-suave);
    background: #fff;
}
.paginacion a:hover { background: var(--superficie-2); text-decoration: none; color: var(--tinta); }
.paginacion .actual { background: var(--acento); color: #fff; border-color: var(--acento); font-weight: 600; }
.paginacion .inerte { opacity: .45; }

/* ============================================================
   Pantalla de acceso
   ============================================================ */

.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 520px at 12% -8%, #1e293b 0%, transparent 62%),
        radial-gradient(900px 480px at 92% 108%, #312e81 0%, transparent 58%),
        #0b1020;
}

.acceso__caja {
    width: 100%;
    max-width: 400px;
}

.acceso__marca {
    text-align: center;
    margin-bottom: 1.4rem;
    color: #fff;
}
.acceso__logo {
    width: 52px; height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: grid; place-items: center;
    margin: 0 auto .8rem;
    box-shadow: 0 12px 34px -10px rgba(99, 102, 241, .95);
}
.acceso__logo svg { width: 27px; height: 27px; }
.acceso__marca h1 { font-size: 1.3rem; margin: 0; color: #fff; }
.acceso__marca p { color: #94a3b8; font-size: .87rem; margin: .2rem 0 0; }

.acceso__tarjeta {
    background: var(--superficie);
    border-radius: var(--r-lg);
    padding: 1.7rem;
    box-shadow: var(--sombra-lg);
}

.acceso__pie {
    text-align: center;
    margin-top: 1.2rem;
    color: #64748b;
    font-size: .78rem;
}

/* ============================================================
   Formulario publico (el que llena el asistente)
   ============================================================ */

.publico {
    min-height: 100vh;
    background: var(--fondo);
    padding: 2rem 1rem 4rem;
}

.publico__caja { max-width: 680px; margin: 0 auto; }

.publico__cabecera {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-top: 7px solid var(--color-forma, var(--acento));
    border-radius: var(--r-lg);
    padding: 1.6rem 1.7rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-sm);
}
.publico__cabecera h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.publico__cabecera p  { color: var(--tinta-suave); margin: 0; white-space: pre-line; }

.publico__meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--borde);
    font-size: .85rem; color: var(--tinta-suave);
}
.publico__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.publico__meta svg { width: 15px; height: 15px; color: var(--tinta-tenue); }

.publico__campo {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    padding: 1.15rem 1.4rem;
    margin-bottom: .8rem;
    box-shadow: var(--sombra-sm);
}
.publico__campo--error { border-color: var(--peligro); border-left: 4px solid var(--peligro); }

.publico__pregunta { font-size: 1rem; font-weight: 550; margin-bottom: .15rem; }
.publico__ayuda { font-size: .84rem; color: var(--tinta-suave); margin-bottom: .7rem; }

.publico__opciones { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; }

.publico__seccion {
    padding: 1.3rem 1.4rem .9rem;
    border-left: 4px solid var(--color-forma, var(--acento));
}
.publico__seccion h2 { margin-bottom: .2rem; }

.publico__enviar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap;
}

.publico__pie { text-align: center; margin-top: 2rem; font-size: .78rem; color: var(--tinta-tenue); }

/* ---------- Confirmacion con QR ---------- */

.confirma {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 2.2rem;
    text-align: center;
    box-shadow: var(--sombra);
}
.confirma__paloma {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--exito-claro);
    color: var(--exito);
    display: grid; place-items: center;
    margin: 0 auto 1.1rem;
}
.confirma__paloma svg { width: 31px; height: 31px; }
.confirma__folio {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .06em;
    background: var(--superficie-2);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-sm);
    padding: .55rem 1rem;
    display: inline-block;
    margin: .3rem 0 1.2rem;
}
.confirma__qr {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--r);
    padding: .9rem;
    display: inline-block;
    box-shadow: var(--sombra-sm);
}
.confirma__qr img { display: block; width: 230px; height: 230px; }

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 900px) {
    .lateral {
        position: fixed;
        left: 0; top: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-lg);
    }
    .lateral.abierta { transform: translateX(0); }
    .menu-movil { display: block; }
    .velo {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 55;
    }
    .contenido { padding: 1.1rem 1rem 3rem; }
    .barra-sup { padding: .75rem 1rem; }
    .fila--2, .fila--3 { grid-template-columns: 1fr; }
}

@media print {
    .lateral, .barra-sup, .btn, .barra-herramientas { display: none !important; }
    body { background: #fff; }
    .contenido { padding: 0; }
    .tarjeta { border: 0; box-shadow: none; }
}

/* ============================================================
   Panel: cuadricula, barras de avance y grafica
   ============================================================ */

.rejilla-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}

.barra-avance {
    height: 6px;
    border-radius: 999px;
    background: var(--borde);
    overflow: hidden;
    margin-bottom: 3px;
}
.barra-avance span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    transition: width .3s ease;
}
.barra-avance--llena span { background: var(--exito); }

.grafica {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 170px;
    padding-top: .6rem;
}
.grafica__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.grafica__barra {
    background: linear-gradient(180deg, #818cf8, #4f46e5);
    border-radius: 4px 4px 2px 2px;
    position: relative;
    min-height: 3px;
    transition: opacity .12s;
}
.grafica__col:hover .grafica__barra { opacity: .8; }
.grafica__barra span {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    font-size: .66rem;
    font-weight: 650;
    color: var(--tinta-suave);
}
.grafica__pie {
    text-align: center;
    font-size: .66rem;
    color: var(--tinta-tenue);
    padding-top: 5px;
    border-top: 1px solid var(--borde);
    margin-top: 4px;
}

@media (max-width: 1100px) {
    /* minmax(0, 1fr) y no 1fr: una columna "1fr" tiene minimo automatico,
       asi que un contenido ancho (una tabla, un titulo largo) estira la
       rejilla en lugar de encogerse, y la pagina termina con barra
       horizontal en el celular. */
    .rejilla-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ficha de datos (etiqueta / valor) ---------- */

.ficha { margin: 0; font-size: .875rem; }
.ficha dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-tenue);
    font-weight: 600;
    margin-top: .85rem;
}
.ficha dt:first-child { margin-top: 0; }
.ficha dd { margin: .1rem 0 0; }

/* ============================================================
   Listado de formularios (tarjetas)
   ============================================================ */

.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.tarjeta-forma {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-top: 4px solid var(--color-forma, var(--acento));
    border-radius: var(--r);
    padding: 1rem 1.1rem 0.9rem;
    box-shadow: var(--sombra-sm);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .14s, transform .14s;
}
.tarjeta-forma:hover { box-shadow: var(--sombra); transform: translateY(-2px); }

.tarjeta-forma__cima { display: flex; align-items: center; justify-content: space-between; }

.tarjeta-forma__titulo {
    font-weight: 600;
    font-size: 1rem;
    color: var(--tinta);
    line-height: 1.3;
}
.tarjeta-forma__titulo:hover { color: var(--acento); text-decoration: none; }

.tarjeta-forma__curso {
    margin: 0;
    font-size: .82rem;
    color: var(--tinta-suave);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.tarjeta-forma__curso svg { width: 14px; height: 14px; flex: 0 0 14px; }

.tarjeta-forma__cifras {
    display: flex;
    gap: 1.4rem;
    padding: .6rem 0;
    margin-top: auto;
    border-top: 1px solid var(--borde);
}
.tarjeta-forma__cifras strong { display: block; font-size: .95rem; }
.tarjeta-forma__cifras span { font-size: .72rem; color: var(--tinta-tenue); }

.tarjeta-forma__pie {
    display: flex;
    gap: .3rem;
    align-items: center;
    border-top: 1px solid var(--borde);
    padding-top: .6rem;
}

/* ============================================================
   Constructor de formularios
   ============================================================ */

.constructor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1.3rem;
    align-items: start;
}

.constructor__lienzo { min-width: 0; }

.constructor__panel {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding-right: 2px;
}
.constructor__panel .tarjeta { margin-bottom: .9rem; }

/* ---------- Cabecera editable ---------- */

.forma-cabecera {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-top: 8px solid var(--color-forma, var(--acento));
    border-radius: var(--r);
    padding: 1.3rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-sm);
}

.forma-cabecera__titulo,
.forma-cabecera__desc {
    width: 100%;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: .3rem 0;
    background: transparent;
    transition: border-color .12s;
}
.forma-cabecera__titulo {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.015em;
}
.forma-cabecera__desc {
    font-size: .92rem;
    color: var(--tinta-suave);
    min-height: 46px;
    resize: vertical;
}
.forma-cabecera__titulo:hover,
.forma-cabecera__desc:hover { border-bottom-color: var(--borde-fuerte); }
.forma-cabecera__titulo:focus,
.forma-cabecera__desc:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--color-forma, var(--acento));
    border-bottom-width: 2px;
}

/* ---------- Tarjeta de campo ---------- */

.campo-tarjeta {
    display: flex;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    margin-bottom: .7rem;
    box-shadow: var(--sombra-sm);
    cursor: pointer;
    transition: box-shadow .14s, border-color .14s;
    position: relative;
}
.campo-tarjeta:hover { border-color: var(--borde-fuerte); }

.campo-tarjeta.abierta {
    cursor: default;
    box-shadow: var(--sombra);
    border-color: var(--borde-fuerte);
    border-left: 5px solid var(--color-forma, var(--acento));
}

.campo-tarjeta--seccion { background: var(--superficie-2); }

.campo-tarjeta.arrastrando { opacity: .4; }
.campo-tarjeta.sobre-arriba { box-shadow: 0 -3px 0 var(--acento); }
.campo-tarjeta.sobre-abajo  { box-shadow: 0 3px 0 var(--acento); }

.campo-tarjeta__agarre {
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: var(--tinta-tenue);
    cursor: grab;
    border-radius: var(--r) 0 0 var(--r);
    opacity: 0;
    transition: opacity .12s, background .12s;
}
.campo-tarjeta:hover .campo-tarjeta__agarre,
.campo-tarjeta.abierta .campo-tarjeta__agarre { opacity: 1; }
.campo-tarjeta__agarre:hover { background: var(--superficie-2); color: var(--tinta-suave); }
.campo-tarjeta__agarre:active { cursor: grabbing; }

.campo-tarjeta__cuerpo { flex: 1; min-width: 0; padding: .9rem 1.1rem 1rem 0; }

.campo-tarjeta__encabezado {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.campo-tarjeta__etiqueta {
    flex: 1;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: .2rem 0;
    font-size: 1rem;
    font-weight: 550;
    background: transparent;
}
.campo-tarjeta__etiqueta:hover { border-bottom-color: var(--borde); }
.campo-tarjeta__etiqueta:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--color-forma, var(--acento));
}

.campo-tarjeta--seccion .campo-tarjeta__etiqueta { font-size: 1.1rem; font-weight: 650; }

.campo-tarjeta__tipo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--tinta-tenue);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: .15rem .55rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
@media (max-width: 700px) { .campo-tarjeta__tipo span { display: none; } }

.campo-tarjeta__ayuda { font-size: .8rem; color: var(--tinta-suave); margin-top: .2rem; }

.campo-tarjeta__previa { margin-top: .7rem; max-width: 440px; }
.campo-tarjeta__previa .previa {
    background: var(--superficie-2);
    border-style: dashed;
    color: var(--tinta-tenue);
    pointer-events: none;
}
.previa-opciones { display: flex; flex-direction: column; gap: .1rem; }
.previa-opciones .casilla { pointer-events: none; color: var(--tinta-suave); }
.previa-vacia {
    font-size: .8rem;
    color: var(--alerta);
    background: var(--alerta-claro);
    border-radius: var(--r-sm);
    padding: .35rem .6rem;
    display: inline-block;
}

/* ---------- Editor desplegado ---------- */

.campo-tarjeta__editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
}

.campo-tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--borde);
    flex-wrap: wrap;
}

.opciones-editor { display: flex; flex-direction: column; gap: .3rem; }

.opcion-fila { display: flex; align-items: center; gap: .5rem; }
.opcion-fila__marca {
    width: 15px; height: 15px;
    border: 2px solid var(--borde-fuerte);
    border-radius: 50%;
    flex: 0 0 15px;
}
.opcion-fila input { flex: 1; }

/* ---------- Menu para agregar campos ---------- */

.agregar-campo {
    background: var(--superficie);
    border: 2px dashed var(--borde-fuerte);
    border-radius: var(--r);
    padding: 1rem 1.2rem 1.2rem;
    margin-top: 1.2rem;
}

.agregar-campo__titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinta-suave);
    margin-bottom: .8rem;
}
.agregar-campo__titulo svg { width: 16px; height: 16px; }

.agregar-campo__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .4rem;
}

.agregar-campo__grupo {
    grid-column: 1 / -1;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-tenue);
    font-weight: 600;
    margin-top: .5rem;
}
.agregar-campo__grupo:first-child { margin-top: 0; }

.tipo-boton {
    display: flex;
    align-items: center;
    gap: .5rem;
    font: inherit;
    font-size: .84rem;
    text-align: left;
    padding: .5rem .65rem;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--tinta-suave);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.tipo-boton:hover {
    border-color: var(--acento);
    background: var(--acento-claro);
    color: var(--acento);
}
.tipo-boton svg { flex: 0 0 16px; }

/* ---------- Indicador de guardado ---------- */

.guardado {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--tinta);
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    padding: .5rem .9rem;
    border-radius: 999px;
    box-shadow: var(--sombra-lg);
}
.guardado__punto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex: 0 0 8px;
}
.guardado--trabajando .guardado__punto { background: #fbbf24; animation: latido 1s infinite; }
.guardado--listo      .guardado__punto { background: #4ade80; }
.guardado--pendiente  .guardado__punto { background: #94a3b8; }
.guardado--error      { background: var(--peligro); }
.guardado--error .guardado__punto { background: #fff; }

@keyframes latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

/* ---------- Enlace copiable ---------- */

.enlace-copiable {
    display: flex;
    align-items: stretch;
    gap: .3rem;
}
.enlace-copiable input {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: .78rem;
}
.enlace-copiable__prefijo {
    display: grid;
    place-items: center;
    padding: 0 .5rem;
    background: var(--superficie-2);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--tinta-tenue);
}

.separador { border: 0; border-top: 1px solid var(--borde); margin: 1.1rem 0; }

@media (max-width: 1000px) {
    .constructor { grid-template-columns: minmax(0, 1fr); }
    .constructor__panel { position: static; max-height: none; }
}

/* ---------- Renglon de sesion (confirmacion publica) ---------- */

.sesion-linea {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .7rem 0;
    border-bottom: 1px solid var(--borde);
}
.sesion-linea:last-child { border-bottom: 0; }

.sesion-linea__fecha {
    flex: 0 0 46px;
    text-align: center;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: .3rem 0;
}
.sesion-linea__fecha strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.sesion-linea__fecha span {
    display: block;
    font-size: .62rem;
    letter-spacing: .06em;
    color: var(--tinta-tenue);
    font-weight: 600;
}
.sesion-linea svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ============================================================
   Eleccion de sesion para pasar lista
   ============================================================ */

.titulo-seccion {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    color: var(--tinta-suave);
    margin-bottom: .8rem;
}
.titulo-seccion svg { width: 17px; height: 17px; color: var(--tinta-tenue); }

.rejilla-sesiones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .9rem;
}

.sesion-tarjeta {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    padding: .95rem 1.1rem 1rem;
    box-shadow: var(--sombra-sm);
    color: var(--tinta);
    transition: border-color .14s, box-shadow .14s, transform .14s;
}
.sesion-tarjeta:hover {
    text-decoration: none;
    border-color: var(--acento);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}

.sesion-tarjeta--hoy { border-left: 4px solid var(--exito); }

.sesion-tarjeta__cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.sesion-tarjeta__clave {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--tinta-tenue);
    letter-spacing: .04em;
}

.sesion-tarjeta__nombre { font-weight: 600; font-size: 1.02rem; }
.sesion-tarjeta__curso { font-size: .84rem; color: var(--tinta-suave); margin-bottom: .5rem; }

.sesion-tarjeta__datos {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-bottom: .7rem;
}
.sesion-tarjeta__datos span { display: inline-flex; align-items: center; gap: .25rem; }
.sesion-tarjeta__datos svg { width: 13px; height: 13px; color: var(--tinta-tenue); }

.sesion-tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-top: .5rem;
}
.sesion-tarjeta__ir {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--acento);
    font-weight: 550;
}
.sesion-tarjeta__ir svg { width: 14px; height: 14px; }

/* ============================================================
   Pantalla de escaneo
   ============================================================ */

.cuerpo-limpio {
    background: #0b1020;
    color: #e2e8f0;
    min-height: 100vh;
}

.escaner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "barra barra"
        "cuerpo recientes";
    min-height: 100vh;
}

/* ---------- Barra superior ---------- */

.escaner__barra {
    grid-area: barra;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .8rem 1.4rem;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.escaner__volver {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
    font-size: .87rem;
    padding: .35rem .6rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, .1);
}
.escaner__volver:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.escaner__volver svg { width: 15px; height: 15px; }

.escaner__titulo { flex: 1; min-width: 0; }
.escaner__sesion { font-size: 1.05rem; font-weight: 600; color: #fff; }
.escaner__curso {
    font-size: .82rem;
    color: #8b93ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.escaner__contador { text-align: right; }
.escaner__contador-num { font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; }
.escaner__contador-de { font-size: 1rem; color: #64748b; font-weight: 500; }
.escaner__contador-txt {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #64748b;
}

.escaner__reloj {
    font-family: var(--mono);
    font-size: 1.35rem;
    color: #cbd5e1;
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

/* ---------- Panel de estado ---------- */

.escaner__cuerpo {
    grid-area: cuerpo;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.escaner__estado {
    text-align: center;
    max-width: 640px;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: 22px;
    border: 2px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    transition: background .18s, border-color .18s;
}

.escaner__icono {
    width: 108px;
    height: 108px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    color: #94a3b8;
}
.escaner__icono svg { width: 54px; height: 54px; }

.escaner__mensaje {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.15;
}

.escaner__persona {
    font-size: 1.25rem;
    margin: 0;
    color: #cbd5e1;
    font-weight: 500;
    word-break: break-word;
}

.escaner__detalle {
    font-size: .95rem;
    margin: .6rem 0 0;
    color: #8b93ad;
}

/* Colores por resultado */
.escaner__estado[data-estado="ok"] {
    background: rgba(34, 197, 94, .13);
    border-color: rgba(34, 197, 94, .6);
}
.escaner__estado[data-estado="ok"] .escaner__icono { background: rgba(34, 197, 94, .22); color: #4ade80; }

.escaner__estado[data-estado="retardo"] {
    background: rgba(245, 158, 11, .13);
    border-color: rgba(245, 158, 11, .6);
}
.escaner__estado[data-estado="retardo"] .escaner__icono { background: rgba(245, 158, 11, .22); color: #fbbf24; }

/* La salida se pinta morada: verde es entrada, y hay que poder
   distinguirlas de un vistazo desde lejos en la puerta. */
.escaner__estado[data-estado="salida"] {
    background: rgba(168, 85, 247, .14);
    border-color: rgba(168, 85, 247, .6);
}
.escaner__estado[data-estado="salida"] .escaner__icono { background: rgba(168, 85, 247, .22); color: #c084fc; }

.escaner__estado[data-estado="repetido"] {
    background: rgba(56, 189, 248, .12);
    border-color: rgba(56, 189, 248, .55);
}
.escaner__estado[data-estado="repetido"] .escaner__icono { background: rgba(56, 189, 248, .2); color: #38bdf8; }

.escaner__estado[data-estado="otro_curso"] {
    background: rgba(249, 115, 22, .13);
    border-color: rgba(249, 115, 22, .6);
}
.escaner__estado[data-estado="otro_curso"] .escaner__icono { background: rgba(249, 115, 22, .22); color: #fb923c; }

.escaner__estado[data-estado="desconocido"],
.escaner__estado[data-estado="cancelado"],
.escaner__estado[data-estado="error"] {
    background: rgba(239, 68, 68, .13);
    border-color: rgba(239, 68, 68, .6);
}
.escaner__estado[data-estado="desconocido"] .escaner__icono,
.escaner__estado[data-estado="cancelado"] .escaner__icono,
.escaner__estado[data-estado="error"] .escaner__icono {
    background: rgba(239, 68, 68, .22);
    color: #f87171;
}

.escaner__estado--pulso { animation: aparecer .28s ease; }

@keyframes aparecer {
    from { transform: scale(.97); opacity: .4; }
    to   { transform: scale(1);   opacity: 1; }
}

/* El campo del lector: presente pero fuera de la vista. */
.escaner__entrada {
    position: absolute;
    opacity: 0;
    width: 2px;
    height: 2px;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.escaner__aviso-foco {
    margin-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(245, 158, 11, .16);
    border: 1px solid rgba(245, 158, 11, .5);
    color: #fbbf24;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
}
.escaner__aviso-foco svg { width: 16px; height: 16px; }

.escaner__acciones {
    margin-top: 1.8rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.escaner__acciones .btn--borde {
    border-color: rgba(255, 255, 255, .16);
    color: #cbd5e1;
    background: transparent;
}
.escaner__acciones .btn--borde:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.escaner__acciones .btn--plano { color: #8b93ad; }
.escaner__acciones .btn--plano:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.escaner__acciones kbd {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    color: #cbd5e1;
}

/* ---------- Panel de ultimos registros ---------- */

.escaner__recientes {
    grid-area: recientes;
    background: rgba(255, 255, 255, .03);
    border-left: 1px solid rgba(255, 255, 255, .08);
    padding: 1rem 1.1rem;
    overflow-y: auto;
    max-height: calc(100vh - 62px);
}

.escaner__recientes-cima {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: .7rem;
}

.lista-recientes { list-style: none; margin: 0; padding: 0; }

.lista-recientes__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .88rem;
}

.lista-recientes__hora {
    font-family: var(--mono);
    font-size: .78rem;
    color: #64748b;
    flex: 0 0 38px;
}

.lista-recientes__nombre {
    flex: 1;
    min-width: 0;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-recientes__item--nuevo { animation: entrar .3s ease; }

@keyframes entrar {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.escaner__sin-registros { color: #64748b; font-size: .85rem; }

/* ---------- Ventana de busqueda ---------- */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .7);
    display: grid;
    place-items: start center;
    padding: 8vh 1rem 2rem;
    z-index: 100;
}

.modal__caja {
    background: var(--superficie);
    color: var(--tinta);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 540px;
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.modal__cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--borde);
}
.modal__cima h2 { margin: 0; font-size: 1.05rem; }

.modal__cuerpo { padding: 1.1rem 1.2rem 1.3rem; }

.resultados-busqueda { margin-top: .8rem; max-height: 46vh; overflow-y: auto; }

.resultado-fila {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borde);
}
.resultado-fila:last-child { border-bottom: 0; }

/* ---------- Responsivo del escaner ---------- */

@media (max-width: 950px) {
    .escaner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "barra"
            "cuerpo"
            "recientes";
    }
    .escaner__recientes {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        max-height: none;
    }
    .escaner__mensaje { font-size: 1.5rem; }
    .escaner__icono { width: 82px; height: 82px; }
    .escaner__icono svg { width: 40px; height: 40px; }
    .escaner__reloj { display: none; }
}

/* ---------- Matriz de asistencia ---------- */

.tabla-matriz th.matriz__sesion { min-width: 62px; vertical-align: bottom; }
.tabla-matriz th.matriz__sesion span { display: block; }
.tabla-matriz th.matriz__sesion small {
    display: block;
    font-weight: 500;
    color: var(--tinta-tenue);
    text-transform: none;
    letter-spacing: 0;
}
.tabla-matriz .matriz__persona { min-width: 220px; position: sticky; left: 0; background: var(--superficie); }
.tabla-matriz thead .matriz__persona { background: var(--superficie-2); z-index: 1; }
.tabla-matriz tbody tr:hover .matriz__persona { background: var(--superficie-2); }

.marca {
    display: inline-grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
}
.marca svg { width: 14px; height: 14px; }
.marca--presente { background: var(--exito-claro);  color: var(--exito); }
.marca--retardo  { background: var(--alerta-claro); color: var(--alerta); }
.marca--ausente  { background: var(--superficie-2); color: var(--tinta-tenue); border: 1px solid var(--borde); }

.lateral__usuario-liga {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    padding: 4px;
    margin: -4px;
    border-radius: var(--r-sm);
}
.lateral__usuario-liga:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }

/* ---------- Nota de privacidad bajo el formulario publico ---------- */

.publico__enviar small {
    display: inline-flex;
    align-items: flex-start;
    gap: .4rem;
    max-width: 58ch;
    line-height: 1.45;
    color: var(--tinta-suave);
}
.publico__enviar small svg {
    margin-top: .18em;
    color: var(--tinta-tenue);
}

/* El icono del mensaje de error se alinea con el primer renglon. */
.campo__error {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
}
.campo__error svg { margin-top: .15em; }

/* ============================================================
   Correcciones de ancho en pantallas chicas

   Las tarjetas y sus cabeceras viven dentro de rejillas y flexbox.
   Sin un min-width: 0 explicito, su ancho minimo es el del contenido,
   asi que un titulo largo o una tabla empujan el ancho de la pagina
   y aparece la barra de desplazamiento horizontal en el celular.
   ============================================================ */

.tarjeta,
.tarjeta__cuerpo,
.rejilla-panel > *,
.constructor__lienzo,
.constructor__panel { min-width: 0; }

.tarjeta__cabecera { flex-wrap: wrap; min-width: 0; }
.tarjeta__cabecera h2,
.tarjeta__cabecera h3 { min-width: 0; overflow-wrap: anywhere; }

.barra-sup__titulo h1 { overflow-wrap: anywhere; }

/* Nombres y correos muy largos tampoco deben estirar la tabla. */
.tabla td { overflow-wrap: anywhere; }
.tabla .mono { overflow-wrap: anywhere; }

@media (max-width: 620px) {
    /* La barra del pase de lista se acomoda en dos renglones antes
       que salirse de la pantalla. */
    .escaner__barra { flex-wrap: wrap; row-gap: .5rem; }
    .escaner__titulo { order: 3; flex: 1 0 100%; }
    .escaner__contador { margin-left: auto; }

    .barra-sup { flex-wrap: wrap; }
    .barra-sup__acciones { flex-wrap: wrap; }
}

/* ============================================================
   Pase de acceso (ficha del inscrito)

   Se dibuja como un boleto porque eso es: la banda de color del
   formulario arriba, los datos de la persona, el codigo y el folio
   separados por una perforacion. Asi el coordinador reconoce de un
   vistazo lo mismo que le llego por correo al asistente.
   ============================================================ */

.pase {
    --color-pase: var(--acento);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--sombra-sm);
}

.pase__banda {
    height: 6px;
    background: var(--color-pase);
}

.pase__quien {
    padding: 1rem 1.1rem .3rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.pase__etiqueta {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.pase__nombre {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.pase__curso {
    font-size: .82rem;
    color: var(--tinta-suave);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ---------- Codigo ---------- */

.pase__qr {
    position: relative;
    /* fit-content y no inline-block a secas: con el ancho dependiendo del
       contenido, una imagen al 100% se quedaba en cero. Aqui el tamano lo
       fija la imagen, y max-width la encoge si la tarjeta es mas angosta. */
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: .9rem auto .2rem;
    padding: .7rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    line-height: 0;
}

.pase__qr img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.pase__sin-qr {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    text-align: left;
    margin: .9rem 1.1rem .3rem;
    padding: .6rem .7rem;
    background: var(--alerta-claro);
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    font-size: .8rem;
    color: #78350f;
}
.pase__sin-qr svg { margin-top: .15em; }

/* ---------- Perforacion y folio ---------- */

.pase__perforacion {
    position: relative;
    height: 1px;
    margin: 1rem 0 .9rem;
    border-top: 2px dashed var(--borde);
}

/* Las dos muescas laterales del boleto. */
.pase__perforacion::before,
.pase__perforacion::after {
    content: "";
    position: absolute;
    top: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
}
.pase__perforacion::before { left: -9px; }
.pase__perforacion::after  { right: -9px; }

.pase__folio {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--tinta);
    overflow-wrap: anywhere;
    padding: 0 .8rem;
}

.pase__folio-nota {
    font-size: .7rem;
    color: var(--tinta-tenue);
    padding-bottom: 1rem;
}

/* ---------- Pase cancelado ---------- */

.pase--cancelado { opacity: .92; }
.pase--cancelado .pase__banda { background: var(--borde-fuerte); }
.pase--cancelado .pase__qr img { filter: grayscale(1); opacity: .32; }
.pase--cancelado .pase__folio { color: var(--tinta-tenue); text-decoration: line-through; }

.pase__sello {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-13deg);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--peligro);
    border: 3px solid var(--peligro);
    border-radius: 6px;
    padding: .25rem .7rem;
    background: rgba(255, 255, 255, .88);
    line-height: 1.1;
    white-space: nowrap;
}

/* ---------- Pie de tarjeta apilado ---------- */

.tarjeta__pie--apilado {
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
}

/* ---------- Dato tecnico replegado ---------- */

.clave-tecnica {
    margin-top: .3rem;
    border-top: 1px solid var(--borde);
    padding-top: .6rem;
}

.clave-tecnica summary {
    cursor: pointer;
    font-size: .78rem;
    color: var(--tinta-tenue);
    list-style: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
}
.clave-tecnica summary::-webkit-details-marker { display: none; }

.clave-tecnica summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform .14s;
}
.clave-tecnica[open] summary::before { transform: rotate(90deg); }
.clave-tecnica summary:hover { color: var(--tinta-suave); }

.clave-tecnica__valor {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
}

.clave-tecnica__valor code {
    flex: 1;
    min-width: 0;
    font-size: .68rem;
    color: var(--tinta-suave);
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: .3rem .45rem;
    overflow-wrap: anywhere;
}

.clave-tecnica__nota {
    font-size: .72rem;
    color: var(--tinta-tenue);
    margin: .4rem 0 0;
    line-height: 1.45;
}

/* ============================================================
   Pagina de confirmacion del asistente

   Es la pantalla que la gente le toma captura y ensena en la puerta,
   asi que el pase manda: primero el codigo, luego lo demas.
   ============================================================ */

.gracias { display: flex; flex-direction: column; gap: 1rem; }

.gracias__cima { text-align: center; margin-bottom: .2rem; }

.gracias__paloma {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--exito-claro);
    color: var(--exito);
    display: grid;
    place-items: center;
    margin: 0 auto .9rem;
}
.gracias__paloma svg { width: 29px; height: 29px; stroke-width: 2.6; }

.gracias__cima h1 {
    font-size: 1.5rem;
    margin: 0 0 .35rem;
}

.gracias__cima p {
    color: var(--tinta-suave);
    max-width: 44ch;
    margin: 0 auto;
    font-size: .95rem;
    line-height: 1.55;
}

/* ---------- El pase, en grande ---------- */

.pase--grande {
    /* En la pagina publica el color lo pone el formulario. */
    --color-pase: var(--color-forma, var(--acento));
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    box-shadow: var(--sombra);
}
.pase--grande .pase__banda { height: 8px; }
.pase--grande .pase__quien { padding-top: 1.2rem; }
.pase--grande .pase__nombre { font-size: 1.2rem; }
.pase--grande .pase__qr img { width: 260px; }
.pase--grande .pase__folio { font-size: 1.25rem; }

/* En el celular el pase ocupa el ancho disponible. */
@media (max-width: 420px) {
    .pase--grande .pase__qr { padding: .5rem; }
    .pase--grande .pase__qr img { width: 100%; }
}

/* ---------- Acciones ---------- */

.gracias__acciones {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}
.gracias__acciones .btn { flex: 0 1 auto; }
.gracias__principal { background: var(--color-forma, var(--acento)); }
.gracias__principal:hover { filter: brightness(.93); }

.gracias__consejo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: var(--tinta-tenue);
    text-align: center;
}
.gracias__consejo svg { margin-top: .18em; }

/* ---------- Sesiones ---------- */

.gracias__sesiones { margin-bottom: 0; }
.gracias__sesiones .tarjeta__cabecera h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
}
.tarjeta__cuerpo--lista { padding: .3rem 1.15rem; }

.sesion-linea__nombre { font-weight: 600; }

.sesion-linea__dato {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    color: var(--tinta-suave);
    line-height: 1.5;
}
.sesion-linea__dato svg { color: var(--tinta-tenue); }

.gracias__privacidad { margin-bottom: 0; font-size: .84rem; }

/* ============================================================
   Impresion del pase

   Quien le da a Imprimir quiere el codigo en una hoja, no los
   avisos ni los botones.
   ============================================================ */

@media print {
    .publico { padding: 0; background: #fff; }
    .gracias__acciones,
    .gracias__consejo,
    .gracias__privacidad,
    .aviso,
    .publico__pie { display: none !important; }

    .gracias__cima h1 { font-size: 1.2rem; }
    .gracias__paloma { display: none; }

    .pase--grande {
        max-width: 320px;
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
    }

    .gracias__sesiones { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Escaneo con la camara
   ============================================================ */

.modal__caja--camara { max-width: 460px; }

.camara {
    position: relative;
    background: #0b1020;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.camara__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Marco de puntería sobre el video. */
.camara__mira {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(62%, 240px);
    aspect-ratio: 1;
    border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .45);
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: -2px;
    pointer-events: none;
}

.camara__estado {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .55rem .8rem;
    background: linear-gradient(transparent, rgba(2, 6, 23, .85));
    color: #fff;
    font-size: .85rem;
    text-align: center;
}

.camara__aviso { margin-bottom: .6rem; font-size: .85rem; }
.camara__pista { font-size: .84rem; margin: 0; line-height: 1.5; }

/* Parpadeo verde al leer un codigo. */
.modal--destello .camara__mira {
    outline-color: #4ade80;
    outline-width: 4px;
    background: rgba(74, 222, 128, .22);
}

/* ============================================================
   Zona de borrado

   Antes de una accion que no se puede deshacer, se muestra en
   dos columnas exactamente que se conserva y que se pierde.
   ============================================================ */

.zona-peligro { max-width: 820px; }

.tarjeta--peligro { border-color: #fecaca; }
.tarjeta--peligro .tarjeta__cabecera {
    border-bottom-color: #fecaca;
    background: var(--peligro-claro);
    border-radius: var(--r) var(--r) 0 0;
    color: var(--peligro);
}
.tarjeta--peligro .tarjeta__cabecera h2 { color: var(--peligro); font-size: 1.05rem; }

.que-pasa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.que-pasa__bloque {
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: .8rem .9rem;
    background: var(--superficie-2);
}
.que-pasa__bloque--queda { border-color: #bbf7d0; background: #f6fefa; }
.que-pasa__bloque--se-va { border-color: #fecaca; background: #fffafa; }

.que-pasa__titulo {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}
.que-pasa__bloque--queda .que-pasa__titulo { color: var(--exito); }
.que-pasa__bloque--se-va .que-pasa__titulo { color: var(--peligro); }

.que-pasa ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    color: var(--tinta-suave);
    line-height: 1.55;
}
.que-pasa li + li { margin-top: .3rem; }
.que-pasa strong { color: var(--tinta); }

.que-pasa__nota {
    display: block;
    font-size: .78rem;
    color: var(--tinta-tenue);
    line-height: 1.45;
    margin-top: .15rem;
}

.campo--angosto { max-width: 240px; font-family: var(--mono); text-transform: uppercase; }

/* Lista de lo que se pierde al borrar un registro. */
.lista-borrado {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    color: var(--tinta-suave);
    line-height: 1.6;
}
.lista-borrado strong { color: var(--tinta); }

/* ---------- Liga al mapa del lugar ---------- */

.enlace-mapa {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .82rem;
    font-weight: 550;
    color: var(--acento);
    white-space: nowrap;
}
.enlace-mapa:hover { text-decoration: underline; }

/* Instrucciones que se despliegan bajo un campo. */
.ayuda-plegable { margin-top: .35rem; }
.ayuda-plegable summary {
    cursor: pointer;
    color: var(--acento);
    user-select: none;
}
.ayuda-plegable summary:hover { text-decoration: underline; }
.ayuda-plegable ol {
    margin: .4rem 0 .3rem;
    padding-left: 1.2rem;
    line-height: 1.6;
}

/* Escaneo de alguien que no habia elegido esta sesion: se registro,
   pero conviene que el color lo distinga del verde normal. */
.escaner__estado[data-estado="otra_sesion"] {
    background: rgba(56, 189, 248, .13);
    border-color: rgba(56, 189, 248, .6);
}
.escaner__estado[data-estado="otra_sesion"] .escaner__icono {
    background: rgba(56, 189, 248, .22);
    color: #38bdf8;
}

/* ============================================================
   Eleccion de sesiones en el formulario publico
   ============================================================ */

.sesiones-elegibles {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .6rem;
}

.sesion-opcion {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
    background: var(--superficie);
}
.sesion-opcion:hover { border-color: var(--color-forma, var(--acento)); background: var(--superficie-2); }

.sesion-opcion input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--color-forma, var(--acento)); }

.sesion-opcion:has(input:checked) {
    border-color: var(--color-forma, var(--acento));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-forma, #4f46e5) 22%, transparent);
    background: var(--superficie);
}

.sesion-opcion__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sesion-opcion__nombre { font-weight: 600; }
.sesion-opcion__cuando {
    font-size: .83rem;
    color: var(--tinta-suave);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.sesion-opcion__cuando svg { color: var(--tinta-tenue); }

/* ============================================================
   Eleccion de sesiones dentro del constructor

   Vive en el lienzo, arriba de las preguntas, porque para quien
   llena el formulario esta es la primera pregunta. Muestra las
   sesiones tal como las vera, con su ocupacion.
   ============================================================ */

.tarjeta-sesiones {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--borde-fuerte);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    margin-bottom: .9rem;
    box-shadow: var(--sombra-sm);
}
.tarjeta-sesiones--activa { border-left-color: var(--color-forma, var(--acento)); }

.tarjeta-sesiones__cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}

.tarjeta-sesiones__titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 650;
    font-size: 1rem;
}

.tarjeta-sesiones__modo { width: auto; max-width: 100%; font-size: .85rem; }

.tarjeta-sesiones__nota {
    font-size: .83rem;
    color: var(--tinta-suave);
    margin: .7rem 0 0;
    line-height: 1.5;
}

.tarjeta-sesiones__lista {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .7rem;
}

.sesion-previa {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-sm);
    background: var(--superficie-2);
    font-size: .87rem;
}
.sesion-previa--llena { opacity: .55; }
.sesion-previa--llena .sesion-previa__nombre { text-decoration: line-through; }

.sesion-previa__marca { color: var(--tinta-tenue); font-size: 1rem; line-height: 1; }
.sesion-previa__nombre { display: block; font-weight: 600; }
.sesion-previa__cuando { display: block; font-size: .8rem; color: var(--tinta-suave); }

/* ============================================================
   Banda de estado del formulario

   Lo primero que se ve al abrir el constructor: si es borrador,
   si esta en vivo o si ya cerro, y que significa cada cosa.
   ============================================================ */

.banda-estado {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .75rem 1.1rem;
    border-radius: var(--r);
    border: 1px solid var(--borde);
    background: var(--superficie-2);
    margin-bottom: .9rem;
    font-size: .87rem;
    line-height: 1.5;
}

.banda-estado__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    padding: .25rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.banda-estado__texto { flex: 1; min-width: 220px; color: var(--tinta-suave); }
.banda-estado__texto strong { color: var(--tinta); }

.banda-estado--borrador {
    background: var(--alerta-claro);
    border-color: #fde68a;
}
.banda-estado--borrador .banda-estado__chip { background: var(--alerta); color: #fff; }

.banda-estado--publicado {
    background: var(--exito-claro);
    border-color: #bbf7d0;
}
.banda-estado--publicado .banda-estado__chip { background: var(--exito); color: #fff; }

.banda-estado--cerrado .banda-estado__chip { background: var(--tinta-suave); color: #fff; }

.tarjeta__pie--guardar { flex-wrap: wrap; }

/* ---------- Columna para mover preguntas de lugar ---------- */

.campo-tarjeta__mover {
    flex: 0 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    padding-top: .75rem;
    border-radius: var(--r) 0 0 var(--r);
}

.campo-tarjeta__flecha {
    display: grid;
    place-items: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tinta-tenue);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.campo-tarjeta__flecha:hover:not(:disabled) { background: var(--acento-claro); color: var(--acento); }
.campo-tarjeta__flecha:focus-visible { outline: 2px solid var(--acento); outline-offset: -1px; }
.campo-tarjeta__flecha:disabled { opacity: .25; cursor: default; }

/* El agarre ya no se esconde: si no se ve, nadie sabe que se puede mover. */
.campo-tarjeta__agarre {
    display: grid;
    place-items: center;
    width: 24px;
    height: 20px;
    color: var(--borde-fuerte);
    cursor: grab;
    opacity: 1;
    border-radius: var(--r-sm);
}
.campo-tarjeta:hover .campo-tarjeta__agarre { color: var(--tinta-tenue); }
.campo-tarjeta__agarre:hover { background: var(--superficie-2); color: var(--tinta-suave); }
.campo-tarjeta__agarre:active { cursor: grabbing; }

/* Parpadeo para no perder de vista la pregunta que se acaba de mover. */
.campo-tarjeta--movida {
    animation: resaltar .7s ease;
}

@keyframes resaltar {
    0%   { background: var(--acento-claro); }
    100% { background: var(--superficie); }
}

.campo-tarjeta__cuerpo { padding-left: 0; }

/* ---------- Envio del formulario en pantalla chica ----------
   En el celular la nota de privacidad y el boton no caben en un
   renglon: al acomodarse, el boton quedaba pegado a la izquierda.
   Aqui el boton toma todo el ancho —que es lo que se espera de un
   boton principal en un telefono— y la nota queda debajo, centrada. */

@media (max-width: 560px) {
    .publico__enviar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .9rem;
    }
    .publico__enviar .btn {
        width: 100%;
        justify-content: center;
    }
    .publico__enviar small {
        justify-content: center;
        text-align: center;
        align-self: center;
    }
}

/* Campos de clave que se escriben en mayusculas (CCT, RFC, CURP). */
.en-mayusculas,
.previa--mayusculas {
    text-transform: uppercase;
    letter-spacing: .02em;
}
.en-mayusculas::placeholder { text-transform: none; letter-spacing: 0; }

/* Los interruptores del pie de una pregunta, en fila. */
.campo-tarjeta__opciones { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ---------- Pantalla para probar el lector ---------- */

.entrada-prueba {
    font-family: var(--mono);
    font-size: 1.05rem;
    padding: .9rem 1rem;
    border: 2px solid var(--acento);
    background: var(--acento-claro);
}
.entrada-prueba:focus { box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); }

.prueba-resultado {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--borde);
    border-radius: var(--r);
    background: var(--superficie-2);
}
.prueba-resultado__cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.prueba-codigo {
    font-size: .82rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: .3rem .5rem;
    overflow-wrap: anywhere;
    display: inline-block;
}

/* ---------- Filtros de la lista de una sesion ---------- */

.barra-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--borde);
    padding-top: .9rem;
}

.pestanas-filtro {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.pestana-filtro {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto-tenue);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pestana-filtro:hover { background: var(--superficie-2); color: var(--texto); }

.pestana-filtro.es-activa {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}

.pestana-filtro__num {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    padding: .05rem .38rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto-tenue);
}
.pestana-filtro.es-activa .pestana-filtro__num {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.busca-en-linea {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .7rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    min-width: min(100%, 20rem);
    flex: 1 1 14rem;
}
.busca-en-linea:focus-within {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.busca-en-linea svg { color: var(--texto-tenue); }

.busca-en-linea input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: .5rem 0;
    font: inherit;
    color: inherit;
    outline: none;
}
.busca-en-linea input::-webkit-search-cancel-button { display: none; }

.busca-en-linea__limpiar {
    display: inline-flex;
    color: var(--texto-tenue);
    padding: .15rem;
    border-radius: 50%;
}
.busca-en-linea__limpiar:hover { color: var(--peligro); background: var(--superficie-2); }

.barra-avance--gruesa { height: .6rem; }

.fila-ausente .tabla__principal { color: var(--texto-tenue); font-weight: 500; }

@media (max-width: 640px) {
    .barra-filtros { flex-direction: column; align-items: stretch; }
    .pestanas-filtro { justify-content: space-between; }
}

@media print {
    .barra-filtros,
    .tarjeta__pie .grupo-btn,
    .barra-lateral,
    .cabecera { display: none !important; }
}

/* ---------- Bloque de texto para copiar (plantillas de WhatsApp) ---------- */

.bloque-copiable {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .7rem;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    background: var(--superficie-2);
}

.bloque-copiable code {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}

.bloque-copiable .btn { flex: 0 0 auto; }

/* ---------- Avisar por WhatsApp ---------- */

.fila-avisada { background: color-mix(in srgb, var(--exito) 7%, transparent); }
.fila-avisada .tabla__principal { color: var(--texto-tenue); }

.rapido-quien {
    text-align: center;
    padding: 1.4rem 1rem;
    margin: .9rem 0;
    border: 1px solid var(--borde);
    border-radius: var(--r);
    background: var(--superficie-2);
}

.rapido-quien__nombre {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}