/* =========================================================================
   MyContsys Web — sistema de diseño compartido.
   Sin frameworks, sin build step, sin fuentes externas (fuente del sistema
   para que funcione igual de bien instalado sin acceso a internet).
   ========================================================================= */

:root {
    --azul-950: #0b1c2e;
    --azul-900: #0f2a45;
    --azul-800: #14396b;
    --azul-700: #1c4a86;
    --azul-600: #275ea3;
    --azul-100: #e7edf5;
    --azul-050: #f2f5fa;

    --verde-700: #167a4d;
    --verde-600: #1f9d63;
    --verde-500: #2bb877;
    --verde-100: #e2f6ec;

    --gris-900: #1b2733;
    --gris-700: #445261;
    --gris-500: #66757f;
    --gris-300: #c3ccd3;
    --gris-200: #dde3e8;
    --gris-100: #eef1f4;
    --gris-050: #f5f7f9;

    --rojo-600: #c0392b;
    --rojo-100: #fdecea;
    --ambar-600: #a5720a;
    --ambar-100: #fff3d6;

    --celeste-claro: #e3f2fb;
    --celeste-borde: #bfe1f2;

    --fuente: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radio-sm: 6px;
    --radio-md: 10px;
    --radio-lg: 16px;
    --radio-pill: 999px;

    --sombra-sm: 0 1px 2px rgba(15, 30, 50, .06), 0 1px 1px rgba(15, 30, 50, .04);
    --sombra-md: 0 4px 14px rgba(15, 30, 50, .08), 0 1px 3px rgba(15, 30, 50, .06);
    --sombra-lg: 0 18px 40px rgba(11, 28, 46, .16), 0 4px 12px rgba(11, 28, 46, .08);

    --ancho-sidebar: 340px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    background: var(--gris-050);
    color: var(--gris-900);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button { font-family: inherit; }

/* -------------------------------------------------------------------------
   Monograma de marca (usado en portal, login y topbar)
   ------------------------------------------------------------------------- */

.monograma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, var(--azul-800), var(--verde-600));
    border-radius: var(--radio-md);
    flex-shrink: 0;
}

.monograma.apagado {
    background: var(--gris-300);
    color: var(--gris-050);
}

/* Variante con logo real (imagen), en vez de las 2 letras generadas.
   El logo es más ancho que alto (244x124) — en vez de forzarlo dentro del
   cuadrado que usan las demás variantes, el badge se vuelve rectangular
   (mismo alto que el contexto, ancho automático) para mostrarlo completo,
   sin recortarlo ni deformarlo. */
.monograma.monograma-logo {
    background: #fff;
    padding: 5px;
}

.monograma.monograma-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.sidebar-marca .monograma.monograma-logo,
.login-panel-marca .marca-top .monograma.monograma-logo,
.portal-cabecera .marca .monograma.monograma-logo,
.tarjeta-modulo .monograma.monograma-logo {
    width: auto;
    aspect-ratio: 244 / 124;
    background: #fff;
}

/* =========================================================================
   PORTAL — selección de módulo (public/portal.php)
   ========================================================================= */

.portal {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px 40px;
    /* El fondo original (logo-splash.png) traía "MyContsys" y "Powered by
       MySQL" incrustados arriba — fondo-portal.png es ese mismo diseño (la
       esfera y las curvas) recortado sin esas dos franjas de texto, para
       poder usarlo como fondo de pantalla completa en vez de una imagen
       aparte arriba de la página. Se combina con lavados blancos
       (los mismos degradados de antes) para que el texto siga siendo
       legible sobre él. */
    background:
        radial-gradient(1100px 480px at 15% -10%, rgba(28, 74, 134, .10), transparent),
        radial-gradient(900px 420px at 100% 0%, rgba(31, 157, 99, .10), transparent),
        linear-gradient(rgba(255, 255, 255, .12), rgba(245, 247, 249, .35) 50%, rgba(245, 247, 249, .75)),
        url('img/fondo-portal.png');
    background-size: auto, auto, auto, cover;
    background-position: center, center, center, top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--gris-050);
}

