/* =============================================================================
   INTERFAZ DEL OPERADOR
   =============================================================================
   Rediseño visual (v2). Mantiene los principios de piso —objetivos táctiles
   grandes, texto legible, color con significado fijo— pero con una capa visual
   más rica: degradados, profundidad por sombras en capas, e interacciones
   suaves.

   Semáforo de color, invariable en todo el sistema:
     verde = listo / hecho     ámbar = revisar
     rojo  = alto / problema    azul  = información
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SECCIÓN 1 — Variables
   -------------------------------------------------------------------------- */

:root {
    /* Marca */
    --azul-profundo:  #122b48;
    --azul-medio:     #1f6feb;
    --azul-claro:     #e8f1fd;
    --azul-vivo:      #2f86e0;

    /* Semáforo operativo */
    --verde:          #12805c;
    --verde-suave:    #e4f6ee;
    --ambar:          #b5670a;
    --ambar-suave:    #fff2dc;
    --rojo:           #c62a24;
    --rojo-suave:     #fdeceb;

    /* Neutros */
    --tinta:          #16202b;
    --tinta-suave:    #5d6b7a;
    --linea:          #e2e8f0;
    --fondo:          #eef2f7;
    --superficie:     #ffffff;

    /* Degradados */
    --grad-marca:     linear-gradient(135deg, #163a5f 0%, #0f2740 100%);
    --grad-azul:      linear-gradient(135deg, #2f86e0 0%, #1f6feb 55%, #1a5fd0 100%);
    --grad-verde:     linear-gradient(135deg, #1aa06f 0%, #12805c 100%);
    --grad-rojo:      linear-gradient(135deg, #e0483f 0%, #c62a24 100%);
    --grad-ambar:     linear-gradient(135deg, #e5911f 0%, #c9760d 100%);
    --grad-fondo:     radial-gradient(1200px 600px at 100% -5%, #e2ecf9 0%, transparent 55%),
                      radial-gradient(1000px 500px at -10% 0%, #e8f3ee 0%, transparent 50%),
                      linear-gradient(180deg, #eef2f7 0%, #e9eef5 100%);

    /* Escala tipográfica: base grande a propósito */
    --texto-xs:       0.9375rem;   /* 15px */
    --texto-base:     1.125rem;    /* 18px */
    --texto-lg:       1.375rem;    /* 22px */
    --texto-xl:       1.9375rem;   /* 31px */
    --texto-2xl:      3rem;        /* 48px — contadores */

    /* Ritmo */
    --gap:            1.25rem;
    --radio:          18px;
    --radio-sm:       12px;
    --toque-min:      64px;

    /* Sombras en capas: dan profundidad sin verse pesadas */
    --sombra:         0 1px 2px rgba(18, 43, 72, .06),
                      0 4px 16px rgba(18, 43, 72, .07);
    --sombra-alta:    0 2px 4px rgba(18, 43, 72, .08),
                      0 14px 40px rgba(18, 43, 72, .16);
    --sombra-color:   0 8px 24px rgba(31, 111, 235, .28);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 2 — Base
   -------------------------------------------------------------------------- */

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

body.operador {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: var(--texto-base);
    line-height: 1.55;
    color: var(--tinta);
    background: var(--grad-fondo);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

.contenedor {
    width: min(100% - 2rem, 1120px);
    margin-inline: auto;
}

::selection { background: rgba(31, 111, 235, .18); }

/* -----------------------------------------------------------------------------
   SECCIÓN 3 — Barra superior
   -------------------------------------------------------------------------- */

.barra {
    background: var(--grad-marca);
    color: #fff;
    padding: 1.05rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 24px rgba(15, 39, 64, .28);
}

/* Filo luminoso inferior: un detalle sutil que da acabado */
.barra::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--azul-vivo), #4fb0e8, var(--verde));
    opacity: .9;
}

.barra__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.barra__titulo {
    font-size: var(--texto-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Punto de marca antes del título */
.barra__titulo::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--azul-vivo);
    box-shadow: 0 0 0 4px rgba(47, 134, 224, .3);
}

/* El título es un enlace al inicio (imprescindible en móvil, donde la barra de
   navegación se reduce). Hereda color y peso para verse igual que antes. */
.barra__marca {
    color: inherit;
    text-decoration: none;
}
.barra__marca:hover { opacity: .92; }

.barra__usuario {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--texto-xs);
}

.barra__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul-vivo), var(--azul-medio));
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--texto-base);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.2);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 3b — Navegación principal
   -------------------------------------------------------------------------- */
/* Presente en todas las pantallas. Queda pegada bajo el encabezado para que
   "Inicio" y las secciones estén siempre a un clic. */

.navegacion {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 2px 12px rgba(18, 43, 72, .05);
}

.navegacion__interior {
    display: flex;
    gap: .375rem;
    padding: .55rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Oculta la barra de scroll pero deja el desplazamiento táctil */
.navegacion__interior::-webkit-scrollbar { height: 0; }

.navegacion__enlace {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 1.15rem;
    border-radius: 10px;
    font-size: var(--texto-xs);
    font-weight: 700;
    color: var(--tinta-suave);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.navegacion__enlace:hover {
    background: var(--azul-claro);
    color: var(--azul-medio);
}

.navegacion__enlace--activo {
    background: var(--grad-azul);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 111, 235, .28);
}
.navegacion__enlace--activo:hover {
    color: #fff;
}

/* El primer enlace (Inicio) lleva un ícono de casa antes del texto */
.navegacion__enlace:first-child::before {
    content: "";
    width: 16px; height: 16px;
    margin-right: .45rem;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   SECCIÓN 4 — Pasos del flujo
   -------------------------------------------------------------------------- */

.pasos {
    display: flex;
    gap: .5rem;
    padding: 1.25rem 0;
    list-style: none;
    margin: 0;
    overflow-x: auto;
}

.paso {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    background: var(--superficie);
    border: 1.5px solid var(--linea);
    border-radius: var(--radio-sm);
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
    box-shadow: var(--sombra);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.paso__numero {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--fondo);
    color: var(--tinta-suave);
    font-weight: 700;
    transition: transform .2s;
}

.paso--activo {
    border-color: transparent;
    background: var(--azul-claro);
    color: var(--azul-profundo);
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--azul-medio) inset, var(--sombra);
}

.paso--activo .paso__numero {
    background: var(--grad-azul);
    color: #fff;
    transform: scale(1.05);
    box-shadow: var(--sombra-color);
}

.paso--completo {
    border-color: transparent;
    background: var(--verde-suave);
    color: var(--verde);
    box-shadow: 0 0 0 1.5px rgba(18,128,92,.4) inset, var(--sombra);
}

.paso--completo .paso__numero {
    background: var(--grad-verde);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   SECCIÓN 5 — Tarjetas
   -------------------------------------------------------------------------- */

.tarjeta {
    position: relative;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.85rem;
    margin-bottom: var(--gap);
    border: 1px solid rgba(226, 232, 240, .8);
    transition: box-shadow .25s, transform .25s;
}

.tarjeta:hover {
    box-shadow: var(--sombra-alta);
}

.tarjeta__titulo {
    margin: 0 0 .375rem;
    font-size: var(--texto-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--azul-profundo);
}

.tarjeta__ayuda {
    margin: 0 0 1.5rem;
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 6 — Contadores
   -------------------------------------------------------------------------- */

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

.contador {
    position: relative;
    background: var(--superficie);
    border-radius: var(--radio);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--sombra);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .8);
    transition: transform .2s, box-shadow .2s;
}

/* Barra de acento lateral, ahora con degradado */
.contador::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
    background: var(--linea);
}

a.contador:hover,
.contador:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.contador__cifra {
    font-size: var(--texto-2xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.contador__etiqueta {
    margin-top: .4rem;
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
    font-weight: 500;
}

.contador--ok::before    { background: var(--grad-verde); }
.contador--ok    .contador__cifra { color: var(--verde); }

.contador--aviso::before { background: var(--grad-ambar); }
.contador--aviso { background: linear-gradient(180deg, #fffaf1 0%, var(--superficie) 60%); }
.contador--aviso .contador__cifra { color: var(--ambar); }

.contador--alto::before  { background: var(--grad-rojo); }
.contador--alto  { background: linear-gradient(180deg, #fdf1f0 0%, var(--superficie) 60%); }
.contador--alto  .contador__cifra { color: var(--rojo); }

/* -----------------------------------------------------------------------------
   SECCIÓN 6a2 — Diálogos in-page (modal)
   -----------------------------------------------------------------------------
   Reemplazan a confirm()/prompt() del navegador. Se centran con flexbox y el
   modal tiene su propio scroll interno, así el scroll de la página no se rompe.
   El bloqueo del fondo (.modal-abierto) lo pone el JS compensando la barra para
   que la página no salte. Se usan top/left/right/bottom (no inset) por
   compatibilidad con navegadores viejos. */

.modal-abierto { overflow: hidden; }

.modal-fondo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(16, 32, 52, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .18s ease;
}

.modal-fondo--visible { opacity: 1; }
.modal-fondo[hidden]  { display: none; }

.modal {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: 0 20px 60px rgba(16, 32, 52, .35);
    padding: 1.6rem 1.6rem 1.3rem;
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
}

.modal-fondo--visible .modal { transform: none; }

.modal__mensaje {
    margin: 0 0 1.1rem;
    font-size: var(--texto-base);
    line-height: 1.5;
    color: var(--tinta);
}

.modal__input { margin-bottom: 1.2rem; }

.modal__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.modal__acciones .boton { min-width: 7rem; }

@media (prefers-reduced-motion: reduce) {
    .modal-fondo, .modal { transition: none; }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 6a3 — Notificaciones en vivo del panel (toasts)
   -------------------------------------------------------------------------- */
/* Badges que el JS oculta cuando el conteo baja a 0. */
.panel-mitad__alerta[hidden],
.panel-menu__badge[hidden] { display: none !important; }

.toast-zona {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--radio-sm);
    background: var(--azul-profundo);
    color: #fff;
    box-shadow: 0 10px 30px rgba(16, 32, 52, .3);
    font-size: var(--texto-xs);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s;
    pointer-events: auto;
}

.toast--visible { opacity: 1; transform: none; }

.toast__cerrar {
    margin-left: auto;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
}

@keyframes panelPulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198, 42, 36, 0); }
    30%      { box-shadow: 0 0 0 6px rgba(198, 42, 36, .35); }
}

.panel-mitad--pulso { animation: panelPulso 1.2s ease-out 2; }

@media (prefers-reduced-motion: reduce) {
    .toast { transition: none; }
    .panel-mitad--pulso { animation: none; }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 6b — Selector Entrada / Salida
   -------------------------------------------------------------------------- */

.selector-tipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: var(--gap);
}

.selector-tipo__opcion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 64px;
    border-radius: var(--radio);
    font-size: var(--texto-lg);
    font-weight: 700;
    text-decoration: none;
    color: var(--tinta-suave);
    background: var(--superficie);
    box-shadow: inset 0 0 0 2px var(--linea), var(--sombra);
    transition: transform .1s, box-shadow .15s, color .15s;
}

.selector-tipo__opcion span { font-size: 1.5rem; }

.selector-tipo__opcion:hover { transform: translateY(-2px); }

.selector-tipo__opcion--entrada {
    background: var(--grad-verde);
    color: #fff;
    box-shadow: 0 8px 24px rgba(18, 128, 92, .3);
}

.selector-tipo__opcion--salida {
    background: var(--grad-azul);
    color: #fff;
    box-shadow: var(--sombra-color);
}

/* Enlace "N sin asignar" dentro de un contador */
.contador__enlace {
    display: inline-block;
    margin-top: .5rem;
    font-size: var(--texto-xs);
    font-weight: 700;
    color: var(--ambar);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .15s;
}

.contador__enlace:hover { border-color: var(--ambar); }

/* -----------------------------------------------------------------------------
   SECCIÓN 7 — Formularios
   -------------------------------------------------------------------------- */

.campo { margin-bottom: 1.5rem; }

.campo__etiqueta {
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: var(--texto-base);
    color: var(--azul-profundo);
}

.campo__pista {
    display: block;
    margin-top: .4rem;
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
}

.campo__control {
    width: 100%;
    min-height: var(--toque-min);
    padding: .875rem 1.125rem;
    font-size: var(--texto-base);
    font-family: inherit;
    color: var(--tinta);
    background: #fbfcfe;
    border: 2px solid var(--linea);
    border-radius: var(--radio-sm);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.campo__control:hover { border-color: #c4cfdd; }

.campo__control:focus {
    outline: none;
    background: #fff;
    border-color: var(--azul-medio);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, .16);
}

.campo__control:disabled {
    background: var(--fondo);
    color: var(--tinta-suave);
}

.campo--error .campo__control {
    border-color: var(--rojo);
    background: #fffafa;
}
.campo--error .campo__control:focus {
    box-shadow: 0 0 0 4px rgba(198, 42, 36, .14);
}

.campo__error {
    display: block;
    margin-top: .5rem;
    color: var(--rojo);
    font-size: var(--texto-xs);
    font-weight: 700;
}

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

/* -----------------------------------------------------------------------------
   SECCIÓN 8 — Botones
   -------------------------------------------------------------------------- */

.boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: var(--toque-min);
    padding: 0 2rem;
    font-size: var(--texto-base);
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -.01em;
    border: none;
    border-radius: var(--radio-sm);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}

/* Brillo sutil que cruza el botón al pasar el cursor */
.boton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
}
.boton:hover::after { transform: translateX(120%); }

.boton:active { transform: translateY(1px) scale(.997); }

.boton:focus-visible {
    outline: 3px solid var(--azul-medio);
    outline-offset: 3px;
}

.boton--principal {
    background: var(--grad-azul);
    color: #fff;
    box-shadow: var(--sombra-color);
}
.boton--principal:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(31,111,235,.4); }

.boton--confirmar {
    background: var(--grad-verde);
    color: #fff;
    box-shadow: 0 8px 24px rgba(18, 128, 92, .3);
}
.boton--confirmar:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(18,128,92,.42); }

.boton--secundario {
    background: var(--superficie);
    color: var(--azul-profundo);
    box-shadow: inset 0 0 0 2px var(--linea), var(--sombra);
}
.boton--secundario:hover {
    box-shadow: inset 0 0 0 2px var(--azul-medio), var(--sombra);
    color: var(--azul-medio);
}

.boton--peligro {
    background: var(--grad-rojo);
    color: #fff;
    box-shadow: 0 8px 24px rgba(198, 42, 36, .28);
}
.boton--peligro:hover { filter: brightness(1.06); }

.boton:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.3);
    box-shadow: none;
}
.boton:disabled::after { display: none; }

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

