/* =====================================================================
   LEDBAR://DISTRIBUTOR — System LED BAR
   Hoja de estilos del portal. Paleta y estética de terminal heredadas del
   demo autónomo: verde fósforo sobre fondo casi negro, líneas de barrido,
   etiquetas en mayúscula con separación de letras y tarjetas de borde fino.
   ===================================================================== */

:root {
    --bg:       #070c09;
    --panel:    #0d1510;
    --panel2:   #111c15;
    --line:     #1c2f22;
    --grn:      #28e07b;
    --grn-dim:  #1a9e57;
    --grn-soft: rgba(40, 224, 123, .08);
    --txt:      #d4e6da;
    --mut:      #6f8a7a;
    --amber:    #ffb347;
    --red:      #ff5c5c;

    --mono: Consolas, "SF Mono", "Fira Mono", "Roboto Mono", ui-monospace, monospace;
    --sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --radio: 3px;
    --z-barrido:  9000;
    --z-marca:    8500;
    --z-escudo:   9500;
    --z-modal:    8000;
    --z-panel:    7000;
    --z-avisos:   9600;
}

/* --- Base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    /* Disuasor: el contenido no se selecciona salvo en los campos de entrada. */
    -webkit-user-select: none;
    user-select: none;
    overflow-x: hidden;
}

/* Mientras el JavaScript no ha arrancado, las pantallas no parpadean. */
body.cargando .pantalla { visibility: hidden; }

input, textarea, select { -webkit-user-select: text; user-select: text; }

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

::selection { background: var(--grn-dim); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radio); }
::-webkit-scrollbar-thumb:hover { background: var(--grn-dim); }

/* --- Líneas de barrido --------------------------------------------- */

.barrido {
    position: fixed;
    inset: 0;
    z-index: var(--z-barrido);
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, .16) 3px,
        rgba(0, 0, 0, 0) 4px
    );
    mix-blend-mode: multiply;
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    .barrido { opacity: .3; }
}

/* --- Marca de agua disuasoria --------------------------------------- */

.marca-agua {
    position: fixed;
    inset: -25%;
    z-index: var(--z-marca);
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 34px 56px;
    transform: rotate(-28deg);
    opacity: .05;
    overflow: hidden;
}

.marca-agua__celda {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--grn);
}

/* --- Escudo por pérdida de foco ------------------------------------- */

.escudo {
    position: fixed;
    inset: 0;
    z-index: var(--z-escudo);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    backdrop-filter: blur(6px);
}

.escudo__caja {
    border: 1px solid var(--line);
    background: var(--panel);
    padding: 32px 40px;
    text-align: center;
    border-radius: var(--radio);
}

.escudo__titulo {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--grn);
}

.escudo__texto { margin: 0; color: var(--mut); font-size: 13px; }

/* --- Impresión bloqueada -------------------------------------------- */

.solo-impresion { display: none; }

@media print {
    body > *:not(.solo-impresion) { display: none !important; }

    .solo-impresion {
        display: block !important;
        color: #000;
        font-family: monospace;
        font-size: 14pt;
        text-align: center;
        padding-top: 4cm;
    }
}

/* --- Marca textual --------------------------------------------------- */

.marca {
    margin: 0;
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--txt);
}

.marca__os { color: var(--grn); }

.marca {
    /* La marca es larga («LEDBAR://DISTRIBUTOR», 20 caracteres) y las tarjetas
       de acceso miden 380px. Sin esto se sale por el borde derecho, que es
       exactamente lo que paso al renombrar el proyecto: el nombre anterior
       tenia 11 caracteres y cabia de sobra. */
    overflow-wrap: anywhere;
}

.marca--grande {
    /* «LEDBAR://DISTRIBUTOR» son 20 caracteres en monoespaciada, y la tarjeta
       de acceso mide 380px. En una sola linea NO CABE: se salia por el borde
       derecho desde que se renombro el proyecto (el nombre anterior tenia 11
       caracteres). En vez de encoger la tipografia hasta que quepa —que la
       dejaria diminuta en un telefono— se parte en dos lineas, que ademas
       separa el prefijo del nombre y se lee mejor. */
    font-size: clamp(20px, 6vw, 26px);
    letter-spacing: 2px;
    line-height: 1.2;
    text-align: center;
}

