/* =============================================================================
 * safesociety-accounting — sistema visual de marca (Safe Society)
 * -----------------------------------------------------------------------------
 * Paleta y tipografía tomadas de Branding guidelines.pdf (Safe Society):
 *   Negro tinta   #020203  — superficies oscuras (navbar), texto principal
 *   Verde menta   #99ffcc  — acento de marca (foco, estados activos, enlaces)
 *   Blanco        #ffffff  — superficies de contenido
 *   Tipografía    Fira Sans (Book = 400/regular; Hair = 100, solo en títulos
 *                 grandes — a tamaños de texto normal es ilegible)
 *
 * Estrategia: en vez de reescribir cada plantilla, se sobreescriben las
 * variables CSS de Bootstrap 5.3 (`--bs-*`) — Bootstrap las usa internamente
 * en components/botones/tarjetas/formularios, así que un solo punto de
 * cambio se propaga a las ~40 plantillas existentes sin tocarlas una por
 * una. Los colores semánticos de Bootstrap (success/danger/warning) NO se
 * tocan a propósito: en una plataforma contable, verde/rojo ya tienen un
 * significado financiero establecido (positivo/negativo) que no debe
 * confundirse con el verde menta de marca, que aquí es puramente un acento
 * de interacción (foco, enlaces, estados activos), no un semáforo de estado.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    --marca-negro: #020203;
    --marca-menta: #99ffcc;
    --marca-menta-oscuro: #5fe0a8; /* variante más oscura del acento, para texto/hover sobre fondos claros con suficiente contraste */
    --marca-blanco: #ffffff;
    --marca-gris-fondo: #f4f7f6;   /* fondo de página: casi blanco, con un toque frío que armoniza con la menta */
    --marca-gris-borde: #e2e8e6;
    --marca-gris-texto: #4b5563;

    /* --- Sobrescritura de variables de Bootstrap 5.3 --- */
    --bs-body-font-family: 'Fira Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: var(--marca-gris-fondo);
    --bs-body-color: #16181a;

    --bs-primary: var(--marca-negro);
    --bs-primary-rgb: 2, 2, 3;
    --bs-link-color: #0f6b45;
    --bs-link-color-rgb: 15, 107, 69;
    --bs-link-hover-color: #0a4d32;
    --bs-link-hover-color-rgb: 10, 77, 50;

    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-border-color: var(--marca-gris-borde);

    --bs-focus-ring-color: rgba(153, 255, 204, 0.55);
}

body {
    background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--marca-negro);
}

/* Fira Sans "Hair" (100) solo en títulos grandes, tal como está pensada la
   fuente en la guía de marca — a cuerpos de texto normales sería ilegible. */
.display-1, .display-2, .display-3, .display-4 {
    font-weight: 100;
}

code {
    color: #0a4d32;
}

/* ---------------------------------------------------------------------------
 * App shell: menú lateral (sidebar) + barra superior (topbar)
 *
 * El sidebar es `position: fixed` a la izquierda; `.app-main` deja el margen
 * equivalente a su ancho. Colapsarlo (botón de la topbar) agrega la clase
 * `sidebar-colapsado` en <html> — se pone ahí (no en <body>) porque el script
 * anti-parpadeo de base.html corre antes de que exista <body>. En pantallas
 * angostas (< 992px) el sidebar es un panel superpuesto (con fondo oscuro
 * detrás) en vez de empujar el contenido, y arranca oculto por defecto.
 * ------------------------------------------------------------------------- */
:root {
    --sidebar-ancho: 264px;
}

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

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-ancho);
    height: 100vh;
    background: var(--marca-negro);
    color: var(--marca-blanco);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 1040;
    border-right: 1px solid rgba(153, 255, 204, 0.15);
    transition: transform 0.2s ease;

    /* Scrollbar sutil, acorde con la paleta (menta translúcido sobre el
       fondo negro del sidebar) en vez de la barra gris por defecto del
       navegador. `scrollbar-width`/`scrollbar-color` cubren Firefox; los
       pseudo-elementos `::-webkit-scrollbar-*` cubren Chrome/Edge/Safari. */
    scrollbar-width: thin;
    scrollbar-color: rgba(153, 255, 204, 0.3) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(153, 255, 204, 0.3);
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(153, 255, 204, 0.5);
}