.boton--grande {
    min-height: 84px;
    font-size: var(--texto-lg);
    border-radius: var(--radio);
}

.acciones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.acciones--separadas { justify-content: space-between; }

/* Acciones de la pantalla de confirmación: en escritorio se alinean a la
   derecha; en teléfono el CSS de pantallas chicas las apila. */
.acciones--confirmacion { justify-content: flex-end; }

/* -----------------------------------------------------------------------------
   SECCIÓN 8a bis — Apartado de datos generados (confirmación)
   -------------------------------------------------------------------------- */
.datos-generados {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea);
}

.datos-generados__titulo {
    font-size: var(--texto-lg);
    color: var(--azul-profundo);
    margin: 0 0 1rem;
}

.datos-generados__etiqueta {
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
}

.datos-generados__valor {
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   SECCIÓN 8b — Botones héroe (entrada / salida del inicio)
   -------------------------------------------------------------------------- */
/* Los dos botones grandes del inicio reciben un tratamiento especial: son la
   acción principal de todo el sistema, así que deben tener presencia. */

.boton--confirmar.boton--grande,
.boton--principal.boton--grande {
    box-shadow: var(--sombra-alta);
}

.boton--grande span[aria-hidden="true"] {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    backdrop-filter: blur(2px);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 9 — Zona de carga de archivo
   -------------------------------------------------------------------------- */

.zona-archivo {
    display: block;
    border: 2.5px dashed #c4d0e0;
    border-radius: var(--radio);
    padding: 3rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(120% 120% at 50% 0%, #f4f8fe 0%, var(--superficie) 60%);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
}

.zona-archivo:hover,
.zona-archivo--activa {
    border-color: var(--azul-medio);
    background: radial-gradient(120% 120% at 50% 0%, var(--azul-claro) 0%, var(--superficie) 65%);
}

.zona-archivo__icono { font-size: 3.5rem; line-height: 1; }

.zona-archivo__texto {
    margin: 1rem 0 .375rem;
    font-size: var(--texto-lg);
    font-weight: 700;
    color: var(--azul-profundo);
}

.zona-archivo__pista {
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
}

.zona-archivo--con-archivo {
    border-style: solid;
    border-color: var(--verde);
    background: radial-gradient(120% 120% at 50% 0%, var(--verde-suave) 0%, var(--superficie) 65%);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 10 — Avisos
   -------------------------------------------------------------------------- */

.aviso {
    display: flex;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--radio-sm);
    margin-bottom: 1rem;
    box-shadow: var(--sombra);
    border: 1px solid rgba(0,0,0,.04);
    animation: aviso-entra .35s ease;
}

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

.aviso__icono {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.aviso__titulo { margin: 0 0 .25rem; font-weight: 800; font-size: var(--texto-base); }
.aviso__texto  { margin: 0; font-size: var(--texto-xs); }

.aviso--exito    { background: linear-gradient(180deg, #ecf9f2, var(--verde-suave)); color: #0d5a3f; }
.aviso--exito    .aviso__icono { background: var(--grad-verde); }
.aviso--atencion { background: linear-gradient(180deg, #fff7ea, var(--ambar-suave)); color: #7a4708; }
.aviso--atencion .aviso__icono { background: var(--grad-ambar); }
.aviso--error    { background: linear-gradient(180deg, #fdf0ef, var(--rojo-suave)); color: #8a1c16; }
.aviso--error    .aviso__icono { background: var(--grad-rojo); }
.aviso--info     { background: linear-gradient(180deg, #eef5fd, var(--azul-claro)); color: var(--azul-profundo); }
.aviso--info     .aviso__icono { background: var(--grad-azul); }

/* Aviso que se puede cerrar */
.aviso--cerrable { position: relative; padding-right: 3.5rem; }

.aviso__cerrar {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
    transition: opacity .15s, background .15s;
}

.aviso__cerrar:hover  { opacity: 1; background: rgba(0, 0, 0, .07); }
.aviso__cerrar:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   SECCIÓN 10b — Glosario A–Z
   -------------------------------------------------------------------------- */

.glosario {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: var(--gap);
    padding: 1rem 1.15rem;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid rgba(226, 232, 240, .8);
}

.glosario__letra {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: var(--texto-base);
    text-decoration: none;
    color: var(--azul-profundo);
    background: var(--fondo);
    transition: background .15s, color .15s, transform .08s;
}

/* "Todas" es un poco más ancho por el texto */
.glosario__letra:first-child { min-width: auto; padding: 0 1rem; }

.glosario__letra:hover {
    background: var(--azul-claro);
    color: var(--azul-medio);
}

.glosario__letra:active { transform: translateY(1px); }

.glosario__letra--activa,
.glosario__letra--activa:hover {
    background: var(--grad-azul);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 111, 235, .28);
}

/* Letras sin ningún empleado: visibles pero apagadas y sin clic */
.glosario__letra--vacia {
    color: #c2ccd8;
    background: transparent;
    cursor: default;
}

/* -----------------------------------------------------------------------------
   SECCIÓN 11 — Lista de lecturas
   -------------------------------------------------------------------------- */

.lista-lecturas {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
    border-radius: var(--radio-sm);
    border: 1px solid var(--linea);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.lectura {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linea);
    background: var(--superficie);
    transition: background .15s;
}

.lectura:last-child { border-bottom: none; }
.lectura:hover { background: #f7fafd; }

.lectura__marca {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.12);
}

.lectura__marca--ok     { background: var(--grad-verde); }
.lectura__marca--aviso  { background: var(--grad-ambar); }
.lectura__marca--alto   { background: var(--grad-rojo); }

.lectura__cuerpo { flex: 1; min-width: 0; }

.lectura__principal {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lectura__secundario {
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
}

.lectura__tag {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: var(--texto-xs);
    letter-spacing: .03em;
}

.lectura--aviso { background: var(--ambar-suave); }
.lectura--aviso:hover { background: #fdefd6; }
.lectura--alto  { background: var(--rojo-suave); }
.lectura--alto:hover  { background: #fbe3e1; }

/* -----------------------------------------------------------------------------
   SECCIÓN 11b — Ficha de empleado
   -------------------------------------------------------------------------- */

.ficha {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem;
    border-radius: var(--radio);
    background: var(--grad-marca);
    color: #fff;
    box-shadow: var(--sombra-alta);
    position: relative;
    overflow: hidden;
}

/* Halo decorativo */
.ficha::after {
    content: "";
    position: absolute;
    top: -40%; right: -8%;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,134,224,.35), transparent 70%);
    pointer-events: none;
}

.ficha__avatar {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--azul-vivo), var(--azul-medio));
    box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 6px 16px rgba(0,0,0,.25);
}

.ficha__cuerpo { flex: 1; min-width: 0; z-index: 1; }

.ficha__nombre {
    margin: 0 0 .625rem;
    font-size: var(--texto-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.ficha__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 600;
}

.chip--claro {
    background: rgba(255,255,255,.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.ficha__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.ficha__stat { display: flex; flex-direction: column; }

.ficha__stat-cifra {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ficha__stat-etq {
    font-size: var(--texto-xs);
    opacity: .8;
    margin-top: .2rem;
}

.ficha__stat--aviso .ficha__stat-cifra { color: #ffcf6b; }

/* --- Cuadrícula de prendas --- */

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

.prenda-card {
    background: var(--superficie);
    border-radius: var(--radio-sm);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--sombra);
    border: 1px solid rgba(226, 232, 240, .8);
    border-left: 5px solid var(--verde);
    transition: transform .15s, box-shadow .15s;
}

.prenda-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.prenda-card--aviso { border-left-color: var(--ambar); }

.prenda-card__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.prenda-card__tipo {
    font-weight: 800;
    font-size: var(--texto-base);
    color: var(--azul-profundo);
}

.prenda-card__estado {
    font-size: .8125rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
}

.prenda-card__estado--ok    { background: var(--verde-suave); color: var(--verde); }
.prenda-card__estado--aviso { background: var(--ambar-suave); color: var(--ambar); }

.prenda-card__meta {
    display: flex;
    gap: 1rem;
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
    margin-bottom: .625rem;
}

.prenda-card__tag {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .8125rem;
    letter-spacing: .02em;
    color: var(--tinta-suave);
    background: var(--fondo);
    padding: .4rem .6rem;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ficha { flex-direction: column; text-align: center; align-items: center; }
    .ficha__chips, .ficha__stats { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 12 — Confirmación final
   -------------------------------------------------------------------------- */

.confirmacion { text-align: center; padding: 2.5rem 1.5rem; }

.confirmacion__sello {
    width: 112px;
    height: 112px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 3.5rem;
    color: #fff;
    background: var(--grad-verde);
    box-shadow: 0 12px 32px rgba(18,128,92,.35), inset 0 2px 0 rgba(255,255,255,.3);
    animation: sello-entra .45s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes sello-entra {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

.confirmacion__sello--aviso {
    background: var(--grad-ambar);
    box-shadow: 0 12px 32px rgba(181,103,10,.35), inset 0 2px 0 rgba(255,255,255,.3);
}

.confirmacion__titulo {
    font-size: var(--texto-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
}

.confirmacion__nota {
    display: inline-block;
    margin-bottom: 1.75rem;
    padding: .5rem 1.25rem;
    background: var(--azul-claro);
    border-radius: 999px;
    font-weight: 700;
    color: var(--azul-profundo);
    box-shadow: inset 0 0 0 1px rgba(31,111,235,.15);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 13 — Accesibilidad
   -------------------------------------------------------------------------- */

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Elementos que solo tienen sentido en escritorio. Por defecto se ven; el
   bloque de "pantallas chicas" del operador los oculta en teléfono. */
.solo-escritorio { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .boton::after { display: none; }
}

@media (prefers-contrast: more) {
    :root {
        --linea: #8b98a5;
        --tinta-suave: #3d474f;
    }
    .campo__control { border-width: 3px; }
    .tarjeta, .contador { border-color: #b8c4d2; }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 14 — Pantallas chicas
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    :root {
        --texto-2xl: 2.4rem;
        --texto-xl:  1.55rem;
        --radio:     14px;
    }

    .tarjeta { padding: 1.35rem; }

    .acciones { flex-direction: column-reverse; }
    .acciones .boton { width: 100%; }

    .paso { min-width: 0; padding: .75rem; }
    .paso span:not(.paso__numero) { display: none; }

    /* -------------------------------------------------------------------------
       Barra superior más limpia en teléfono
       ---------------------------------------------------------------------- */
    /* El nombre largo de la app + el nombre del usuario se encimaban. Se centra
       la marca, se compacta el bloque de usuario y el nombre completo se deja
       para pantallas grandes (en el teléfono basta el avatar). */
    .barra { padding: .7rem 0; }

    .barra__interior { gap: .5rem; }

    .barra__titulo {
        font-size: var(--texto-base);
        line-height: 1.15;
        gap: .5rem;
        min-width: 0;
    }
    .barra__titulo::before { flex-shrink: 0; }

    .barra__usuario { gap: .5rem; }
    /* El nombre del usuario se oculta en teléfono; el avatar ya lo representa. */
    .barra__usuario > span:not(.solo-lectores) { display: none; }

    .barra__avatar { width: 38px; height: 38px; }

    /* -------------------------------------------------------------------------
       Filas de listas (movimientos, lecturas): apilar las acciones
       ---------------------------------------------------------------------- */
    /* Antes "Ver" y "Solicitar borrado" no cabían junto al texto y se encimaban
       sobre la fecha, y el número de nota se recortaba. Ahora la fila envuelve:
       marca + datos arriba, y los botones abajo a todo lo ancho. */
    .lectura { flex-wrap: wrap; }

    .lectura__acciones {
        flex-basis: 100%;
        width: 100%;
        margin-top: .25rem;
    }
    .lectura__acciones > * { flex: 1; }
    .lectura__acciones .boton--chico { width: 100%; }

    /* -------------------------------------------------------------------------
       Vista simplificada para el operador en teléfono
       ---------------------------------------------------------------------- */
    /* La barra de navegación se reduce a los enlaces visibles en móvil: el icono
       de casa (Inicio) y "Movimientos"; el resto se oculta. Otros roles
       conservan la barra completa. */
    body.es-operador .navegacion__enlace:not(.navegacion__enlace--movil) {
        display: none;
    }

    /* "Inicio" se muestra como icono de casa, sin texto. */
    body.es-operador .navegacion__enlace--casa {
        font-size: 0;
        padding: 0 1rem;
    }

    /* En la confirmación, el operador solo ve "Imprimir ticket" y
       "Registrar otro"; "Ver el detalle" queda para escritorio. */
    body.es-operador .solo-escritorio { display: none; }
}

/* El icono de casa del enlace Inicio: en móvil crece un poco y se centra sin
   texto al lado. La regla base del ::before ya lo dibuja como máscara. */
@media (max-width: 640px) {
    .navegacion__enlace--casa::before {
        width: 20px;
        height: 20px;
        margin-right: 0;
    }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 15 — Impresión
   -------------------------------------------------------------------------- */

@media print {
    .barra, .pasos, .acciones { display: none; }
    body.operador { background: #fff; font-size: 11pt; }
    .tarjeta { box-shadow: none; border: 1px solid #000; }
    .boton::after { display: none; }
}

/* -----------------------------------------------------------------------------
   SECCIÓN 16 — Escaneo con lector de código de barras (cliente Barry)
   -------------------------------------------------------------------------- */

/* El campo donde dispara el lector: grande y con foco muy visible, porque es
   donde el operador tiene que mantener la atención sin mirar la pantalla. */
.escaneo__entrada {
    font-size: var(--texto-lg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.escaneo__entrada:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 4px var(--verde-suave);
}

.escaneo__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin: 1rem 0 0.75rem;
}

.escaneo__conteo {
    font-size: var(--texto-xl);
    font-weight: 700;
    color: var(--tinta);
}

.escaneo__limpiar {
    min-height: 44px;
    padding: 0 1rem;
    font-size: var(--texto-xs);
}

/* Lista de prendas escaneadas: fichas (chips) que se acumulan. */
.escaneo__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 45vh;
    overflow-y: auto;
}

.escaneo__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.85rem;
    background: var(--verde-suave);
    color: var(--verde);
    border-radius: var(--radio-sm);
    font-size: var(--texto-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.escaneo__chip-texto {
    letter-spacing: 0.03em;
}

.escaneo__chip-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.escaneo__chip-quitar:hover,
.escaneo__chip-quitar:focus {
    background: rgba(0, 0, 0, 0.14);
}

/* Aviso visual cuando se dispara sobre una etiqueta ya escaneada. */
.escaneo__chip--repetido {
    animation: escaneo-repetido 0.6s ease;
}

@keyframes escaneo-repetido {
    0%   { background: var(--ambar); color: #fff; transform: scale(1.08); }
    100% { background: var(--verde-suave); color: var(--verde); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .escaneo__chip--repetido { animation: none; }
}

/* Chips con estado: reconocida (verde) / desconocida (rojo). */
.escaneo__chip--ok {
    background: var(--verde-suave);
    color: var(--verde);
}

.escaneo__chip--desconocido {
    background: var(--rojo-suave);
    color: var(--rojo);
}

.escaneo__chip-nombre {
    font-weight: 500;
    font-size: var(--texto-xs);
    opacity: 0.85;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Panel de la última lectura + vista de la etiqueta
   -------------------------------------------------------------------------- */

.ultima-lectura {
    margin: 1rem 0 1.25rem;
    border: 2px solid var(--linea);
    border-radius: var(--radio);
    padding: 1rem 1.25rem 1.25rem;
    background: var(--superficie);
}

.ultima-lectura--ok        { border-color: var(--verde); background: var(--verde-suave); }
.ultima-lectura--desconocida { border-color: var(--rojo);  background: var(--rojo-suave); }
.ultima-lectura--repetida  { border-color: var(--ambar); background: var(--ambar-suave); }

.ultima-lectura__estado {
    font-size: var(--texto-lg);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.ultima-lectura--ok        .ultima-lectura__estado { color: var(--verde); }
.ultima-lectura--desconocida .ultima-lectura__estado { color: var(--rojo); }
.ultima-lectura--repetida  .ultima-lectura__estado { color: var(--ambar); }

.ultima-lectura__nota {
    margin: 0.75rem 0 0;
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
}

/* La tarjeta que imita la etiqueta física de Barry. */
.etiqueta {
    background: #fff;
    color: #16202b;
    border: 1px solid #16202b;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    max-width: 420px;
}

.etiqueta__marca {
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: var(--texto-base);
    text-align: center;
    border-bottom: 1px solid #16202b;
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}

.etiqueta__datos {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.etiqueta__campo {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: var(--texto-xs);
}

.etiqueta__rotulo {
    flex: 0 0 4.5rem;
    color: #5d6b7a;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.etiqueta__valor {
    font-weight: 600;
}

.etiqueta__barras {
    width: 100%;
    height: 44px;
}

.etiqueta__barras svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #111;
}

.etiqueta__codigo {
    text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: var(--texto-base);
    margin-top: 0.25rem;
}

/* -----------------------------------------------------------------------------
   Listado de movimientos (Entradas / Salidas): acciones y paginación
   -------------------------------------------------------------------------- */

.lectura__acciones {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.lectura__acciones form {
    margin: 0;
}

/* Botón compacto para las filas de listas. */
.boton--chico {
    min-height: 48px;
    padding: 0 1.25rem;
    font-size: var(--texto-xs);
}

.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.paginacion__estado {
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
}

/* -----------------------------------------------------------------------------
   SECCIÓN 12 — Panel del administrador (pestañas por cliente)
   -------------------------------------------------------------------------- */

/* Pastilla de estado (p. ej. "Borrado pendiente" en el listado de movimientos) */
.etiqueta-estado {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 700;
    white-space: nowrap;
}

.etiqueta-estado--pendiente {
    color: var(--ambar);
    background: var(--ambar-suave);
    box-shadow: inset 0 0 0 1px rgba(181, 103, 10, .25);
}

/* Pantalla dividida: una mitad grande por cliente.
   Estilo "vidrio esmerilado" (glassmorphism): tarjetas translúcidas con
   desenfoque del fondo, borde claro y sombra suave. */
.split {
    position: relative;
    display: flex;
    gap: 1.25rem;
    min-height: 68vh;
    margin: 3.5rem 0 1rem;   /* bajadas respecto al encabezado */
}

.split[hidden] { display: none; }

/* Halos de color detrás de todo el panel. El vidrio los desenfoca, y es ESO
   lo que hace visible el efecto cristalino (sin color detrás no se aprecia). */
/* Fondo neutro y difuso detrás del panel: le da "textura" al vidrio (algo que
   desenfocar) sin meter color, como el fondo atenuado de iOS. */
.panel-fondo {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(32vw 32vw at 22% 28%, rgba(255, 255, 255, .70), transparent 60%),
        radial-gradient(30vw 30vw at 82% 22%, rgba(120, 140, 165, .45), transparent 60%),
        radial-gradient(36vw 36vw at 76% 86%, rgba(255, 255, 255, .60), transparent 60%),
        radial-gradient(28vw 28vw at 24% 82%, rgba(96, 116, 140, .40), transparent 60%),
        linear-gradient(180deg, #d3dae3 0%, #bfc9d6 100%);
}

.panel-mitad {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;         /* nombre y logo centrados */
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    cursor: pointer;
    text-align: center;
    color: var(--tinta);

    /* Vidrio esmerilado tipo iOS: blanco lechoso translúcido. */
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 28px;
    box-shadow:
        0 20px 50px rgba(28, 40, 58, .22),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}

/* Reflejo diagonal sutil del vidrio. */
.panel-mitad::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

/* El contenido va por encima del reflejo y ocupa el ancho. */
.panel-mitad__nombre,
.panel-mitad__logo,
.panel-mitad__notis,
.panel-mitad__abrir {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Indicador de que la tarjeta se abre (afordancia clara para los jefes). */
.panel-mitad__abrir {
    align-self: center;
    width: auto;
    margin-top: .25rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 700;
    color: var(--azul-profundo);
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 4px 12px rgba(28, 40, 58, .12);
}

.panel-mitad:hover .panel-mitad__abrir {
    background: #fff;
}

.panel-mitad:hover,
.panel-mitad:focus-visible {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .6);
    box-shadow:
        0 28px 64px rgba(28, 40, 58, .28),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    outline: none;
}

.panel-mitad__nombre {
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--azul-profundo);
}

/* Hueco reservado para el logo del cliente (aún no lo tienen). */
.panel-mitad__logo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.panel-mitad__logo-hueco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(120px, 30%, 180px);
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(90, 110, 135, .35);
    border-radius: 24px;
    color: var(--tinta-suave);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .65;
}

/* Notificaciones al pie: solicitudes de borrado y reportes generados. */
.panel-mitad__notis {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
}

.panel-mitad__noti {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    text-align: left;
    font-size: var(--texto-xs);
}

.panel-mitad__noti-icono {
    flex: none;
    display: inline-flex;
    color: var(--tinta-suave);
    font-size: 1.05rem;
}

/* Iconos de línea: heredan el color del texto y se camuflan con la app. */
.icono {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

.panel-mitad__noti-texto {
    flex: 1 1 auto;
    color: var(--tinta);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-mitad__noti-fecha {
    flex: none;
    color: var(--tinta-suave);
    font-size: .8rem;
}

.panel-mitad__noti--vacia {
    justify-content: center;
    color: var(--tinta-suave);
    font-weight: 600;
    background: rgba(255, 255, 255, .35);
    box-shadow: none;
}

.panel-mitad__alerta {
    position: absolute;
    z-index: 2;
    top: 1.1rem;
    right: 1.1rem;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 800;
    color: #fff;
    background: var(--rojo);
    box-shadow: 0 6px 16px rgba(198, 42, 36, .4);
}

/* Barra de acciones bajo el panel dividido (acceso a usuarios, etc.). */
.panel-acciones {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin: 1.5rem 0 2rem;
}

.panel-acciones__boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Detalle expandido de un cliente */
.panel-detalle[hidden] { display: none; }

.panel-detalle__barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}

.panel-detalle__titulo {
    margin: 0;
    font-size: var(--texto-xl);
    color: var(--azul-profundo);
}

/* Menú interno del cliente: botones grandes y claros por sección. */
.panel-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    margin-bottom: 1.25rem;
}

.panel-menu__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1.25rem;
    border: 0;
    cursor: pointer;
    border-radius: var(--radio-sm);
    font-size: var(--texto-base);
    font-weight: 700;
    color: var(--tinta-suave);
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--sombra);
    transition: transform .1s, box-shadow .15s, color .15s, background .15s;
}

.panel-menu__item:hover { transform: translateY(-2px); }

.panel-menu__item--activa {
    color: #fff;
    background: var(--grad-marca);
    box-shadow: var(--sombra-color);
}

.panel-menu__icono {
    display: inline-flex;
    font-size: 1.2rem;
    opacity: .95;
}

.panel-menu__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: var(--texto-xs);
    font-weight: 800;
    color: #fff;
    background: var(--rojo);
}

.panel-menu__item--activa .panel-menu__badge {
    background: rgba(255, 255, 255, .28);
}

.panel-seccion[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   Contadores del panel de admin — parejos y centrados
   -----------------------------------------------------------------------------
   El estilo base .contadores usa un grid auto-fit que deja la última tarjeta
   suelta a la izquierda (se ve desalineado). Aquí, SOLO dentro del panel del
   admin, se pasa a una fila flexible centrada: todas las tarjetas del mismo
   ancho y alto, el bloque centrado en la pantalla y cada renglón centrado
   (incluido el último). No se tocan colores ni el diseño de la tarjeta: solo su
   acomodo. La vista de avisos del operador usa .contadores fuera de
   .panel-seccion, así que no se ve afectada. */
.panel-seccion .contadores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    max-width: 1000px;
    margin-inline: auto;
}

.panel-seccion .contadores .contador {
    flex: 0 1 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 108px;
}

/* En móvil se apilan a todo lo ancho para que no queden angostas. */
@media (max-width: 520px) {
    .panel-seccion .contadores .contador { flex-basis: 100%; }
}

/* En pantallas angostas, las mitades se apilan. */
@media (max-width: 640px) {
    .split {
        flex-direction: column;
        min-height: 0;
    }

    .panel-mitad {
        min-height: 40vh;
    }
}

/* Tarjeta de una solicitud de borrado en la bandeja del admin */
.solicitud {
    border-radius: var(--radio-sm);
    padding: 1rem 1.1rem;
    background: var(--ambar-suave);
    box-shadow: inset 0 0 0 1px rgba(181, 103, 10, .2);
    margin-bottom: .75rem;
}

.solicitud__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .4rem;
}

.solicitud__nota { font-weight: 800; color: var(--tinta); }

.solicitud__meta {
    font-size: var(--texto-xs);
    color: var(--tinta-suave);
}

.solicitud__motivo {
    margin: .5rem 0 .75rem;
    padding: .5rem .7rem;
    border-radius: var(--radio-sm);
    background: rgba(255, 255, 255, .7);
    font-size: var(--texto-xs);
    color: var(--tinta);
}

.solicitud__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.solicitud__acciones form { margin: 0; }