/* =============================================================================================
   Caja de herramientas de JECSA — hoja de estilos

   La marca va en el marco y el color de los datos va en el contenido. El menú lateral es azul noche
   con el turquesa de JECSA para lo activo; dentro de la página el marco es claro y neutro, y el único
   color saturado sigue siendo el estado de las cosas (el semáforo del plazo, lo vencido, lo pagado),
   porque quien mira esta pantalla horas necesita ver de un vistazo qué pide atención.
   ============================================================================================= */

:root {
    /* La marca (decisión del dueño, 2026-10-19): azul profundo y turquesa. */
    --marca-noche: #15294a;
    --marca-noche-claro: #1f3a66;
    --marca-turquesa: #0ea5a4;
    --marca-turquesa-oscuro: #0b8584;
    --marca-turquesa-suave: #e6f6f6;

    /* Neutros fríos del contenido. */
    --fondo: #f4f6f9;
    --superficie: #ffffff;
    --superficie-alt: #f8fafc;
    --borde: #e2e7ee;
    --borde-fuerte: #cdd5df;

    --tinta: #152033;
    --tinta-media: #536173;
    --tinta-suave: #8794a5;

    /* El semáforo del plazo y del estado. */
    --holgado: #16794a;
    --holgado-fondo: #e8f5ee;
    --ajustado: #a35a00;
    --ajustado-fondo: #fdf1e3;
    --vencido: #b42318;
    --vencido-fondo: #fdeceb;

    /* Azul de estructura: enlaces, foco y encabezados. */
    --estructura: #24446e;
    --estructura-suave: #eaeff6;

    --radio: 8px;
    --sombra: 0 1px 2px rgba(21, 32, 51, .05), 0 2px 6px rgba(21, 32, 51, .05);

    --fuente: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Los códigos y los tiempos son identificadores y cifras, no prosa: van monoespaciados y
       tabulares para que las columnas se puedan comparar de un vistazo. */
    --fuente-dato: ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", monospace;

    /* Radzen (tablas, íconos) con los mismos colores. */
    --rz-primary: var(--marca-turquesa);
    --rz-primary-light: #22b8b7;
    --rz-primary-lighter: rgba(14, 165, 164, .14);
    --rz-primary-dark: var(--marca-turquesa-oscuro);
    --rz-primary-darker: #096c6b;
    --rz-text-font-family: var(--fuente);
    --rz-border-radius: var(--radio);
    --rz-grid-header-background-color: var(--superficie-alt);
    --rz-grid-header-color: var(--tinta-media);
    --rz-grid-header-font-size: 12px;
    --rz-grid-cell-font-size: 13.5px;
    --rz-grid-hover-background-color: var(--marca-turquesa-suave);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 19px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

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

:focus-visible {
    outline: 2px solid var(--estructura);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------- Estructura ---- */

.marco {
    display: grid;
    grid-template-columns: 236px 1fr;
    min-height: 100vh;
}

.lateral {
    background: linear-gradient(180deg, var(--marca-noche) 0%, #102140 100%);
    color: #d6deea;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; }
.lateral-cerrar { display: none; }
.lateral-nav { display: flex; flex-direction: column; gap: 6px; }

/* El logo: la nube con la etiqueta <J/> y el nombre en Montserrat, con la sección debajo. Siempre sobre fondo oscuro. */
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.logo-signo { width: 52px; height: 28px; flex: none; }
.logo-texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo-nombre { font-family: Montserrat, var(--fuente); font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.logo-sub { font-family: Montserrat, var(--fuente); font-size: 11.5px; font-weight: 500; color: #9fd8f3; letter-spacing: .02em; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-enlace {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radio);
    color: #c3cfdf;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.nav-enlace .rzi { font-size: 19px; color: #8fb3d9; }
.nav-texto { flex: 1; }
.nav-enlace:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-enlace:hover .rzi { color: #fff; }

.nav-enlace.activo {
    background: rgba(14, 165, 164, .18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--marca-turquesa);
}
.nav-enlace.activo .rzi { color: var(--marca-turquesa); }

.nav-cuenta {
    font-family: var(--fuente-dato);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.nav-cuenta.alerta { background: var(--vencido); }

.nav-grupo {
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8fb3d9;
}

/* Las secciones del menú se pliegan; la de la página actual llega abierta. */
.nav-plegable { display: block; }
.nav-plegable > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radio);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nav-plegable > summary .rzi { font-size: 17px; }
.nav-plegable > summary span { flex: 1; }
.nav-plegable > summary::-webkit-details-marker { display: none; }
.nav-plegable > summary::after { content: "\203A"; font-size: 15px; transition: transform .15s; }
.nav-plegable[open] > summary::after { transform: rotate(90deg); }
.nav-plegable > summary:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-plegable[open] > summary { margin-bottom: 4px; }

.lateral-pie { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; display: grid; gap: 10px; }

.agente-actual { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radio); color: inherit; }
.agente-actual:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.agente-avatar {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marca-turquesa); color: #fff; font-weight: 700; font-size: 13px;
}
.agente-datos { display: flex; flex-direction: column; min-width: 0; }
.agente-nombre { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agente-nivel { font-size: 11.5px; color: #8fb3d9; }
.boton.boton-salir {
    width: 100%; justify-content: center;
    background: transparent; color: #c3cfdf; border-color: rgba(255, 255, 255, .18);
}
.boton.boton-salir:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* La barra de arriba y el velo solo existen en el celular. */
.menu-movil-casilla { display: none; }
.barra-movil, .velo { display: none; }

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

.cabecera {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
}
.cabecera h1 { font-size: 21px; color: var(--marca-noche); }

.contenido { padding: 20px 24px 40px; }

/* ------------------------------------------------------------------------------- Bandeja ---- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.filtro {
    padding: 5px 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 20px;
    background: var(--superficie);
    color: var(--tinta-media);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}

.filtro:hover { border-color: var(--tinta-suave); color: var(--tinta); }

.filtro.activo {
    background: var(--marca-noche);
    border-color: var(--marca-noche);
    color: #fff;
}

.tabla-caja {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

table.bandeja { width: 100%; border-collapse: collapse; }

.bandeja thead th {
    text-align: left;
    padding: 9px 14px;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borde);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.bandeja tbody tr { border-bottom: 1px solid var(--borde); cursor: pointer; }
.bandeja tbody tr:last-child { border-bottom: none; }
.bandeja tbody tr:hover { background: var(--superficie-alt); }

.bandeja td { padding: 10px 14px; vertical-align: middle; }

.codigo {
    font-family: var(--fuente-dato);
    font-size: 11.5px;
    color: var(--tinta-media);
    white-space: nowrap;
}

.asunto { font-weight: 500; }

.origen {
    font-size: 11.5px;
    color: var(--tinta-suave);
    font-family: var(--fuente-dato);
}

.sin-asignar { color: var(--tinta-suave); font-style: italic; }

/* ------------------------------------------------------- El medidor de plazo (la firma) ----- */

/* Es la única pieza a la que se le permite gritar. Muestra cuánto del tiempo prometido se ha
   consumido, porque "vence a las 18:31" no dice nada cuando hay cuarenta filas y "queda 8 %" sí. */

.plazo { display: flex; flex-direction: column; gap: 3px; min-width: 92px; }

.plazo-texto {
    font-family: var(--fuente-dato);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.plazo-riel {
    height: 3px;
    background: var(--borde);
    border-radius: 2px;
    overflow: hidden;
}

.plazo-barra { height: 100%; border-radius: 2px; }

.holgado .plazo-texto { color: var(--holgado); }
.holgado .plazo-barra { background: var(--holgado); }
.ajustado .plazo-texto { color: var(--ajustado); }
.ajustado .plazo-barra { background: var(--ajustado); }
.vencido .plazo-texto { color: var(--vencido); font-weight: 600; }
.vencido .plazo-barra { background: var(--vencido); }
.cumplido .plazo-texto { color: var(--tinta-suave); }
.cumplido .plazo-barra { background: var(--borde-fuerte); }

/* -------------------------------------------------------------------------------- Marcas ---- */

.marca-estado, .marca-urgencia {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 550;
    white-space: nowrap;
}

/* Los estados son estructura, no alarma: se distinguen por peso y por un punto, no por color. */
.marca-estado { background: var(--superficie-alt); border: 1px solid var(--borde); color: var(--tinta-media); }
.marca-estado.abierto { border-color: var(--borde-fuerte); color: var(--tinta); font-weight: 600; }
.marca-estado.cerrado { color: var(--tinta-suave); }

.marca-urgencia { border: 1px solid transparent; }
.urg-critica { background: var(--vencido-fondo); color: var(--vencido); }
.urg-alta    { background: var(--ajustado-fondo); color: var(--ajustado); }
.urg-media   { background: var(--superficie-alt); color: var(--tinta-media); border-color: var(--borde); }
.urg-baja    { background: transparent; color: var(--tinta-suave); border-color: var(--borde); }

/* -------------------------------------------------------------------------------- Detalle --- */

.detalle { display: grid; grid-template-columns: 1fr 296px; gap: 18px; align-items: start; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta-cabeza {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tarjeta-cuerpo { padding: 18px; }

.hilo { display: flex; flex-direction: column; gap: 14px; }

.mensaje { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.mensaje.de-agente { background: var(--estructura-suave); border-color: #d6e0ee; }
.mensaje.de-usuario { background: var(--superficie); }

/* Las notas internas se marcan con un rayado sutil: hay que poder ver de un golpe que eso no
   salió hacia el cliente. */
.mensaje.interna {
    background: repeating-linear-gradient(135deg, #fcfaf5, #fcfaf5 9px, #f8f5ee 9px, #f8f5ee 18px);
    border-color: #ece5d6;
}

.mensaje-cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.mensaje-autor { font-size: 12.5px; font-weight: 600; }
.mensaje-fecha { font-family: var(--fuente-dato); font-size: 11px; color: var(--tinta-suave); }
.mensaje-cuerpo { white-space: pre-wrap; font-size: 13.5px; }

.etiqueta-interna {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #8a6d2f;
}

.dato { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.dato:last-child { border-bottom: none; }
.dato-clave { font-size: 12.5px; color: var(--tinta-suave); }
.dato-valor { font-size: 12.5px; text-align: right; }
.dato-valor.mono { font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------ Controles --- */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.boton:hover:not(:disabled) { background: var(--superficie-alt); border-color: var(--tinta-suave); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton .rzi { font-size: 18px; }

.boton.principal-accion {
    background: var(--marca-turquesa);
    border-color: var(--marca-turquesa);
    color: #fff;
    font-weight: 600;
}
.boton.principal-accion:hover:not(:disabled) { background: var(--marca-turquesa-oscuro); border-color: var(--marca-turquesa-oscuro); }

.boton.peligro { color: var(--vencido); border-color: #e8c4c1; }
.boton.peligro:hover:not(:disabled) { background: var(--vencido-fondo); }

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.campo label { font-size: 12.5px; font-weight: 550; color: var(--tinta-media); }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input[type=month], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13.5px;
}

textarea { resize: vertical; min-height: 92px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-turquesa);
    box-shadow: 0 0 0 3px var(--marca-turquesa-suave);
}

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.casilla { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tinta-media); }
.casilla input { width: auto; }

/* Campos que van en la misma línea: los minutos junto a en qué se fueron. */
.fila-campos { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.fila-campos .campo { flex: 1; min-width: 130px; }

/* Explica qué hace cada botón sin obligar a probarlos para averiguarlo. */
.pie-ayuda {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tinta-suave);
}
.pie-ayuda strong { color: var(--tinta-media); font-weight: 600; }

/* ------------------------------------------------------------------------------ Adjuntos --- */

.adjuntos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

.adjunto {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    font-size: 12.5px;
    color: var(--tinta-media);
    text-decoration: none;
}
.adjunto:hover { border-color: var(--estructura); color: var(--estructura); }
.adjunto-peso { color: var(--tinta-suave); font-size: 11.5px; }

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

.aviso { padding: 9px 13px; border-radius: var(--radio); font-size: 13px; margin-bottom: 14px; }
.aviso.bien { background: var(--holgado-fondo); color: var(--holgado); }
.aviso.info { background: var(--estructura-suave); color: var(--estructura); }
.aviso.mal { background: var(--vencido-fondo); color: var(--vencido); }

.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-suave); }
.vacio-titulo { font-size: 14px; color: var(--tinta-media); margin-bottom: 4px; }

/* ---------------------------------------------------------------------------------- Login --- */

.acceso {
    display: grid; place-items: center; min-height: 100vh; padding: 20px;
    background: radial-gradient(circle at 20% 10%, #1f3a66 0%, var(--marca-noche) 45%, #0c1a33 100%);
}
.acceso .tarjeta { box-shadow: 0 18px 50px rgba(0, 0, 0, .25); border: none; }
.logo-acceso { margin-bottom: 14px; }
.logo-acceso .logo-signo { width: 78px; height: 42px; }
.logo-acceso .logo-nombre { font-size: 22px; }
.acceso-caja { width: 100%; max-width: 348px; }
.acceso-marca { text-align: center; margin-bottom: 22px; }
.acceso-titulo { font-size: 21px; font-weight: 650; letter-spacing: -.02em; color: #fff; }
.acceso-sub { font-size: 13px; color: #a9c3e0; margin-top: 3px; }
.acceso .acceso-caja > p, .acceso .acceso-caja > a, .acceso .acceso-caja > .pie-ayuda { color: #c3cfdf; }

/* ------------------------------------------------------------------------------ Adaptable --- */

@media (max-width: 900px) {
    /* La barra de arriba mide lo suyo y el contenido toma el resto (con poco contenido, la cuadrícula estiraba la barra). */
    .marco { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
    .barra-movil {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 30;
        padding: 10px 14px;
        background: var(--marca-noche);
        color: #fff;
    }
    .barra-movil-boton, .lateral-cerrar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radio); cursor: pointer; color: #fff; }
    .barra-movil-boton:hover, .lateral-cerrar:hover { background: rgba(255, 255, 255, .1); }
    .barra-movil-boton .rzi, .lateral-cerrar .rzi { font-size: 24px; }
    .lateral {
        position: fixed; z-index: 50; left: 0; top: 0; bottom: 0;
        width: min(300px, 86vw); height: 100%;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    }
    .menu-movil-casilla:checked ~ .lateral { transform: none; }
    .menu-movil-casilla:checked ~ .velo { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 20, 38, .45); }
    .detalle { grid-template-columns: 1fr; }
    .tabla-caja { overflow-x: auto; }
    .cabecera { padding: 14px 16px; }
    .contenido { padding: 16px 14px 32px; }
}

/* -------------------------------------------------------------------------------- Modal ---- */
/* Crear y editar se abren aquí (Components/Modal.razor). En el celular ocupa la pantalla. */

.modal-velo {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 20, 38, .5);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px 24px; overflow-y: auto;
    animation: modal-aparece .15s ease-out;
}
.modal-ventana {
    width: 100%; max-width: 640px;
    background: var(--superficie); color: var(--tinta);
    border-radius: 12px; box-shadow: 0 18px 50px rgba(10, 20, 38, .3);
    display: flex; flex-direction: column; max-height: 88vh; outline: none;
}
.modal-ventana.ancha { max-width: 900px; }
.modal-cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--borde);
    background: var(--marca-noche); color: #fff; border-radius: 12px 12px 0 0;
}
.modal-cabeza h2 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.modal-cerrar {
    border: 0; background: transparent; color: #fff; cursor: pointer;
    width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
}
.modal-cerrar:hover, .modal-cerrar:focus-visible { background: rgba(255, 255, 255, .14); }
.modal-cuerpo { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.modal-pie {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid var(--borde); background: var(--superficie-alt);
    border-radius: 0 0 12px 12px;
}
@keyframes modal-aparece { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
    .modal-velo { padding: 0; }
    .modal-ventana, .modal-ventana.ancha { max-width: none; min-height: 100%; max-height: none; border-radius: 0; }
    .modal-cabeza { border-radius: 0; position: sticky; top: 0; z-index: 1; }
    .modal-pie { border-radius: 0; position: sticky; bottom: 0; }
    .modal-pie .boton { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------------------ Registro ---- */

.registro tbody tr { cursor: default; }
.registro td { vertical-align: top; }
.registro pre, .rz-data-grid.registro pre {
    margin: 0;
    font-family: var(--fuente-dato);
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
}
.registro .nivel { font-size: 11.5px; white-space: nowrap; color: var(--tinta-media); }
.registro .nivel-wrn .nivel { color: var(--ajustado); font-weight: 600; }
.registro .nivel-err .nivel, .registro .nivel-ftl .nivel { color: var(--vencido); font-weight: 600; }
.registro .nivel-err, .registro .nivel-ftl { background: var(--vencido-fondo); }

/* -------------------------------------------------------------------------------- Manual ---- */

.manual { max-width: 860px; padding: 22px 28px; line-height: 1.6; font-size: 14px; }
.manual h2 { font-size: 18px; margin: 28px 0 8px; color: var(--estructura); }
.manual h2:first-child { margin-top: 0; }
.manual h3 { font-size: 15px; margin: 20px 0 6px; }
.manual p, .manual ul, .manual ol { margin: 0 0 10px; }
.manual ul, .manual ol { padding-left: 22px; }
.manual li { margin-bottom: 3px; }
.manual img { display: block; max-width: 100%; height: auto; margin: 10px 0 16px; border: 1px solid var(--borde); border-radius: var(--radio); }
.manual blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--estructura); background: var(--estructura-suave); }
.manual table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.manual th, .manual td { border: 1px solid var(--borde); padding: 6px 9px; text-align: left; vertical-align: top; }
.manual th { background: var(--superficie-alt); }
.manual code { font-family: var(--fuente-dato); font-size: 12.5px; background: var(--superficie-alt); padding: 1px 4px; border-radius: 3px; }
.manual hr { border: 0; border-top: 1px solid var(--borde); margin: 26px 0; }

/* ---------------------------------------------------------------- Secciones Admin / Soporte (A2) ---- */

.nav-secciones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .07); border-radius: 10px; }
.nav-seccion { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; border-radius: 7px; font-weight: 600; font-size: 13px; color: #c3cfdf; }
.nav-seccion .rzi { font-size: 17px; }
.nav-seccion:hover { text-decoration: none; color: #fff; }
.nav-seccion.activo { background: var(--marca-turquesa); color: #fff; }

.elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.elegir-opcion { display: block; color: inherit; }
.elegir-opcion:hover { text-decoration: none; border-color: var(--estructura); }
.elegir-opcion h2 { margin-bottom: 6px; color: var(--estructura); }
.elegir-opcion p { margin: 0; color: var(--tinta-media); }

/* ---------------------------------------------------------------- Página de la empresa (A2) ---- */

.publico {
    --publico-fuente: "Poppins", var(--fuente);
    --publico-noche: #0f1f3a;
    --publico-noche-honda: #0a1630;
    --publico-gris: #f9fafb;
    --publico-borde: #e5e7eb;
    --publico-tinta: #1f2937;
    --publico-texto: #4b5563;
    /* La página pública usa los azules del logo (2026-10-22); la caja por dentro sigue con su turquesa. */
    --marca-turquesa: #1f6fb8;
    --marca-turquesa-oscuro: #1b4f9c;
    --marca-turquesa-suave: #e3f2fb;
    --publico-celeste: #36b5e8;
    min-height: 100vh; display: flex; flex-direction: column;
    background: #fff; color: var(--publico-tinta);
    font-family: var(--publico-fuente); font-size: 16px; line-height: 1.6;
}
.publico main { flex: 1; width: 100%; }
.publico h1, .publico h2, .publico h3 { font-family: var(--publico-fuente); color: var(--publico-tinta); }
.publico a { color: var(--marca-turquesa-oscuro); }
.publico-ancho { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.publico-acento { color: var(--marca-turquesa); }
.publico-portada .publico-acento, .publico-llamado .publico-acento { color: var(--publico-celeste); }

/* La cabecera es oscura y queda arriba al bajar: sigue a la portada sin costura. */
.publico-cabecera { position: sticky; top: 0; z-index: 20; background: var(--publico-noche); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.publico-cabecera-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.publico-marca:hover { text-decoration: none; }
.publico-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.publico-nav a:not(.publico-boton) { color: #cbd5e1; font-size: 14.5px; font-weight: 500; }
.publico-nav a:not(.publico-boton):hover { color: #fff; text-decoration: none; }

.publico-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: 8px; border: 1px solid transparent;
    font-family: var(--publico-fuente); font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.publico-boton .rzi { font-size: 20px; }
.publico-boton:hover { text-decoration: none; transform: translateY(-1px); }
.publico a.publico-boton.relleno, .publico-boton.relleno { background: var(--marca-turquesa); color: #fff; box-shadow: 0 4px 15px rgba(31, 111, 184, .3); }
.publico-boton.relleno:hover { background: var(--marca-turquesa-oscuro); }
.publico a.publico-boton.contorno, .publico-boton.contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.publico-boton.contorno:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.publico-cabecera .publico-boton { padding: 8px 18px; font-size: 14px; }

/* Portada: la noche de la marca con un brillo turquesa y una retícula muy suave (no hay foto propia todavía). */
.publico-portada {
    color: #f9fafb; padding: 120px 0 112px;
    background:
        radial-gradient(circle at 85% 15%, rgba(54, 181, 232, .24), transparent 42%),
        radial-gradient(circle at 10% 90%, rgba(36, 68, 110, .55), transparent 45%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(60deg, var(--publico-noche), var(--publico-noche-honda));
}
.publico-portada h1 { color: #fff; font-size: clamp(34px, 6vw, 62px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; max-width: 880px; margin: 0 0 22px; }
.publico-portada p { color: #d1d9e6; font-size: 18px; max-width: 620px; margin: 0 0 34px; }
.publico-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.publico-acciones.centradas { justify-content: center; }

.publico-seccion { padding: 96px 0; background: #fff; }
.publico-seccion.publico-suave { background: var(--publico-gris); }
.publico-seccion h2, .publico-llamado h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 18px; }
.publico-intro p, .publico-centro p { color: var(--publico-texto); font-size: 16.5px; }
.publico-centro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.publico-dos-columnas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.publico-nota { color: var(--publico-texto); margin: 0 0 16px; }

.publico-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.publico-producto { background: var(--publico-gris); border: 1px solid var(--publico-borde); border-radius: 12px; padding: 24px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.publico-producto:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 31, 58, .08); border-color: #cfe3f3; }
.publico-icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--marca-turquesa-suave); color: var(--marca-turquesa-oscuro); font-size: 24px; margin-bottom: 14px; }
.publico-producto-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.publico-producto h3 { font-size: 17.5px; font-weight: 600; margin: 0; }
.publico-producto p { margin: 0 0 12px; color: var(--publico-texto); font-size: 14.5px; }
.publico-producto a { font-weight: 600; font-size: 14.5px; }
.publico-sello { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--estructura-suave); color: var(--estructura); white-space: nowrap; }
.publico-sello.disponible { background: var(--holgado-fondo); color: var(--holgado); }

/* Cómo trabajamos: una línea de tiempo con el número a la izquierda. */
.publico-pasos { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 22px; position: relative; }
.publico-pasos::before { content: ""; position: absolute; left: 24px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--marca-turquesa), var(--publico-borde)); }
.publico-pasos li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 24px; align-items: start; position: relative; }
.publico-paso-numero { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--marca-turquesa); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 6px #fff; }
.publico-paso { background: var(--publico-gris); border: 1px solid var(--publico-borde); border-radius: 12px; padding: 22px 30px; }
.publico-paso h3 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.publico-paso p { margin: 0; color: var(--publico-texto); }

.publico-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.publico-ventajas li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--publico-borde); border-radius: 12px; padding: 20px 22px; }
.publico-ventajas .rzi { flex: none; font-size: 26px; color: var(--marca-turquesa); }
.publico-ventajas b { display: block; font-weight: 600; margin-bottom: 2px; }
.publico-ventajas span { color: var(--publico-texto); font-size: 14.5px; }
.publico-intro .publico-boton { margin-top: 10px; }

.publico-formulario { background: #fff; border: 1px solid var(--publico-borde); border-radius: 14px; padding: 28px; box-shadow: 0 12px 34px rgba(15, 31, 58, .06); }
.publico-formulario .campo label { font-family: var(--publico-fuente); font-weight: 500; color: var(--publico-tinta); }
.publico-formulario input[type=text], .publico-formulario input[type=email], .publico-formulario input[type=tel], .publico-formulario select, .publico-formulario textarea {
    width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 8px; border: 1px solid #d1d5db; font-family: var(--publico-fuente); font-size: 15px; background: #fff; color: var(--publico-tinta);
}
.publico-formulario input[type=tel]:focus { outline: none; border-color: var(--marca-turquesa); box-shadow: 0 0 0 3px var(--marca-turquesa-suave); }
.publico-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 14px; }
.publico-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.publico-autorizo { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 18px; font-size: 13.5px; color: var(--publico-texto); }
.publico-autorizo input { margin-top: 4px; }
.publico-contacto { display: grid; gap: 14px; margin-top: 26px; }
.publico-dato { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; }

.publico-llamado { background: var(--publico-noche); color: #f9fafb; padding: 96px 0; }
.publico-llamado h2 { color: #fff; }
.publico-llamado p { color: #cbd5e1; font-size: 17px; margin: 0 auto 30px; max-width: 620px; }
.publico-llamado .publico-centro { margin-bottom: 0; }

.publico-pie { background: var(--publico-noche-honda); color: #9ca3af; padding: 64px 0 0; font-size: 14.5px; }
.publico-pie-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; padding-bottom: 40px; }
.publico-pie p { margin: 14px 0 0; max-width: 320px; }
.publico-pie h3 { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.publico-pie a, .publico-pie span:not(.logo):not(.logo-texto):not(.logo-nombre):not(.logo-sub) { display: block; color: #9ca3af; margin-bottom: 8px; overflow-wrap: anywhere; }
.publico-pie a:hover { color: #fff; text-decoration: none; }
.publico-pie-legal { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 22px; padding-bottom: 26px; font-size: 13px; text-align: center; }

.publico-texto { max-width: 800px; margin: 0 auto; padding: 64px 16px; box-sizing: border-box; }
.publico-texto h1 { font-size: 32px; font-weight: 700; margin-bottom: 6px; }
.publico-texto h2 { font-size: 19px; font-weight: 600; margin: 26px 0 6px; }
.publico-texto p, .publico-texto li { color: var(--publico-texto); }

@media (max-width: 900px) {
    .publico-dos-columnas { grid-template-columns: 1fr; gap: 36px; }
    .publico-pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .publico-nav { gap: 14px; }
    .publico-nav a:not(.publico-boton) { display: none; }
    .publico-portada { padding: 72px 0 68px; }
    .publico-portada p { font-size: 16.5px; }
    .publico-seccion, .publico-llamado { padding: 64px 0; }
    .publico-rejilla { grid-template-columns: 1fr; }
    .publico-pasos::before { left: 19px; }
    .publico-pasos li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
    .publico-paso-numero { width: 40px; height: 40px; font-size: 13px; }
    .publico-paso { padding: 18px 20px; }
    .publico-formulario { padding: 20px; }
    .publico-pie-rejilla { grid-template-columns: 1fr; }
    .publico-boton { width: 100%; }
    .publico-cabecera .publico-boton { width: auto; }
}
.publico h1:focus { outline: none; }

/* C3: los indicadores de la empresa. Cifras grandes y una nota; el color solo para lo que pide atención. */
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.indicador { padding: 14px 16px; }
.indicador-nombre { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.indicador-nombre .rzi { font-size: 18px; color: var(--marca-turquesa-oscuro); }
.indicador-valor { font-size: 24px; font-weight: 650; margin: 6px 0 4px; color: var(--tinta); }
.indicador-nota { font-size: 12.5px; color: var(--tinta-media); }
.tope-riel { height: 8px; border-radius: 4px; background: var(--superficie-alt); border: 1px solid var(--borde); overflow: hidden; margin: 4px 0 18px; }
.tope-barra { height: 100%; background: var(--holgado); }
.tope-barra.alto { background: var(--vencido); }
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; }
.mes-columna { height: 90px; display: flex; align-items: flex-end; background: var(--superficie-alt); border-radius: 3px; }
.mes-barra { width: 100%; background: var(--estructura-suave); border-top: 2px solid var(--estructura); border-radius: 3px 3px 0 0; }
.mes.actual .mes-barra { background: var(--estructura); }
.mes-nombre { font-size: 11px; color: var(--tinta-suave); text-align: center; margin-top: 4px; text-transform: capitalize; }

/* ------------------------------------------------------------------ Rediseño (2026-10-19) ---- */

/* Encabezado de página con ícono: .cabecera > .titulo-pagina */
.titulo-pagina { display: flex; align-items: center; gap: 12px; min-width: 0; }
.titulo-pagina > .rzi {
    font-size: 22px; width: 40px; height: 40px; flex: none; border-radius: 10px;
    background: var(--marca-turquesa-suave); color: var(--marca-turquesa-oscuro);
}
.titulo-pagina p, .cabecera p { margin: 2px 0 0; color: var(--tinta-media); font-size: 13px; }

/* Tarjetas de resumen arriba de cada página: lo que hay que mirar primero. */
.resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.resumen-tarjeta {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.resumen-tarjeta > .rzi {
    font-size: 22px; width: 42px; height: 42px; flex: none; border-radius: 10px;
    background: var(--estructura-suave); color: var(--estructura);
}
.resumen-tarjeta.turquesa > .rzi { background: var(--marca-turquesa-suave); color: var(--marca-turquesa-oscuro); }
.resumen-tarjeta.alerta > .rzi { background: var(--vencido-fondo); color: var(--vencido); }
.resumen-tarjeta.aviso > .rzi { background: var(--ajustado-fondo); color: var(--ajustado); }
.resumen-tarjeta.bien > .rzi { background: var(--holgado-fondo); color: var(--holgado); }
.resumen-valor { font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumen-nombre { font-size: 12.5px; color: var(--tinta-media); }

/* Las tablas de Radzen dentro de una tarjeta: sin doble borde. */
.tarjeta .rz-data-grid { border: none; border-radius: 0 0 var(--radio) var(--radio); }
.rz-data-grid { font-family: var(--fuente); }
.rz-grid-table thead th .rz-column-title-content { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: 11.5px; }
.rz-data-grid .acciones-fila { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tabla-busqueda { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.tabla-busqueda input[type=text], .tabla-busqueda input[type=search] { flex: 1 1 220px; max-width: 360px; }
.tabla-busqueda .rzi { color: var(--tinta-suave); }

/* Sellos de estado en las tablas. */
.sello { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--superficie-alt); color: var(--tinta-media); border: 1px solid var(--borde); }
.sello.bien { background: var(--holgado-fondo); color: var(--holgado); border-color: transparent; }
.sello.aviso { background: var(--ajustado-fondo); color: var(--ajustado); border-color: transparent; }
.sello.mal { background: var(--vencido-fondo); color: var(--vencido); border-color: transparent; }
.sello.info { background: var(--estructura-suave); color: var(--estructura); border-color: transparent; }

.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

@media (max-width: 600px) {
    .resumen { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .resumen-tarjeta { padding: 10px 12px; gap: 8px; }
    .resumen-tarjeta > .rzi { width: 34px; height: 34px; font-size: 19px; }
    .resumen-valor { font-size: 17px; }
}

/* Dos tarjetas lado a lado (formularios); una sobre otra en pantallas angostas. */
.rejilla-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* Subtítulo de una sección dentro de una tarjeta, con su ícono. */
.subtitulo { display: flex; align-items: center; gap: 6px; margin: 22px 0 10px; font-size: 14px; color: var(--marca-noche); }
.subtitulo .rzi { font-size: 18px; color: var(--marca-turquesa-oscuro); }
.subtitulo-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
.subtitulo-con-accion .subtitulo { margin: 0; }

/* Las opciones de las portadas (Admin, Elegir) con su ícono. */
.elegir-icono {
    font-size: 24px; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px;
    background: var(--marca-turquesa-suave); color: var(--marca-turquesa-oscuro);
}
.elegir-opcion { transition: border-color .12s, box-shadow .12s, transform .12s; }
.elegir-opcion:hover { box-shadow: 0 6px 18px rgba(21, 41, 74, .1); transform: translateY(-1px); }

.rz-data-grid.registro td { vertical-align: top; }
.rz-data-grid.registro .nivel-err > td, .rz-data-grid.registro .nivel-ftl > td { background: var(--vencido-fondo); }

/* En la bandeja, toda la fila abre el ticket. */
.rz-data-grid.bandeja-tickets tbody tr { cursor: pointer; }

/* En el celular las tablas muestran lo esencial: las columnas secundarias se esconden y los botones de las filas
   quedan solo con su ícono (el texto sigue en el título de la tabla o en el panel que abren). */
@media (max-width: 600px) {
    .rz-data-grid .solo-escritorio { display: none; }
    /* Los anchos fijos de las columnas son para escritorio: en el celular cada columna toma lo que necesita. */
    .rz-data-grid .rz-grid-table { table-layout: auto !important; width: 100% !important; min-width: 0 !important; }
    .rz-data-grid .rz-grid-table col { width: auto !important; min-width: 0 !important; }
    .rz-data-grid .rz-grid-table th, .rz-data-grid .rz-grid-table td { width: auto !important; min-width: 0 !important; max-width: none !important; }
    .rz-data-grid .rz-grid-table td { white-space: normal; }
    .rz-data-grid .rz-cell-data { white-space: normal !important; }
    .rz-data-grid .acciones-fila .boton { font-size: 0; gap: 0; padding: 7px 9px; }
    .rz-data-grid .acciones-fila .boton .rzi { font-size: 19px; }
    .rz-data-grid .acciones-fila input, .rz-data-grid .acciones-fila select { max-width: 120px; }
    .tabla-busqueda { padding: 10px 12px; }
    .tarjeta-cabeza { padding: 12px 14px; flex-wrap: wrap; }
    .tarjeta-cuerpo { padding: 14px; }
}