.marca--grande .marca__os {
    display: block;
    font-size: 0.82em;
    letter-spacing: 3px;
}

.marca__sub {
    margin: 6px 0 26px;
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--mut);
}

.etiqueta {
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mut);
}

/* --- Pantallas ------------------------------------------------------- */

.pantalla { position: relative; z-index: 2; }

.pantalla--centrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 28px 16px;
}

.pantalla--app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Tarjetas -------------------------------------------------------- */

.tarjeta {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 34px 32px;
    box-shadow: 0 0 0 1px rgba(40, 224, 123, .04), 0 22px 60px rgba(0, 0, 0, .55);
}

.tarjeta--acceso { max-width: 380px; }
.tarjeta--otp    { max-width: 440px; }
.tarjeta--nda    { max-width: 860px; }

.tarjeta__cabecera { margin-bottom: 20px; }
.tarjeta__cabecera .etiqueta { margin-top: 6px; }

.tarjeta__saludo {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--txt);
}

.tarjeta__saludo strong { color: var(--grn); }

.pie-legal {
    margin: 22px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--mut);
    text-align: center;
}

/* --- Formularios ----------------------------------------------------- */

.formulario { display: flex; flex-direction: column; gap: 16px; }

.formulario--nda { margin-top: 22px; }

.rejilla-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo__etiqueta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut);
}

/* Misma altura minima que los botones: un campo y su boton uno al lado del
   otro con alturas distintas es lo que hace que un formulario se vea tosco. */
.campo__entrada,
.selector__entrada {
    min-height: 44px;
}

.campo__entrada,
.selector__entrada,
.zona-texto {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    color: var(--txt);
    font-family: var(--mono);
    font-size: 13px;
    padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s;
}

.campo__entrada:focus,
.selector__entrada:focus,
.zona-texto:focus,
.buscador__entrada:focus {
    outline: none;
    border-color: var(--grn-dim);
    box-shadow: 0 0 0 2px var(--grn-soft);
}

.zona-texto { min-height: 150px; resize: vertical; line-height: 1.5; }

/* --- Campo con control adicional (casilla «vaciar» de la ficha) ---------
   El control extra va fuera del <label> del campo: un <label> con dos
   controles enfocaria el equivocado al hacer clic en la etiqueta. */
.campo-con-extra { display: flex; flex-direction: column; gap: 6px; }

.casilla-vaciar {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mut);
    user-select: none;
}

.casilla-vaciar:hover { color: var(--txt); }

.casilla-vaciar__control {
    width: 13px;
    height: 13px;
    accent-color: var(--grn);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Entrada anulada por la casilla: se ve inactiva, no desaparece. */
.campo__entrada:disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.selector { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }

.selector__entrada { cursor: pointer; }

.casilla {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--txt);
}

.casilla__caja {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--grn);
    cursor: pointer;
}

.casilla__texto { line-height: 1.5; }

.fila-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.fila-acciones .boton { flex: 1 1 auto; }
.fila-acciones--centrada { justify-content: center; }

/* --- Botones --------------------------------------------------------- */