.portal-cabecera {
    text-align: center;
    max-width: 640px;
    margin-bottom: 44px;
}

.portal-cabecera .marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.portal-cabecera .marca .monograma {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.portal-cabecera .marca span.grupo {
    font-size: 15px;
    font-weight: 600;
    color: var(--gris-500);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.portal-cabecera h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--azul-900);
}

.portal-cabecera p {
    margin: 0;
    color: var(--gris-500);
    font-size: 15px;
    line-height: 1.5;
}

.portal-seccion {
    width: 100%;
    max-width: 980px;
    margin-bottom: 36px;
}

.portal-seccion h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-500);
    margin: 0 0 16px;
    padding-left: 2px;
}

.grid-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.grid-modulos.submodulos {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tarjeta-modulo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    background: #fff;
    border-radius: var(--radio-lg);
    border: 1px solid var(--gris-200);
    box-shadow: var(--sombra-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tarjeta-modulo .monograma {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

.tarjeta-modulo h3 {
    margin: 0;
    font-size: 16px;
    color: var(--gris-900);
}

.tarjeta-modulo p.desc {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--azul-700);
}

.tarjeta-modulo p.detalle {
    margin: 0;
    font-size: 12.5px;
    color: var(--gris-500);
    line-height: 1.45;
    flex-grow: 1;
}

.tarjeta-modulo .cta {
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-700);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tarjeta-modulo .cta svg { width: 14px; height: 14px; transition: transform .18s ease; }

.tarjeta-modulo.habilitado:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-lg);
    border-color: var(--verde-500);
}

.tarjeta-modulo.habilitado:hover .cta svg { transform: translateX(3px); }

.tarjeta-modulo.deshabilitado {
    cursor: default;
    filter: grayscale(.5);
    opacity: .62;
}

.tarjeta-modulo.deshabilitado h3,
.tarjeta-modulo.deshabilitado p.desc { color: var(--gris-500); }

.badge-proximamente {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ambar-600);
    background: var(--ambar-100);
    padding: 3px 9px;
    border-radius: var(--radio-pill);
}

.portal-pie {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--gris-500);
}

/* =========================================================================
   LOGIN (public/login.php)
   ========================================================================= */

.login-envoltura {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--gris-050);
}

.login-panel-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    color: #fff;
    background:
        radial-gradient(700px 420px at 20% 15%, rgba(43, 184, 119, .35), transparent),
        linear-gradient(160deg, var(--azul-950), var(--azul-800) 65%, var(--verde-700));
    overflow: hidden;
}

.login-panel-marca::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 30% 20%, black, transparent 70%);
    pointer-events: none;
}

.login-panel-marca .marca-top {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.login-panel-marca .marca-top .monograma {
    width: 48px;
    height: 48px;
    font-size: 17px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(2px);
}

.login-panel-marca .marca-top .nombre {
    font-size: 19px;
    font-weight: 700;
}

.login-panel-marca .marca-top .nombre small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.7);
    letter-spacing: .04em;
}

.login-panel-marca .mensaje {
    position: relative;
    z-index: 1;
    max-width: 380px;
}

.login-panel-marca .mensaje h2 {
    font-size: 27px;
    line-height: 1.3;
    margin: 0 0 14px;
}

.login-panel-marca .mensaje p {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.8);
    margin: 0;
}

.login-panel-marca .pie {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
}

.login-panel-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.login-caja {
    width: 100%;
    max-width: 360px;
}

.login-caja .volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gris-500);
    text-decoration: none;
    margin-bottom: 26px;
}

.login-caja .volver:hover { color: var(--azul-700); }
.login-caja .volver svg { width: 13px; height: 13px; }

.login-caja h1 {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--azul-900);
}

.login-caja .subtitulo {
    margin: 0 0 28px;
    font-size: 13.5px;
    color: var(--gris-500);
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gris-700);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.campo .caja-entrada {
    position: relative;
}

.campo .caja-entrada svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--gris-300);
}

