/* GOAUDITA - Estilos base · Paleta de marca */
:root {
    /* Paleta GoAudita */
    --marino:   #0F2238;
    --turquesa: #18B8AE;
    --amarillo: #F4BE1A;
    --naranja:  #F48A34;
    --coral:    #F25552;
    --blanco:   #FFFFFF;

    /* Variables semánticas (mapeadas a la marca) */
    --azul: var(--marino);        /* menú lateral, encabezados, texto fuerte */
    --azul-claro: #0E7A73;        /* turquesa oscuro: enlaces y acentos legibles */
    --primario: var(--turquesa);  /* botones de acción */
    --primario-hover: #129B92;
    --verde: var(--turquesa);     /* éxito / saldos positivos */
    --rojo: var(--coral);         /* error / peligro / saldos negativos */
    --gris: #f4f6f8;
    --borde: #dde3e8;
    --texto: #1f2a36;
    --alto-cabecera: 84px;   /* altura común: bloque del logo y barra superior */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--gris);
    color: var(--texto);
    line-height: 1.5;
}

.cabecera {
    background: var(--azul);
    color: #fff;
    padding: 1.5rem 2rem;
}
.cabecera h1 { margin: 0; font-size: 1.6rem; letter-spacing: 1px; }
.cabecera p  { margin: .25rem 0 0; opacity: .85; font-size: .95rem; }