html.sidebar-colapsado .sidebar {
    transform: translateX(-100%);
}

.sidebar-marca {
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--marca-blanco);
    text-decoration: none;
}

.sidebar-brand .marca-icono {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 0.5rem;
    background: var(--marca-menta);
    color: var(--marca-negro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
}

.sidebar-brand-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.sidebar-brand-texto strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.sidebar-brand-texto small {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-nav {
    flex: 1;
    padding: 0.6rem 0.55rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.sidebar-seccion {
    margin-top: 0.6rem;
    margin-bottom: 0.1rem;
    padding: 0 0.65rem;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.36rem 0.7rem;
    border-radius: 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
}

.sidebar-link i {
    width: 1rem;
    text-align: center;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-link:hover {
    background: rgba(153, 255, 204, 0.1);
    color: var(--marca-blanco);
}

.sidebar-link.active {
    background: var(--marca-menta);
    color: var(--marca-negro);
    font-weight: 600;
}

.sidebar-link.active i {
    color: var(--marca-negro);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 2, 3, 0.45);
    z-index: 1035;
}

.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-ancho);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

html.sidebar-colapsado .app-main {
    margin-left: 0;
}

/* Páginas sin sesión iniciada (login, recuperar contraseña): no hay sidebar,
   así que `.app-main` no debe reservarle espacio. */
body.pagina-publica .app-main {
    margin-left: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    background: var(--marca-blanco);
    border-bottom: 1px solid var(--marca-gris-borde);
}

.topbar-toggle {
    border: none;
    background: transparent;
    color: var(--marca-negro);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex: none;
}

.topbar-toggle:hover {
    background: var(--marca-gris-fondo);
}

.topbar-espaciador {
    flex: 1;
}

.topbar-reloj {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--marca-gris-texto);
}

.topbar-tz {
    font-size: 0.68rem;
    color: #94a19d;
    border-left: 1px solid var(--marca-gris-borde);
    padding-left: 0.5rem;
    margin-left: 0.1rem;
}

.topbar-usuario .btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--marca-gris-borde);
    background: var(--marca-blanco);
    border-radius: 2rem;
    padding: 0.28rem 0.75rem 0.28rem 0.28rem;
}

.topbar-usuario .btn:hover {
    border-color: var(--marca-menta-oscuro);
}

.avatar-usuario {
    width: 1.85rem;
    height: 1.85rem;
    flex: none;
    border-radius: 50%;
    background: var(--marca-negro);
    color: var(--marca-menta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}

.topbar-usuario-nombre {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--marca-negro);
}