.boton {
    /* 44px es el objetivo tactil minimo recomendado. Con 11px de padding el
       boton quedaba en 38: se falla con el pulgar en pantalla estrecha, que es
       justo donde el panel pasa a pestanas horizontales. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: var(--radio);
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--txt);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
}

.boton:hover:not(:disabled) { border-color: var(--grn-dim); color: var(--grn); }
.boton:focus-visible { outline: 2px solid var(--grn-dim); outline-offset: 2px; }
.boton:disabled { opacity: .4; cursor: not-allowed; }

.boton--principal {
    background: var(--grn);
    border-color: var(--grn);
    color: #04150b;
    font-weight: 700;
}

.boton--principal:hover:not(:disabled) {
    background: var(--grn-dim);
    border-color: var(--grn-dim);
    color: #04150b;
}

.boton--fantasma { background: transparent; }

.boton--texto {
    background: transparent;
    border-color: transparent;
    color: var(--mut);
    letter-spacing: 1.5px;
}

.boton--ancho { width: 100%; }

.boton--barra { padding: 8px 12px; font-size: 10px; letter-spacing: 1.5px; }

.boton--orden { border-color: var(--grn-dim); color: var(--grn); }

.boton--salir { color: var(--mut); }
.boton--salir:hover { border-color: var(--red); color: var(--red); }

.boton--icono {
    padding: 4px 10px;
    font-size: 13px;
    letter-spacing: 0;
    background: transparent;
    border-color: transparent;
    color: var(--mut);
}

.boton--icono:hover { color: var(--red); border-color: transparent; }

.boton--peligro { border-color: var(--red); color: var(--red); }
.boton--peligro:hover:not(:disabled) { background: rgba(255, 92, 92, .12); border-color: var(--red); color: var(--red); }

.pastilla {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--grn);
    color: #04150b;
    font-size: 10px;
    font-weight: 700;
}

/* --- Avisos ---------------------------------------------------------- */

.aviso-inline {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radio);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.45;
}

.aviso-inline--error {
    border: 1px solid rgba(255, 92, 92, .45);
    background: rgba(255, 92, 92, .08);
    color: var(--red);
}

.aviso-inline--ok {
    border: 1px solid var(--grn-dim);
    background: var(--grn-soft);
    color: var(--grn);
}

.aviso-inline--aviso {
    border: 1px solid rgba(255, 179, 71, .45);
    background: rgba(255, 179, 71, .08);
    color: var(--amber);
}

.avisos {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: var(--z-avisos);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: min(94vw, 520px);
}

.aviso {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--grn-dim);
    border-radius: var(--radio);
    background: var(--panel);
    color: var(--txt);
    font-family: var(--mono);
    font-size: 12.5px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    animation: aviso-entra .18s ease-out;
}

.aviso--error  { border-color: var(--red);   color: var(--red); }
.aviso--aviso  { border-color: var(--amber); color: var(--amber); }
.aviso--ok     { border-color: var(--grn);   color: var(--grn); }

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

/* --- Texto del NDA --------------------------------------------------- */

.nda {
    max-height: 46vh;
    overflow-y: auto;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radio);
    background: var(--bg);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--txt);
}

.nda:focus-visible { outline: 1px solid var(--grn-dim); }

.nda__titulo {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--grn);
    text-transform: uppercase;
}