.contenedor {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.alerta {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: .95rem;
}
.alerta-ok    { background: #d8f5f2; border: 1px solid #9fe2dc; color: #0E7A73; }
.alerta-error { background: #fde0df; border: 1px solid #f5b3b1; color: #c0322f; }

.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.tarjeta h2 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: var(--azul-claro);
    border-bottom: 1px solid var(--borde);
    padding-bottom: .4rem;
}
.tarjeta ul { margin: .25rem 0; padding-left: 1.2rem; }
.tarjeta li { margin: .15rem 0; }

.pie {
    text-align: center;
    color: #8a949c;
    font-size: .85rem;
    padding: 1.5rem 0;
}
code { background: #eef1f4; padding: .1rem .35rem; border-radius: 4px; }

/* ============================================================
   FASE 2 - Login, layout, tablas y formularios
   ============================================================ */

/* ---- Login / pantalla de configuración ---- */
.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--marino), var(--turquesa));
    padding: 1rem;
}
.caja-login {
    background: #fff;
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.login-marca {
    text-align: center;
}
.login-marca img { width: 230px; max-width: 85%; height: auto; }
.login-sub {
    text-align: center;
    color: #7a868f;
    margin: .25rem 0 1.25rem;
    font-size: .9rem;
}
.caja-login label { display: block; margin: .75rem 0 .25rem; font-size: .85rem; font-weight: 600; }
.caja-login input {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: .95rem;
}
.btn-principal {
    width: 100%;
    margin-top: 1.25rem;
    padding: .7rem;
    background: var(--primario);
    color: var(--marino);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-principal:hover { background: var(--primario-hover); color: #fff; }

/* ---- Layout autenticado ---- */
.app { display: flex; min-height: 100vh; }
.barra-lateral {
    width: 230px;
    background: var(--azul);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.marca {
    height: var(--alto-cabecera);
    background: #fff;
    padding: .4rem 1rem;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: center;
}
.marca img { max-height: 66px; max-width: 100%; width: auto; height: auto; display: block; }
.menu { display: flex; flex-direction: column; padding: .5rem 0; }
.menu-item {
    padding: .65rem 1.5rem;
    color: #d6e0ea;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
a.menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-item.activo {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-left-color: #fff;
    font-weight: 600;
}
.menu-item.deshabilitado { color: #7e91a3; cursor: default; }
.pronto {
    font-size: .65rem;
    background: rgba(255,255,255,.15);
    padding: .05rem .35rem;
    border-radius: 4px;
    margin-left: .25rem;
}

.zona-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.barra-superior {
    height: var(--alto-cabecera);
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.barra-superior h1 { margin: 0; font-size: 1.2rem; color: var(--azul); }
.usuario-info { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.usuario-nombre { font-weight: 600; color: var(--texto); text-decoration: none; }
.usuario-nombre:hover { color: var(--azul-claro); }
.usuario-rol {
    background: var(--gris);
    color: var(--azul-claro);
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .8rem;
}
.btn-salir {
    background: var(--rojo);
    color: #fff;
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .85rem;
}
.contenido { padding: 1.5rem; flex: 1; }
.pie-app { text-align: center; color: #8a949c; font-size: .8rem; padding: 1rem; }

/* ---- Bienvenida y stats ---- */
.bienvenida { margin-bottom: 1.25rem; }
.bienvenida h2 { margin: 0 0 .25rem; color: var(--azul); }
.tarjetas-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.stat {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    min-width: 150px;
    flex: 1;
}
.stat-num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--azul-claro); }
.stat-label { color: #7a868f; font-size: .85rem; }

/* ---- Grid de 2 columnas ---- */
.grid-2col { display: grid; grid-template-columns: 360px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .grid-2col { grid-template-columns: 1fr; } }

/* ---- Formularios ---- */
.formulario label { display: block; margin: .7rem 0 .25rem; font-size: .85rem; font-weight: 600; }
.formulario input, .formulario select {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: .92rem;
}
.fila-doble { display: flex; gap: .5rem; }
.fila-doble select { flex: 0 0 42%; }
.fila-doble input { flex: 1; }

/* Reportes - barras horizontales */
.barras { display: flex; flex-direction: column; gap: .45rem; margin-top: .25rem; }
.barra-fila { display: grid; grid-template-columns: 130px 1fr 150px; align-items: center; gap: .5rem; font-size: .85rem; }
.barra-lbl { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-track { background: var(--gris); border-radius: 6px; height: 16px; overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 6px; }
.barra-fill.turquesa { background: var(--turquesa); }
.barra-fill.marino   { background: var(--marino); }
.barra-fill.coral    { background: var(--coral); }
.barra-fill.naranja  { background: var(--naranja); }
.barra-fill.amarillo { background: var(--amarillo); }
.barra-val { text-align: right; color: #5b6b7a; }
.barra-val small { color: #9aa4ac; }
.paginacion { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
@media (max-width: 560px) { .barra-fila { grid-template-columns: 100px 1fr; } .barra-val { grid-column: 2; text-align: left; } }

/* ---- Tablas ---- */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td {
    text-align: left;
    padding: .6rem .85rem;          /* espaciado uniforme */
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}
.tabla thead th {
    color: var(--marino);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: #eef2f5;            /* encabezado con fondo */
    border-bottom: 2px solid var(--borde);
    position: sticky; top: 0; z-index: 1;
}
.tabla thead th:first-child { border-top-left-radius: 8px; }
.tabla thead th:last-child  { border-top-right-radius: 8px; }
.tabla tbody tr:nth-child(even) { background: #fafbfc; }   /* filas alternadas */
.tabla tbody tr:hover { background: #eaf7f5; }             /* resalte al pasar */
.tabla td.der, .tabla th.der { font-variant-numeric: tabular-nums; }  /* números alineados */
.fila-inactiva { opacity: .55; }
.badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 12px; }
.badge-ok { background: #e8f5e9; color: var(--verde); }
.badge-off { background: #ffebee; color: var(--rojo); }
.btn-mini {
    background: var(--gris);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .8rem;
    cursor: pointer;
}
.btn-mini:hover { background: #e6ebf0; }

/* ============================================================
   FASE 3 - Ingresos, entregas y gastos
   ============================================================ */
.ayuda { color: #7a868f; font-size: .85rem; margin-top: .75rem; }
.der { text-align: right; }

/* Formulario en rejilla (2 columnas) para gastos */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
}
.form-grid .col-span2 { grid-column: 1 / -1; }
.form-grid label { margin-top: .4rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Cabecera de tabla con filtro */
.tabla-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.filtro-inline select {
    padding: .4rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: .85rem;
}

/* Badges de estado de revisión (paleta de marca) */
.estado-pendiente    { background: #fdecd9; color: #b5631a; }
.estado-deducible    { background: #d8f5f2; color: #0E7A73; }
.estado-no_deducible { background: #fde0df; color: #c0322f; }
.estado-parcial      { background: #fdf3d3; color: #9a7407; }

/* Badges de nivel de riesgo (paleta de marca) */
.riesgo-sin_clasificar { background: #eceff1; color: #5b6b7a; }
.riesgo-bajo  { background: #d8f5f2; color: #0E7A73; }
.riesgo-medio { background: #fdecd9; color: #b5631a; }
.riesgo-alto  { background: #fde0df; color: #c0322f; }

/* ============================================================
   FASE 4 - Detalle de gasto para clasificación
   ============================================================ */
.detalle-gasto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.5rem;
    margin: .5rem 0 1rem;
    padding: 1rem;
    background: var(--gris);
    border-radius: 8px;
    font-size: .92rem;
}
.detalle-gasto > div { display: flex; flex-direction: column; }
.detalle-gasto span {
    font-size: .72rem;
    text-transform: uppercase;
    color: #7a868f;
    font-weight: 600;
}
@media (max-width: 700px) { .detalle-gasto { grid-template-columns: 1fr; } }

/* ============================================================
   FASE 5 - Saldos y alertas
   ============================================================ */
.actualizado { color: #9aa4ac; font-size: .8rem; margin-left: .5rem; }
.stat-saldo .stat-num { font-size: 1.5rem; }
.stat-num.negativo, .texto-rojo { color: var(--rojo) !important; }
.texto-verde { color: var(--verde); }
.stat-detalle { color: #7a868f; font-size: .78rem; display: block; margin-top: .25rem; }

.alertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}
.alerta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    text-decoration: none;
    color: var(--texto);
    background: #fff;
    transition: box-shadow .15s;
}
.alerta-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.alerta-num { font-size: 1.9rem; font-weight: 700; color: #607d8b; }
.alerta-txt { font-size: .82rem; color: #7a868f; margin-top: .25rem; }
.alerta-card.activa-naranja { border-color: #f9c99a; background: #fff7ef; }
.alerta-card.activa-naranja .alerta-num { color: #b5631a; }
.alerta-card.activa-rojo { border-color: #f5b3b1; background: #fff5f5; }
.alerta-card.activa-rojo .alerta-num { color: var(--rojo); }

/* ============================================================
   RESPONSIVE - Menú móvil (hamburguesa) y adaptaciones
   ============================================================ */
.menu-toggle {
    display: none;            /* oculto en escritorio */
    background: none;
    border: none;
    color: var(--marino);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .5rem .2rem 0;
    margin-right: .25rem;
}
.overlay-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 34, 56, .5);
    z-index: 40;
}
.overlay-menu.visible { display: block; }

@media (max-width: 820px) {
    /* La barra lateral se vuelve un panel deslizable (off-canvas) */
    .barra-lateral {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 20px rgba(0,0,0,.25);
    }
    .barra-lateral.abierta { transform: translateX(0); }

    .menu-toggle { display: inline-block; }   /* mostrar hamburguesa */

    .zona-principal { width: 100%; }
    .contenido { padding: 1rem; }
    .barra-superior { padding: 0 1rem; }
    .barra-superior h1 { font-size: 1.05rem; }

    /* El nombre puede ser largo: que no rompa la barra */
    .usuario-info { gap: .4rem; font-size: .82rem; }
    .usuario-rol { display: none; }
    .usuario-nombre {
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Tablas anchas: scroll horizontal dentro de la tarjeta */
    .tarjeta { overflow-x: auto; }
    .tabla { min-width: 520px; }

    /* Stats y alertas a ancho completo, apiladas */
    .tarjetas-stats { flex-direction: column; }
    .stat { min-width: 0; }
}

@media (max-width: 480px) {
    .alertas-grid { grid-template-columns: 1fr 1fr; }
    .barra-lateral { width: 82vw; max-width: 280px; }
}