.badge-rol {
    background-color: var(--marca-menta);
    color: var(--marca-negro);
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    html:not(.sidebar-colapsado) .sidebar {
        transform: translateX(0);
        box-shadow: 16px 0 32px rgba(2, 2, 3, 0.25);
    }
    html:not(.sidebar-colapsado) .sidebar-backdrop {
        display: block;
    }
    .app-main {
        margin-left: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------------------- */
.btn {
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
}

.btn-primary {
    background-color: var(--marca-negro);
    border-color: var(--marca-negro);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1c1c1e;
    border-color: #1c1c1e;
    color: var(--marca-blanco);
}

/* Acento de marca: para llamadas a la acción secundarias donde se quiere el
   verde menta como protagonista (no reemplaza btn-primary, que ya cumple ese
   rol con el negro de marca). */
.btn-accent {
    background-color: var(--marca-menta);
    border-color: var(--marca-menta);
    color: var(--marca-negro);
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--marca-menta-oscuro);
    border-color: var(--marca-menta-oscuro);
    color: var(--marca-negro);
}

.btn-outline-primary {
    color: var(--marca-negro);
    border-color: var(--marca-negro);
}

.btn-outline-primary:hover {
    background-color: var(--marca-negro);
    border-color: var(--marca-negro);
    color: var(--marca-blanco);
}

/* ---------------------------------------------------------------------------
 * Tarjetas, tablas, formularios
 * ------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--marca-gris-borde);
    box-shadow: 0 1px 2px rgba(2, 2, 3, 0.04);
}

.card:hover {
    box-shadow: 0 4px 14px rgba(2, 2, 3, 0.08);
}

a.text-decoration-none .card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.text-decoration-none:hover .card {
    box-shadow: 0 6px 18px rgba(2, 2, 3, 0.12);
    transform: translateY(-1px);
}

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

table.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--marca-gris-texto);
    border-bottom-width: 1px;
    background-color: #fafcfb;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(153, 255, 204, 0.14);
}

/* Los ModelForm de Django no traen la clase form-control/form-select de Bootstrap
   por defecto; se aplica aquí un estilo equivalente a los widgets estándar dentro de
   <main>, para no tener que declarar `widgets` en cada formulario del proyecto. */
main form input[type="text"],
main form input[type="email"],
main form input[type="password"],
main form input[type="number"],
main form input[type="date"],
main form input[type="tel"],
main form textarea,
main form select:not([multiple]) {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: var(--bs-border-radius-sm);
    background-color: #fff;
}

main form input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
}

.form-control:focus,
.form-select:focus,
main form input:focus,
main form select:focus,
main form textarea:focus {
    border-color: var(--marca-menta-oscuro);
    box-shadow: 0 0 0 0.2rem rgba(153, 255, 204, 0.45);
}

/* ---------------------------------------------------------------------------
 * Alertas y "badges" de estado
 * ------------------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
}

.alert-success {
    background-color: rgba(153, 255, 204, 0.28);
    border-color: rgba(95, 224, 168, 0.55);
    color: #0a4d32;
}

/* ---------------------------------------------------------------------------
 * Página de inicio de sesión
 * ------------------------------------------------------------------------- */
.pantalla-login {
    min-height: calc(100vh - 1.5rem);
    display: flex;
    align-items: center;
}

.tarjeta-login {
    border: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 20px 45px rgba(2, 2, 3, 0.12);
    overflow: hidden;
}

.tarjeta-login .panel-marca {
    background: radial-gradient(circle at 20% 20%, #101112 0%, var(--marca-negro) 65%);
    color: var(--marca-blanco);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.tarjeta-login .panel-marca::after {
    content: "";
    position: absolute;
    inset: auto -20% -30% auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(153, 255, 204, 0.35) 0%, rgba(153, 255, 204, 0) 70%);
    pointer-events: none;
}

.tarjeta-login .panel-marca .marca-icono-grande {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.75rem;
    background: var(--marca-menta);
    color: var(--marca-negro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.tarjeta-login .panel-marca h1 {
    color: var(--marca-blanco);
    font-weight: 100;
    font-size: 2.1rem;
    line-height: 1.15;
}

.tarjeta-login .panel-marca p {
    color: rgba(255, 255, 255, 0.7);
}

.tarjeta-login .panel-formulario {
    padding: 2.5rem 2rem;
}

/* ---------------------------------------------------------------------------
 * Indicadores del dashboard (tarjetas KPI)
 * ------------------------------------------------------------------------- */
.kpi-card {
    border: 1px solid var(--marca-gris-borde);
    border-radius: var(--bs-border-radius);
    background: var(--marca-blanco);
    padding: 0.85rem 1rem;
    height: 100%;
}

.kpi-card .kpi-etiqueta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--marca-gris-texto);
    font-weight: 600;
}

.kpi-card .kpi-valor {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--marca-negro);
}

.kpi-card.kpi-alerta {
    border-color: rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.05);
}