.nda__version {
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.nda__seccion {
    margin: 20px 0 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 2px;
    color: var(--grn);
    text-transform: uppercase;
}

.nda p  { margin: 0 0 10px; }
.nda strong { color: var(--txt); }
.nda em { color: var(--amber); font-style: normal; }

.nda__lista { margin: 0 0 10px; padding-left: 20px; }
.nda__lista li { margin-bottom: 6px; }

/* --- OTP -------------------------------------------------------------- */

.otp__intro { margin: 0 0 16px; font-size: 13px; color: var(--mut); }
.otp__celular { color: var(--grn); font-family: var(--mono); letter-spacing: 1px; }

.otp__casillas {
    display: flex;
    gap: 9px;
    justify-content: center;
}

.otp__digito {
    width: 46px;
    height: 56px;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    color: var(--grn);
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0;
    transition: border-color .15s, box-shadow .15s;
}

.otp__digito:focus {
    outline: none;
    border-color: var(--grn);
    box-shadow: 0 0 0 2px var(--grn-soft);
}

.otp__vigencia {
    margin: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.sms {
    margin: 0 0 18px;
    padding: 12px;
    border: 1px dashed var(--amber);
    border-radius: var(--radio);
    background: rgba(255, 179, 71, .06);
}

.sms__cabecera {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--amber);
}

.sms__globo {
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 10px 10px 10px 2px;
    padding: 10px 12px;
}

.sms__remitente {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.sms__cuerpo { margin: 0; font-size: 13px; }
.sms__cuerpo strong { color: var(--grn); font-family: var(--mono); font-size: 17px; letter-spacing: 3px; }

.sms__pie { margin: 8px 0 0; font-size: 10.5px; color: var(--mut); line-height: 1.5; }

/* --- Cabecera de la aplicación ---------------------------------------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.cabecera__izq { display: flex; align-items: baseline; gap: 12px; }

.cabecera__lema {
    margin: 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 2.5px;
    color: var(--mut);
}

.cabecera__der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.reloj {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mut);
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radio);
}

.reloj--alerta { color: var(--amber); border-color: var(--amber); }
.reloj--critico { color: var(--red); border-color: var(--red); }

.identidad {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--txt);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identidad__rol { color: var(--amber); }

/* --- Filtros ----------------------------------------------------------- */

.filtros {
    padding: 16px 18px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    padding: 0 12px;
    transition: border-color .15s, box-shadow .15s;
}

.buscador:focus-within { border-color: var(--grn-dim); box-shadow: 0 0 0 2px var(--grn-soft); }

.buscador__prefijo {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--grn);
    line-height: 1;
}

.buscador__entrada {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: var(--txt);
    font-family: var(--mono);
    font-size: 14px;
    padding: 12px 0;
}

.buscador__entrada::placeholder { color: var(--mut); }
.buscador__entrada::-webkit-search-cancel-button { display: none; }

.buscador__limpiar {
    background: transparent;
    border: none;
    color: var(--mut);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

.buscador__limpiar:hover { color: var(--red); }

.filtros__fila {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; }

.chip {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--mut);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.chip:hover { border-color: var(--grn-dim); color: var(--txt); }

.chip--activo {
    border-color: var(--grn);
    background: var(--grn-soft);
    color: var(--grn);
}

.chip__total { opacity: .65; margin-left: 5px; }

.contador {
    margin: 12px 0 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 2px;
    color: var(--mut);
    text-transform: uppercase;
}

.contador strong { color: var(--grn); }

/* --- Lista de referencias ---------------------------------------------- */

.lista {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    padding: 16px 18px;
    align-content: start;
}

.ficha {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    transition: border-color .15s, box-shadow .15s;
}

.ficha:hover { border-color: #24422f; }

.ficha--en-orden {
    border-color: var(--grn);
    box-shadow: 0 0 0 1px var(--grn-soft), inset 0 0 30px rgba(40, 224, 123, .05);
}

.ficha__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ficha__codigo {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--grn);
}

.ficha__categoria {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--mut);
}

.ficha__kit {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.ficha__enlace {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: var(--grn-dim);
    white-space: nowrap;
}

.ficha__enlace:hover { color: var(--grn); }

.ficha__marca {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--amber);
}

.ficha__modelos {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--txt);
    cursor: pointer;
    word-break: break-word;
}

