/* ============================================================
   FUNOVA°360 - Estilos base corporativos
   Paleta: grafito, blanco, gris suave, dorado sobrio,
   verde petroleo / verde oscuro como apoyo.
   ============================================================ */

:root {
    --grafito: #23282d;
    --grafito-claro: #2f363d;
    --blanco: #ffffff;
    --gris-fondo: #f3f4f6;
    --gris-suave: #e4e7eb;
    --gris-texto: #5b636b;
    --gris-borde: #d7dbe0;
    --dorado: #c9a04e;
    --dorado-oscuro: #a9853a;
    --petroleo: #1d3b39;
    --petroleo-claro: #25514d;
    --verde-oscuro: #1f3d2b;
    --rojo: #9b2c2c;
    --ambar: #92400e;

    --radio: 8px;
    --sombra-suave: 0 1px 3px rgba(20, 24, 28, 0.08), 0 1px 2px rgba(20, 24, 28, 0.04);
    --sombra-media: 0 4px 16px rgba(20, 24, 28, 0.10);
    --transicion: 0.18s ease;
    --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.accion-deshabilitada { opacity:.55; cursor:not-allowed; pointer-events:none; }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--grafito);
    background: var(--gris-fondo);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: var(--petroleo); text-decoration: none; }
a:hover { color: var(--petroleo-claro); }

/* -------- Alertas -------- */
.alerta {
    padding: 12px 16px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.alerta-error   { background: #fdf0f0; color: var(--rojo); border-color: #f0caca; }
.alerta-aviso   { background: #fff8ec; color: var(--ambar); border-color: #f3e1bf; }
.alerta-exito   { background: #eef6f0; color: var(--verde-oscuro); border-color: #cbe4d3; }
.alerta-info    { background: #eef2f6; color: var(--petroleo); border-color: #cdd9e1; }

/* -------- Botones -------- */
.boton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radio);
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
    background: var(--petroleo);
    color: var(--blanco);
}
.boton:hover { background: var(--petroleo-claro); color: var(--blanco); }
.boton-secundario {
    background: transparent;
    color: var(--grafito);
    border-color: var(--gris-borde);
}
.boton-secundario:hover { background: var(--gris-suave); color: var(--grafito); }
.boton-salir {
    background: transparent;
    color: var(--gris-texto);
    border: 1px solid var(--gris-borde);
    padding: 7px 14px;
    font-size: 0.85rem;
}
.boton-salir:hover { background: var(--gris-suave); color: var(--grafito); }

/* ============================================================
   Autenticacion (login)
   ============================================================ */
.cuerpo-autenticacion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(201,160,78,0.10), transparent 60%),
        linear-gradient(160deg, var(--grafito) 0%, var(--petroleo) 100%);
    padding: 24px;
}

.auth-envoltura { width: 100%; max-width: 420px; }

.auth-tarjeta {
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: var(--sombra-media);
    padding: 40px 36px 28px;
}

.auth-marca { text-align: center; margin-bottom: 28px; }
.auth-logo {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--grafito);
}
.auth-grado { color: var(--dorado); }
.auth-slogan {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--gris-texto);
    letter-spacing: 0.3px;
}

.auth-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--grafito);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-campo { display: flex; flex-direction: column; gap: 6px; }
.auth-etiqueta { font-size: 0.82rem; color: var(--gris-texto); font-weight: 600; }
.auth-input {
    padding: 11px 13px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    font-size: 0.95rem;
    transition: var(--transicion);
    outline: none;
}
.auth-input:focus {
    border-color: var(--petroleo);
    box-shadow: 0 0 0 3px rgba(29,59,57,0.12);
}
.auth-boton {
    margin-top: 6px;
    padding: 12px;
    border: none;
    border-radius: var(--radio);
    background: var(--petroleo);
    color: var(--blanco);
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
}
.auth-boton:hover { background: var(--petroleo-claro); }
.auth-pie {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.74rem;
    color: var(--gris-texto);
}

/* -------- Tablas y badges genericos -------- */
.tabla { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave); }
.tabla th, .tabla td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--gris-suave); font-size: 0.9rem; }
.tabla th { background: #fafbfc; color: var(--gris-texto); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.4px; }
/* Badges: se fuerza color + fondo para que sean SIEMPRE legibles, incluso
   sobre Bootstrap (que pinta el texto de .badge en blanco). Cargado de forma
   global despues de Bootstrap para garantizar contraste en todo el panel. */
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.badge-activo    { background: #e3f3e9; color: #1b5e3a; }
.badge-inactivo  { background: #e7eaee; color: #545b63; }
.badge-pendiente { background: #fcecc6; color: #7a4f02; }
.badge-parcial   { background: #ffe2c7; color: #8a3a10; }
.badge-info      { background: #d7e6fb; color: #1b3f72; }
.badge-error     { background: #fbdada; color: #8a1c1c; }
.badge-neutro    { background: #eef1f4; color: #3a4148; }
.vacio { color: var(--gris-texto); font-size: 0.92rem; padding: 16px 0; }