.campo input {
    width: 100%;
    padding: 11px 12px 11px 36px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo input:focus {
    outline: none;
    border-color: var(--azul-700);
    box-shadow: 0 0 0 3px var(--azul-100);
}

/* Selector de cliente (login multi-cliente, ver Core\Cliente) — mismo look
   que .campo input, pero <select> necesita su propio reset de apariencia. */
.campo select {
    width: 100%;
    padding: 11px 34px 11px 36px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 10px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo select:focus {
    outline: none;
    border-color: var(--azul-700);
    box-shadow: 0 0 0 3px var(--azul-100);
}

.campo select:invalid,
.campo select option[value=""] {
    color: var(--gris-400, #9ca3af);
}

.boton-primario {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--azul-800), var(--azul-700));
    color: #fff;
    border: none;
    border-radius: var(--radio-md);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--sombra-md);
    transition: filter .15s ease, transform .1s ease;
}

.boton-primario:hover { filter: brightness(1.08); }
.boton-primario:active { transform: translateY(1px); }

/* Antes referenciado (seleccionar-empresa.php: "Creación"/"Cancelar") pero
   nunca definido — sin estilo propio se veía como un <button> sin CSS. */
.boton-secundario {
    padding: 10px 16px;
    background: #fff;
    color: var(--gris-700);
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}

.boton-secundario:hover { background: var(--gris-050); border-color: var(--gris-300); }
.boton-secundario:active { transform: translateY(1px); }

.error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rojo-100);
    color: var(--rojo-600);
    padding: 10px 12px;
    border-radius: var(--radio-md);
    font-size: 13px;
    margin-bottom: 18px;
}

.error svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 860px) {
    .login-envoltura { grid-template-columns: 1fr; }
    .login-panel-marca { display: none; }
}

/* =========================================================================
   APP SHELL — menú del sistema (public/menu.php)
   ========================================================================= */

.app {
    display: grid;
    grid-template-columns: var(--ancho-sidebar) 1fr;
    min-height: 100%;
}

/* --- Sidebar --- */

.sidebar {
    background: var(--azul-950);
    color: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
}

.sidebar-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-marca .monograma { width: 38px; height: 38px; font-size: 14px; }
.sidebar-marca .nombre { font-size: 15px; font-weight: 700; }
.sidebar-marca .nombre small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); }

.sidebar-buscar {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-buscar .caja {
    position: relative;
}

.sidebar-buscar svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,.4);
}

.sidebar-buscar input {
    width: 100%;
    padding: 9px 10px 9px 32px;
    border-radius: var(--radio-md);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 13px;
}

.sidebar-buscar input::placeholder { color: rgba(255,255,255,.4); }
.sidebar-buscar input:focus { outline: none; border-color: var(--verde-500); background: rgba(255,255,255,.1); }

.sidebar-buscar .contador {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.4);
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px 10px 20px;
}

/* Barra de conexión — a qué BD/host/usuario está conectada esta sesión.
   Pegada al fondo del sidebar (sibling de .sidebar-nav, ambos hijos flex de
   .sidebar), fuera del área con scroll, siempre visible. */
.sidebar-conexion {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.16);
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,.5);
    cursor: default;
}

.sidebar-conexion .punto-estado {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--verde-500);
    box-shadow: 0 0 0 2px rgba(43,184,119,.25);
    flex-shrink: 0;
}

.sidebar-conexion .texto-conexion {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-conexion .texto-conexion b { color: rgba(255,255,255,.82); font-weight: 600; }
.sidebar-conexion .texto-conexion span.motor { color: #baf3d6; }

.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

ul.menu-nivel {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

ul.menu-nivel ul.menu-nivel {
    padding-left: 16px;
    margin-left: 8px;
    border-left: 1px dashed rgba(255,255,255,.12);
}

li.menu-grupo > details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radio-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,.88);
}

li.menu-grupo > details > summary::-webkit-details-marker { display: none; }

li.menu-grupo > details > summary:hover { background: rgba(255,255,255,.06); }

li.menu-grupo > details > summary .chevron {
    width: 10px; height: 10px;
    transition: transform .15s ease;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
}

li.menu-grupo > details[open] > summary .chevron { transform: rotate(90deg); }

li.menu-grupo > details > summary .icono-carpeta {
    width: 15px; height: 15px;
    color: var(--verde-500);
    flex-shrink: 0;
}

li.menu-grupo:nth-of-type(1) > details > summary,
.menu-nivel > li.menu-grupo > details > summary {
    /* nivel raiz un poco mas grande */
}

.menu-nivel-raiz > li.menu-grupo > details > summary {
    font-size: 14.5px;
    padding: 11px 10px;
    margin-bottom: 2px;
}

li.menu-item a,
li.menu-item span.item-deshabilitado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 8px;
    border-radius: var(--radio-sm);
    font-size: 13px;
    color: rgba(255,255,255,.68);
    text-decoration: none;
}