.ficha__modelos--truncado {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ficha__modelos-mas {
    display: block;
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: var(--grn-dim);
}

.ficha__grilla {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    overflow: hidden;
}

.dato {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3px;
    background: var(--panel2);
    padding: 7px 4px;
    text-align: center;
    min-width: 0;
}

/* La etiqueta se parte en dos líneas antes que recortarse: «LEDS × BARRA»
   debe leerse completa, es uno de los cinco campos del contrato. */
.dato__etiqueta {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .5px;
    line-height: 1.3;
    color: var(--mut);
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.dato__valor {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--txt);
    word-break: break-word;
}

.dato__valor--vacio { color: #3b4f43; }

.ficha__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ficha__pie-etiqueta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.cantidad {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radio);
    overflow: hidden;
}

.cantidad__boton {
    width: 30px;
    height: 30px;
    background: var(--panel2);
    border: none;
    color: var(--txt);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cantidad__boton:hover { background: var(--grn-soft); color: var(--grn); }

.cantidad__entrada {
    width: 52px;
    height: 30px;
    background: var(--bg);
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--txt);
    font-family: var(--mono);
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cantidad__entrada::-webkit-outer-spin-button,
.cantidad__entrada::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cantidad__entrada:focus { outline: none; color: var(--grn); }

.cantidad--activa .cantidad__entrada { color: var(--grn); font-weight: 700; }

.ficha__interno {
    margin: 0;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 11px;
    line-height: 1.5;
    color: var(--mut);
}

.ficha__interno strong { color: var(--amber); font-weight: 400; }

.lista__pie { padding: 4px 18px 40px; text-align: center; }
.lista__pie .boton { max-width: 320px; margin: 0 auto; }

.lista__estado {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.vacio {
    grid-column: 1 / -1;
    padding: 50px 20px;
    text-align: center;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 1.5px;
}

/* --- Panel lateral de la orden ------------------------------------------ */

.panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(94vw, 380px);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .55);
}

.panel__cabecera,
.panel__pie {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.panel__pie { border-bottom: none; border-top: 1px solid var(--line); }

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

.panel__titulo {
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--grn);
}

.panel__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 10px 16px; }

.panel__resumen {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

.panel__nota { margin: 10px 0 0; font-size: 10.5px; color: var(--mut); line-height: 1.5; }

/*
 * Texto de encabezado de un panel: la frase que explica para qué sirve la
 * pantalla antes de la primera fila. `accesos.js` la usaba desde el principio
 * sin que existiera la regla, así que salía con el tamaño y el color del
 * cuerpo y se leía como un dato más en vez de como la explicación de arriba.
 */
.panel__intro {
    margin: 0 0 14px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mut);
}

.renglon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.renglon:last-child { border-bottom: none; }

.renglon__datos { flex: 1 1 auto; min-width: 0; }

.renglon__codigo {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--grn);
    letter-spacing: 1px;
}

.renglon__marca {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--mut);
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fondo {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-panel) - 1);
    background: rgba(0, 0, 0, .6);
}

/* --- Modales -------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
}

.modal__caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .7);
}

.modal__caja--ancha { max-width: 1080px; }

.modal__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.modal__titulo {
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--grn);
}

.modal__filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.modal__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

.modal__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
}

.modal__resumen {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mut);
}

/* --- Tablas ---------------------------------------------------------------- */

.tabla-envoltura { flex: 1 1 auto; overflow: auto; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 11.5px;
}

.tabla th {
    position: sticky;
    top: 0;
    background: var(--panel2);
    color: var(--mut);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.tabla td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--txt);
    vertical-align: top;
}

.tabla tr:hover td { background: var(--grn-soft); }

.tabla td.vacio-celda { color: #3b4f43; }

.tabla__evento { color: var(--grn); }
.tabla__evento--alerta { color: var(--amber); }
.tabla__evento--error { color: var(--red); }

/* --- Pestañas del panel de inventario ------------------------------------- */

.pestanas {
    display: flex;
    gap: 2px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.pestana {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    padding: 12px 14px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.pestana:hover { color: var(--txt); }
.pestana--activa { color: var(--grn); border-bottom-color: var(--grn); }

/* --- Tablero de cobertura --------------------------------------------------- */

.tablero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.metrica {
    padding: 14px;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: var(--radio);
    text-align: center;
}

.metrica__valor {
    display: block;
    font-family: var(--mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--grn);
    line-height: 1.2;
}

.metrica__valor--alerta { color: var(--amber); }
.metrica__valor--vacio  { color: #3b4f43; }

.metrica__etiqueta {
    display: block;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mut);
    text-transform: uppercase;
}

.barra-campo { margin-bottom: 14px; }

.barra-campo__cabecera {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mut);
    margin-bottom: 5px;
    text-transform: uppercase;
}

.barra-campo__valor { color: var(--txt); }

.barra-campo__riel {
    height: 7px;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.barra-campo__relleno {
    height: 100%;
    background: var(--grn);
    transition: width .25s ease-out;
}

.barra-campo__relleno--bajo { background: var(--amber); }

.subtitulo {
    margin: 24px 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--grn);
    text-transform: uppercase;
}

.parrafo-nota {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mut);
}

.faltante {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 1px 6px;
    margin: 0 4px 3px 0;
    border: 1px solid rgba(255, 179, 71, .4);
    border-radius: 9px;
    color: var(--amber);
}

.diff-antes  { color: var(--mut); }
.diff-flecha { color: var(--grn-dim); padding: 0 6px; }
.diff-despues { color: var(--grn); }

.rechazada { color: var(--red); }

/* --- Utilidades ------------------------------------------------------------ */

.cargador {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--grn-dim);
}

