/* =====================================================================
   Elizabeth & Asociados - estilos del sistema
   ===================================================================== */

:root {
    --tinta: #1f2a44;
    --acento: #b08d57;
    --fondo: #f4f5f8;
    --borde: #e2e5ec;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--fondo);
    font-size: 0.925rem;
    color: #2b2f38;
}

/* ------------------------------ estructura ------------------------- */

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

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

.app-main {
    padding: 1.25rem 1.5rem 3rem;
}

.app-publico {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tinta) 0%, #0f1626 100%);
    padding: 1rem;
}

.barra-superior {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 20;
}

.titulo-pagina {
    font-weight: 600;
    color: var(--tinta);
}

/* ------------------------------ menu lateral ----------------------- */

.menu-lateral {
    width: 268px;
    flex: 0 0 268px;
    background: var(--tinta);
    color: #cfd5e3;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
}

.menu-marca .bi {
    font-size: 1.6rem;
    color: var(--acento);
}

.menu-marca-titulo {
    font-weight: 600;
    line-height: 1.1;
}

.menu-marca-subtitulo {
    font-size: .72rem;
    color: #9aa4bb;
}

.menu-navegacion {
    padding: .5rem 0 1rem;
    flex: 1 1 auto;
}

.menu-grupo-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: none;
    border: 0;
    color: #9aa4bb;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    padding: .7rem 1rem .35rem;
}

.menu-grupo-titulo .flecha {
    transition: transform .15s ease;
    font-size: .7rem;
}

.menu-grupo-titulo[aria-expanded="true"] .flecha {
    transform: rotate(180deg);
}

.menu-opcion {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    color: #cfd5e3;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.menu-opcion.sub {
    padding-left: 1.6rem;
    font-size: .88rem;
}

.menu-opcion:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.menu-opcion.activo {
    background: rgba(176,141,87,.16);
    border-left-color: var(--acento);
    color: #fff;
    font-weight: 500;
}

.menu-vacio {
    padding: 1rem;
    font-size: .82rem;
    color: #9aa4bb;
}

.menu-pie {
    padding: .8rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .82rem;
    color: #cfd5e3;
}

@media (max-width: 991.98px) {
    .menu-lateral {
        position: fixed;
        z-index: 1030;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .menu-lateral.abierto {
        transform: translateX(0);
    }
}

/* ------------------------------ componentes ------------------------ */

.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.tarjeta-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--borde);
}

.tarjeta-encabezado h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--tinta);
}

.tarjeta-cuerpo {
    padding: 1rem;
}

.indicador {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .9rem 1rem;
    height: 100%;
}

.indicador-etiqueta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.indicador-valor {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--tinta);
}

.tabla-sistema {
    font-size: .88rem;
}

.tabla-sistema thead th {
    background: #f7f8fa;
    color: #4b5563;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tabla-sistema td, .tabla-sistema th {
    vertical-align: middle;
}

.acceso-tarjeta {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: .8rem;
    padding: 2rem;
    box-shadow: 0 18px 45px rgba(0,0,0,.3);
}

.acceso-marca {
    text-align: center;
    margin-bottom: 1.5rem;
}

.acceso-marca .bi {
    font-size: 2.4rem;
    color: var(--acento);
}

.acceso-marca h1 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tinta);
    margin: .5rem 0 0;
}

.acceso-marca p {
    font-size: .82rem;
    color: #6b7280;
    margin: 0;
}

.matriz-permisos td:first-child,
.matriz-permisos th:first-child {
    width: 4rem;
    text-align: center;
}