li.menu-item a:hover { background: rgba(43, 184, 119, .16); color: #fff; }

/* Opción todavía no migrada — sin <a>, sin href, no clicable (ver
   Menu::renderizar(): se dibuja como <span> cuando enlaceReal() devuelve
   null). "Deshabilitada" en vez de "oculta" a propósito: Enrrique quiere
   ver el mapa completo del menú original y qué falta, no una lista que
   cambia de tamaño según lo migrado. */
li.menu-item span.item-deshabilitado {
    color: rgba(255,255,255,.28);
    cursor: not-allowed;
}

li.menu-item span.item-deshabilitado .icono-item { background: rgba(255,255,255,.14) !important; }

li.menu-item .badge-menu-pendiente {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 1.5px 6px;
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.32);
    white-space: nowrap;
}

li.menu-item a .icono-item,
li.menu-item span.item-deshabilitado .icono-item {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    flex-shrink: 0;
}

li.menu-item a:hover .icono-item { background: var(--verde-500); }

li.menu-item a .texto-item,
li.menu-item span.item-deshabilitado .texto-item {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

kbd.atajo {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1.5px 6px;
    border-radius: 5px;
    line-height: 1.5;
    margin-left: 4px;
}

kbd.atajo-activo {
    background: rgba(43, 184, 119, .18);
    color: #baf3d6;
    border: 1px solid rgba(43, 184, 119, .35);
}

li.menu-item a:hover kbd.atajo-activo {
    background: rgba(255,255,255,.16);
    color: #fff;
    border-color: rgba(255,255,255,.3);
}

/* Atajo original Ctrl+X que quedó reservado por el navegador: se muestra
   tachado y atenuado, junto al nuevo Alt+Shift+X activo, solo de referencia. */
kbd.atajo-original {
    background: transparent;
    color: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.09);
    text-decoration: line-through;
    cursor: help;
    margin-left: 0;
}

li.menu-separador {
    border-top: 1px solid rgba(255,255,255,.07);
    margin: 8px 6px;
}

/* Resaltado / filtrado por busqueda */
li.oculto-busqueda { display: none !important; }
li.menu-item a mark {
    background: var(--verde-500);
    color: var(--azul-950);
    border-radius: 3px;
    padding: 0 2px;
}

/* --- Topbar + contenido --- */

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

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1px solid var(--gris-200);
}

.topbar .titulo-pagina {
    font-size: 15px;
    font-weight: 700;
    color: var(--gris-900);
}

.topbar .titulo-pagina span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gris-500);
    margin-top: 1px;
}

.topbar .usuario {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar .usuario .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul-700), var(--verde-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}

.topbar .usuario .info { line-height: 1.25; }
.topbar .usuario .info .nombre { font-size: 13px; font-weight: 700; color: var(--gris-900); }
.topbar .usuario .info .rol { font-size: 11.5px; color: var(--gris-500); }

.topbar .usuario .salir {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rojo-600);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: var(--radio-pill);
    border: 1px solid var(--rojo-100);
    background: var(--rojo-100);
}

.topbar .usuario .salir svg { width: 13px; height: 13px; }

.area-contenido {
    flex-grow: 1;
    padding: 34px 40px;
    overflow-y: auto;
    overflow-x: auto;
}

.bienvenida {
    max-width: 640px;
}

.bienvenida .eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--verde-700);
    margin-bottom: 10px;
}

.bienvenida h1 {
    font-size: 26px;
    color: var(--azul-900);
    margin: 0 0 12px;
}