.cargador::after {
    content: "_";
    animation: cursor 1s steps(2) infinite;
}

@keyframes cursor { 50% { opacity: 0; } }

.sin-cursor { cursor: default; }

/* --- Responsivo ------------------------------------------------------------- */

@media (max-width: 720px) {
    .cabecera { padding: 10px 12px; }
    .cabecera__der { width: 100%; justify-content: space-between; }
    .identidad { max-width: 130px; }
    .filtros, .lista { padding-left: 12px; padding-right: 12px; }
    .lista { grid-template-columns: 1fr; }
    .ficha__grilla { grid-template-columns: repeat(3, 1fr); }
    .tarjeta { padding: 24px 18px; }
    .otp__digito { width: 40px; height: 50px; font-size: 20px; }
    .nda { max-height: 40vh; }
}

/* =====================================================================
   Espera de aprobación
   ---------------------------------------------------------------------
   Acertar el código ya no abre nada: aquí el cliente espera a que una
   persona autorice su entrada. La pantalla tiene que dejar dos cosas
   claras de un vistazo: que el sistema no está colgado, y cuánto tiempo
   queda antes de que la solicitud venza sola.
   ===================================================================== */

.tarjeta--espera {
    max-width: 34rem;
    text-align: center;
}

.espera__reloj {
    margin: 1.5rem 0 0.75rem;
    color: var(--mut);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.reloj--grande {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.15rem 0.6rem;
    color: var(--grn);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

/* Barra viva: sin ella, una espera de cinco minutos parece un cuelgue y la
   gente recarga la página, que es justo lo que no debe hacer. */
.espera__barra {
    position: relative;
    height: 3px;
    margin: 0.5rem 0 1.5rem;
    overflow: hidden;
    border-radius: 3px;
    background: var(--line);
}

.espera__barra span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 35%;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--grn), transparent);
    animation: espera-latido 1.8s ease-in-out infinite;
}

@keyframes espera-latido {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .espera__barra span {
        animation: none;
        width: 100%;
        opacity: 0.35;
    }
}

.espera__detalle {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: left;
}

.espera__detalle summary {
    color: var(--mut);
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.espera__datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
}

.espera__datos dt {
    color: var(--mut);
}

.espera__datos dd {
    margin: 0;
    color: var(--txt);
    font-family: var(--mono);
    word-break: break-word;
}