.bienvenida p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gris-700);
}

.stats-fila {
    display: flex;
    gap: 16px;
    margin: 28px 0;
    flex-wrap: wrap;
}

.stat-tarjeta {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-lg);
    padding: 18px 22px;
    min-width: 150px;
    box-shadow: var(--sombra-sm);
}

.stat-tarjeta .valor {
    font-size: 26px;
    font-weight: 700;
    color: var(--azul-900);
}

.stat-tarjeta .etiqueta {
    font-size: 12px;
    color: var(--gris-500);
    margin-top: 2px;
}

.aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--ambar-100);
    border: 1px solid #f0d68a;
    color: var(--ambar-600);
    padding: 12px 16px;
    border-radius: var(--radio-md);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 22px 0;
}

.aviso svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.aviso-info {
    background: var(--azul-050);
    border-color: var(--azul-100);
    color: var(--azul-700);
}

.ruta-migas {
    font-size: 12.5px;
    color: var(--gris-500);
    margin-bottom: 14px;
}

@media (max-width: 980px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}

/* =========================================================================
   MantTab — ABC genérico de tablas del sistema.
   El original (MantTab.prg/Tabla2()) abre cada tabla en un DEFINE DIALOG de
   tamaño fijo en píxeles (no a pantalla completa) — .ventana-manttab replica
   ese tamaño como punto de PARTIDA de una tarjeta dentro de .area-contenido,
   que sigue mostrando el menú lateral y la barra superior de siempre. El
   ancho y alto de partida por tabla los da Core\MantTab::tamanoVentana(),
   pasados inline como las variables CSS --ancho-base/--alto-base.

   El original, además, tenía la ventana con WS_THICKFRAME (Tabla2(),
   MantTab.prg:1262) — es decir, el usuario SÍ podía agrandarla a mano
   (oDlg2:bResized reacomoda el grid interno al nuevo tamaño). Acá se
   replica esa idea con clamp(): la tarjeta nunca es más chica que su
   tamaño de partida, pero puede crecer hasta un tope holgado cuando la
   pantalla lo permite — "un poco mas anchas hacia los costados... y hacia
   abajo igual", instrucción explícita del cliente.
   ========================================================================= */

.ventana-manttab {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: clamp(var(--ancho-base), 92vw, calc(var(--ancho-base) + 380px));
    height: clamp(var(--alto-base), 80vh, calc(var(--alto-base) + 340px));
    max-width: 96vw;
    max-height: calc(100vh - 120px);
}

.ventana-manttab-envoltorio {
    display: flex;
    justify-content: flex-start;
}

/* Barra de herramientas — réplica de Tabla2Init()/Tabla2Menu() (MantTab.prg:
   1298/1413), el buttonbar + menú "Registro" que se ve en el original sobre
   cada grilla (Nuevo/Modifica/Elimina/Imprime/Excel/Salir). "Salir" ya está
   cubierto por "Volver al listado" de la barra superior (Core\Layout);
   Modifica/Elimina son acciones POR FILA acá (enlaces "Editar"/"Eliminar" en
   cada registro) en vez de un botón que actúa sobre "la fila seleccionada"
   como en el TBrowse original — un TBrowse no tiene equivalente directo en
   HTML, y esta es la forma natural de resolverlo en una tabla web. Nuevo,
   Imprimir y Excel sí son universales (EXCEL no tiene WHEN en el original:
   está presente en TODAS las tablas) y se muestran acá como botonera fija,
   siempre visible arriba de la grilla — "debe mostrar las opciones".
   ========================================================================= */
.manttab-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--gris-050);
    border-bottom: 1px solid var(--gris-200);
}

.manttab-toolbar .manttab-buscar {
    flex: 1 1 220px;
    position: relative;
    min-width: 180px;
}

.manttab-toolbar .manttab-buscar svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--gris-500);
}

.manttab-toolbar .manttab-buscar input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    font-size: 13px;
    background: #fff;
}

.manttab-toolbar .manttab-buscar input:focus {
    outline: none;
    border-color: var(--azul-700);
    box-shadow: 0 0 0 3px var(--azul-100);
}

.manttab-toolbar .manttab-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.manttab-toolbar .manttab-acciones a,
.manttab-toolbar .manttab-acciones button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.manttab-toolbar .manttab-acciones svg { width: 14px; height: 14px; }

/* Cuerpo desplazable — acá viven la grilla o el formulario. Al ser el único
   hijo flexible con overflow:auto dentro de .ventana-manttab (que ya no
   scrollea a sí misma, ver arriba), aparecen las 2 barras de desplazamiento
   —vertical y horizontal— exactamente cuando el contenido las necesita. */
.manttab-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
    /* Barras de desplazamiento SIEMPRE visibles y de tamaño clásico (no el
       overlay fino que algunos sistemas ocultan hasta pasar el mouse) —
       instrucción explícita: "deben verse tanto en vertical como en
       horizontal las barras de movimiento". */
    scrollbar-width: auto;
    scrollbar-color: var(--gris-300) var(--gris-050);
}

.manttab-cuerpo::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

.manttab-cuerpo::-webkit-scrollbar-track {
    background: var(--gris-050);
}

.manttab-cuerpo::-webkit-scrollbar-thumb {
    background: var(--gris-300);
    border-radius: 7px;
    border: 3px solid var(--gris-050);
}

.manttab-cuerpo::-webkit-scrollbar-thumb:hover {
    background: var(--gris-500);
}

.manttab-cuerpo::-webkit-scrollbar-corner {
    background: var(--gris-050);
}

/* La grilla YA NO se fuerza a "width:100%" (eso impedía el overflow
   horizontal real: el navegador simplemente achicaba/cortaba columnas en
   vez de mostrar la barra de desplazamiento) — width:max-content dejar que
   cada columna use su ancho natural, min-width:100% para que en tablas
   angostas siga ocupando todo el cuerpo disponible. */
.tabla-manttab {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-manttab th,
.tabla-manttab td {
    white-space: nowrap;
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--gris-100);
}

/* Encabezados ordenables — clic para ordenar por esa columna (siempre
   incluye Código y Nombre porque son columnas visibles como cualquier
   otra), ver el script en admin/manttab.php. */
.tabla-manttab th.ordenable {
    cursor: pointer;
    user-select: none;
}

.tabla-manttab th.ordenable:hover { background: var(--gris-100); }

.tabla-manttab th.ordenable .flecha-orden {
    display: inline-block;
    width: 10px;
    color: var(--azul-700);
}

/* Filas ocultas por el buscador de la barra de herramientas. */
.tabla-manttab tbody tr.oculto-busqueda { display: none !important; }

/* Fila con doble-click habilitado para editar (réplica de oLbx:bLDblClick en
   el original, ver admin/manttab.php) — cursor de mano + resalte al pasar
   para que se note que la fila es interactiva, no solo texto plano. */
.tabla-manttab tbody tr.fila-editable { cursor: pointer; }
.tabla-manttab tbody tr.fila-editable:hover td { background: var(--azul-100); }

/* Color intercalado suave (blanco / celeste claro) para que la grilla se lea
   mejor con muchas filas — réplica del bBkColor de oLst9 en el original
   (Acercade.prg: oApp:nGridColor[recno()%2+1]), que alterna 2 colores según
   la posición del registro. */
.tabla-manttab tbody tr:nth-child(odd) td { background: #fff; }
.tabla-manttab tbody tr:nth-child(even) td { background: var(--celeste-claro); }

/* El encabezado es sticky (queda fijo arriba al hacer scroll vertical
   dentro de .manttab-cuerpo) — CRÍTICO que tenga fondo OPACO propio
   (var(--gris-050), el mismo gris de encabezado que ya se usaba antes):
   sin esto, las filas de datos se ven "a través" del encabezado al
   hacer scroll (el texto del título se monta sobre los datos) en vez de
   quedar tapadas por él. */
.tabla-manttab thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gris-050);
    border-bottom: 2px solid var(--gris-200);
    font-weight: 700;
}