.espera__nota {
    margin: 0.85rem 0 0;
    color: var(--mut);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* =====================================================================
   Control de accesos
   ---------------------------------------------------------------------
   El expediente se pinta en tres bloques VISUALMENTE distintos a
   proposito. Una interfaz que mezcla lo que verifico el servidor con lo
   que declara el navegador hace que el aprobador confie en datos que el
   atacante eligio.
   ===================================================================== */

.contador {
    display: inline-block;
    min-width: 1.4em;
    margin-left: 0.4em;
    padding: 0.05em 0.4em;
    border-radius: 10px;
    background: var(--line);
    color: var(--txt);
    font-size: 0.8em;
    text-align: center;
}

.boton--alerta {
    border-color: var(--amber);
    color: var(--amber);
}

.boton--alerta .contador {
    background: var(--amber);
    color: #1a1200;
    font-weight: 700;
}

.solicitud {
    margin: 0 0 1.25rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 6px;
    padding: 1rem 1.15rem;
    background: var(--panel);
}

/* Un equipo nunca visto se grita; uno conocido se susurra. Con aprobacion
   obligatoria en todos los inicios, esto es lo unico que impide el clic
   en automatico a las tres semanas. */
.solicitud--nueva    { border-left-color: var(--amber); }
.solicitud--conocida { border-left-color: var(--grn-dim); }

.solicitud__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.solicitud__quien {
    margin: 0;
    color: var(--txt);
    font-size: 1rem;
}

.solicitud__reloj {
    color: var(--mut);
    font-family: var(--mono);
    font-size: 0.8rem;
}

.solicitud__bloque {
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    background: var(--panel2);
}

.solicitud__bloque--firme  { border-left: 2px solid var(--grn-dim); }
.solicitud__bloque--blando { border-left: 2px solid var(--red); }
.solicitud__bloque--clave  { border-left: 2px solid var(--amber); }

.solicitud__titulo {
    margin: 0 0 0.5rem;
    color: var(--mut);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

.solicitud__advertencia {
    margin: 0 0 0.6rem;
    color: var(--red);
    font-size: 0.78rem;
    line-height: 1.45;
}

.solicitud__datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.85rem;
}

.solicitud__datos dt { color: var(--mut); }

.solicitud__datos dd {
    margin: 0;
    color: var(--txt);
    font-family: var(--mono);
    word-break: break-word;
}

.solicitud__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.campo__entrada--corta { flex: 1 1 12rem; min-width: 0; }

.boton--peligro {
    border-color: var(--red);
    color: var(--red);
}

.boton--peligro:hover { background: rgba(255, 92, 92, 0.1); }

/* --- WhatsApp --- */

/* El estado y su detalle tecnico son un solo bloque: el borde los agrupa
   para que se lean como un dato con su nota al pie, no como dos avisos. */
.whatsapp__tarjeta {
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.whatsapp__estado {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--mono);
    letter-spacing: 0.08em;
}

/* Dentro de la tarjeta el semaforo ya no necesita su propio marco. */
.whatsapp__tarjeta .whatsapp__estado {
    border: 0;
    border-radius: 0;
}

/* Lo que reporta el servidor, palabra por palabra. Se conserva porque sirve
   para diagnosticar, pero en tono bajo: es una nota, no una alarma mas. */
.whatsapp__detalle {
    margin: 0;
    padding: 0.55rem 1rem 0.7rem;
    border-top: 1px solid var(--line);
    color: var(--mut);
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
}

.whatsapp__punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.estado--ok      { color: var(--grn); }
.estado--espera  { color: var(--amber); }
.estado--apagado { color: var(--mut); }
.estado--error   { color: var(--red); }

.whatsapp__numero {
    margin-left: auto;
    color: var(--mut);
    font-size: 0.85rem;
}

.whatsapp__codigo {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed var(--grn-dim);
    border-radius: 6px;
    text-align: center;
}

.whatsapp__digitos {
    margin: 0.4rem 0 0.8rem;
    color: var(--grn);
    font-family: var(--mono);
    font-size: 2rem;
    letter-spacing: 0.35em;
}

.whatsapp__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.panel__alerta {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--red);
    background: rgba(255, 92, 92, 0.07);
    color: var(--txt);
    font-size: 0.85rem;
    line-height: 1.5;
}