/* Impresión — réplica liviana del botón PRINT16/oLst2:Report() del
   original: al imprimir, se oculta todo lo que no sea la grilla en sí
   (menú lateral, barra superior, barra de herramientas, avisos) y se deja
   que la tarjeta fluya con alto automático para que el navegador pagine
   todas las filas, no solo las que entraban en pantalla. */
@media print {
    .sidebar, .topbar, .manttab-toolbar, .aviso, .ruta-migas { display: none !important; }
    .app { display: block !important; }
    .area-contenido { padding: 0 !important; overflow: visible !important; }
    .ventana-manttab-envoltorio { display: block !important; }
    .ventana-manttab {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .manttab-cuerpo { overflow: visible !important; }
}

/* Pantallas dedicadas de Plan de Cuentas / Auxiliares / Saldos (admin/pcg.php,
   admin/aux.php, admin/sal.php) — réplica de los diálogos NewPcg()/NewAux()/
   NewSal() del original (cvbrowse.prg), agrupados en secciones como en las
   capturas del sistema de escritorio, en vez del formulario plano genérico
   de MantTab. Ver FASE1.md para el detalle de qué se replicó de cada uno. */
.ficha-contable { max-width: 980px; }

.ficha-seccion {
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    padding: 14px 16px 4px;
    margin-bottom: 16px;
    background: #fff;
}

.ficha-seccion > .ficha-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-500);
    margin: 0 0 12px;
}

.ficha-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.ficha-campo { flex: 1 1 200px; min-width: 160px; }
.ficha-campo.ficha-campo-chico { flex: 0 1 110px; min-width: 90px; }
.ficha-campo.ficha-campo-ancho { flex: 2 1 320px; }

.ficha-campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gris-700);
    margin-bottom: 5px;
    letter-spacing: .01em;
}

.ficha-campo input[type="text"],
.ficha-campo input[type="number"],
.ficha-campo input[type="date"],
.ficha-campo select {
    width: 100%;
    padding: 9px 10px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    font-size: 13.5px;
    background: #fff;
}

.ficha-campo input:focus, .ficha-campo select:focus {
    outline: none;
    border-color: var(--azul-700);
    box-shadow: 0 0 0 3px var(--azul-100);
}

.ficha-campo input[readonly] { background: var(--gris-050); color: var(--gris-500); }
.ficha-campo .ficha-ayuda { font-size: 11.5px; color: var(--gris-500); margin-top: 4px; }

.ficha-lookup { display: flex; gap: 6px; }
.ficha-lookup input { flex: 1; }
.ficha-lookup .ficha-lookup-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-md);
    background: var(--gris-050);
    color: var(--gris-500);
    cursor: default;
}
.ficha-lookup .ficha-lookup-btn svg { width: 14px; height: 14px; }

.ficha-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.ficha-radios label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gris-900);
    cursor: pointer;
}

.ficha-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-900);
    cursor: pointer;
}

.ficha-acciones {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.ficha-acciones .boton-primario { width: auto; padding: 10px 26px; }

/* Tabla de Saldos: grilla de 15 filas (meses 00-14) x 3 monedas x 2 años,
   distinta a .ficha-seccion porque acá el layout SÍ es tabular en el
   original (Maestro de Saldos por Cuenta) — ver admin/sal.php. */
.ficha-saldos { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ficha-saldos th, .ficha-saldos td { padding: 5px 7px; border-bottom: 1px solid var(--gris-100); text-align: right; }
.ficha-saldos th { background: var(--gris-050); border-bottom: 2px solid var(--gris-200); font-weight: 700; white-space: nowrap; }
.ficha-saldos td:first-child, .ficha-saldos th:first-child { text-align: left; }
.ficha-saldos tr.ficha-saldos-total td { font-weight: 700; background: var(--gris-050); }
.ficha-saldos input {
    width: 100%;
    min-width: 92px;
    padding: 5px 6px;
    border: 1.5px solid var(--gris-200);
    border-radius: 6px;
    font-size: 12.5px;
    text-align: right;
}
.ficha-saldos input:focus { outline: none; border-color: var(--azul-700); box-shadow: 0 0 0 2px var(--azul-100); }
.ficha-saldos .ficha-saldos-historico { color: var(--gris-500); }