.panel__aviso {
    margin: 0 0 1rem;
    color: var(--mut);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* --- Vinculación por QR --- */

.whatsapp__qr {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed var(--grn-dim);
    border-radius: 6px;
    text-align: center;
}

.whatsapp__imagen {
    display: block;
    margin: 0.75rem auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    /* Fondo claro fijo: un QR sobre fondo oscuro no lo lee ninguna cámara. */
    background: #d4e6da;
    padding: 8px;
}

.whatsapp__alternativa {
    width: 100%;
    margin: 0.9rem 0 0.35rem;
    color: var(--mut);
    font-size: 0.8rem;
}

/* =====================================================================
   Página de administración (public/panel.html)
   ---------------------------------------------------------------------
   No hay paleta nueva ni tipografía nueva: todo sale de las variables de
   :root y de las clases que ya existen (.cabecera, .boton, .tabla,
   .modal, .cargador). Lo único propio de esta página es la rejilla de
   dos columnas —barra lateral y contenido— y lo que hace falta para que
   en pantalla estrecha la barra pase arriba en vez de estrangular la
   tabla, que es lo que se viene a leer.
   ===================================================================== */

/* Un enlace con pinta de botón. Hacía falta para la puerta al panel y para
   los enlaces de la barra lateral: `.boton` estaba escrito para <button>,
   que ya es inline-block y no se subraya al pasar por encima. */
a.boton {
    display: inline-block;
    text-decoration: none;
}

a.boton:hover { text-decoration: none; }

.boton--panel { border-color: var(--grn-dim); color: var(--grn); }

/* --- Rejilla de la página ------------------------------------------- */

.panel-pagina { min-height: 100vh; }

/* Mismo truco que en el portal: mientras el JavaScript no ha decidido qué
   vistas existen, la rejilla no parpadea con una barra lateral vacía. */
body.cargando .panel-marco { visibility: hidden; }

.panel-marco {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 0;
    /* Menos la cabecera, que es sticky y mide su propio alto. */
    min-height: calc(100vh - 58px);
}

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

.panel-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    /* Se queda a la vista mientras la tabla de al lado se desplaza. */
    position: sticky;
    top: 58px;
    align-self: stretch;
}

.panel-nav__enlace {
    display: block;
    padding: 10px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radio) var(--radio) 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.panel-nav__enlace:hover {
    background: var(--grn-soft);
    color: var(--txt);
    text-decoration: none;
}

.panel-nav__enlace--activa {
    border-left-color: var(--grn);
    background: var(--grn-soft);
    color: var(--grn);
}

.panel-nav__enlace:focus-visible {
    outline: 2px solid var(--grn-dim);
    outline-offset: -2px;
}

/* --- Contenedor de la vista ----------------------------------------- */

.panel-vista {
    /* `minmax(0, 1fr)` arriba y `min-width: 0` aquí: sin los dos, una tabla
       ancha estira la columna de la rejilla en vez de desplazarse dentro de
       su propia .tabla-envoltura, y la página entera se va de lado. */
    min-width: 0;
    padding: 18px;
    background: var(--bg);
}

.panel-vista > .tabla-envoltura { max-width: 100%; }

/* --- Confirmación destructiva --------------------------------------- */

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

.modal__mensaje {
    margin: 0;
    color: var(--txt);
    font-size: 13px;
    line-height: 1.6;
}

/* El pie del modal de confirmación alinea los dos botones a la derecha: el
   de cancelar queda más cerca del pulgar que el destructivo. */
.modal__pie--acciones { justify-content: flex-end; }

/* --- Mensaje de fallo dentro de una vista ---------------------------- */

/* `p.error` la usan accesos.js y los módulos del panel para pintar
   `fallo.mensaje` tal como llegó del servidor. Estaba en uso sin estar
   definida: el texto salía con el color del cuerpo y un fallo se leía igual
   que un dato normal. */
.error {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--red);
    background: rgba(255, 92, 92, .07);
    color: var(--red);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.6;
}

/* --- Responsivo ------------------------------------------------------ */

@media (max-width: 900px) {
    .panel-marco {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* La barra pasa arriba y se vuelve una fila desplazable: en vertical
       ocuparía media pantalla antes de que se viera un solo registro. */
    .panel-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--line);
        position: static;
    }

    .panel-nav__enlace {
        flex: 0 0 auto;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: var(--radio) var(--radio) 0 0;
        padding: 8px 10px;
    }

    .panel-nav__enlace--activa {
        border-left-color: transparent;
        border-bottom-color: var(--grn);
    }

    .panel-vista { padding: 12px; }
}