/* =====================================================================
   Paleta de marca del Sistema de Minutas + reasignacion de las variables
   de Bootstrap 5.3 a esta paleta, para que botones, badges, alertas,
   enlaces, checkboxes, etc. hereden el estilo automaticamente.
   ===================================================================== */
:root {
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F8FAFC;

    --color-primary: #16324F;
    --color-primary-hover: #102A43;

    --color-secondary: #2E7D66;
    --color-secondary-light: #E8F5F0;

    --color-accent: #D99727;
    --color-accent-light: #FFF4DB;

    --color-text: #1F2937;
    --color-text-secondary: #64748B;
    --color-border: #E2E8F0;

    --color-success: #198754;
    --color-warning: #F59E0B;
    --color-danger: #DC3545;
    --color-info: #2563EB;
    --color-slate: #8FA6C4;

    /* --- Bootstrap 5.3 --- */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 22, 50, 79;
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: 46, 125, 102;
    --bs-success: var(--color-success);
    --bs-success-rgb: 25, 135, 84;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 220, 53, 69;
    --bs-info: var(--color-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-body-bg: var(--color-bg-secondary);
    --bs-body-color: var(--color-text);
    --bs-secondary-color: var(--color-text-secondary);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 22, 50, 79;
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: 16, 42, 67;
    --bs-emphasis-color: var(--color-text);
}

body {
    min-height: 100vh;
    color: var(--color-text);
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Botones: colores explicitos ademas de las variables de Bootstrap,
   para cubrir clases que Bootstrap resuelve con valores ya calculados --- */
.btn {
    font-weight: 500;
}
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-text-secondary);
    --bs-btn-hover-border-color: var(--color-text-secondary);
}
.btn-outline-success {
    --bs-btn-color: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
}
.btn-outline-dark {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
}

/* --- Navbar: fija arriba y se distingue del contenido de forma dinamica
   (sombra + linea de acento que aparecen al hacer scroll, ver app.js) --- */
.navbar.bg-dark {
    background-color: var(--color-primary) !important;
}
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    transition: box-shadow .25s ease, background-color .25s ease;
}
.app-navbar.is-scrolled {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .35), 0 0 0 1px rgba(217, 151, 39, .35);
}

/* --- Sidebar --- */
.app-sidebar {
    background-color: var(--color-primary);
    border-color: var(--color-primary-hover) !important;
}
.app-sidebar .nav-link {
    color: rgba(255, 255, 255, .8);
    border-radius: .375rem;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    position: relative;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
    transform: translateX(3px);
}
.app-sidebar .nav-link.active {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px -2px rgba(217, 151, 39, .55);
}
.app-sidebar .nav-link i {
    width: 1.1rem;
    text-align: center;
    color: rgba(255, 255, 255, .55);
    transition: color .15s ease, transform .15s ease;
}
.app-sidebar .nav-link:hover i,
.app-sidebar .nav-link.active i {
    color: inherit;
}
.app-sidebar .nav-link:hover i {
    transform: scale(1.15);
}
/* Icono siempre encendido del Dashboard (unico enlace fuera de cualquier
   acordeon), para que el punto de entrada se note apenas se mira el menu. */
.app-sidebar .nav-link-home:not(.active) i {
    color: var(--color-accent);
}
.app-sidebar .nav-section-title {
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 1rem 0 .35rem;
    padding: 0 .5rem;
}

/* --- Sidebar: acordeon de secciones, con lineas divisorias y color propio
   por seccion (data-tinte) para que el menu se sienta vivo y sea facil de
   escanear de un vistazo, sin perder ningun icono existente. --- */
.app-sidebar .nav-section {
    position: relative;
    margin-top: .55rem;
    padding-top: .55rem;
}
.app-sidebar .nav-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: .35rem;
    right: .35rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .16) 55%, transparent);
}
.app-sidebar .nav-section-toggle {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .4rem .5rem;
    border-radius: .375rem;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.app-sidebar .nav-section-toggle:hover {
    background-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
}
.app-sidebar .nav-section-label {
    flex: 1;
    text-align: left;
}
.app-sidebar .nav-section-dot {
    width: .4rem;
    height: .4rem;
    min-width: .4rem;
    border-radius: 50%;
    margin-right: .55rem;
    background-color: rgba(255, 255, 255, .35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.app-sidebar .nav-section-toggle:hover .nav-section-dot {
    transform: scale(1.35);
}
.app-sidebar .nav-section[data-tinte="info"] .nav-section-dot { background-color: var(--color-info); }
.app-sidebar .nav-section[data-tinte="secondary"] .nav-section-dot { background-color: var(--color-secondary); }
.app-sidebar .nav-section[data-tinte="accent"] .nav-section-dot { background-color: var(--color-accent); }
.app-sidebar .nav-section[data-tinte="slate"] .nav-section-dot { background-color: var(--color-slate); }

/* El color de la seccion se nota al pasar el mouse sobre sus enlaces
   (el estado activo ya se distingue con el fondo dorado, asi que el tinte
   por seccion se reserva para el hover, sin competir con "activo"). */
.app-sidebar .nav-section[data-tinte="info"] .nav-link:hover:not(.active) i { color: var(--color-info); }
.app-sidebar .nav-section[data-tinte="secondary"] .nav-link:hover:not(.active) i { color: var(--color-secondary); }
.app-sidebar .nav-section[data-tinte="accent"] .nav-link:hover:not(.active) i { color: var(--color-accent); }
.app-sidebar .nav-section[data-tinte="slate"] .nav-link:hover:not(.active) i { color: var(--color-slate); }

.app-sidebar .nav-section-chevron {
    font-size: .68rem;
    margin-left: .5rem;
    transition: transform .2s ease;
}
.app-sidebar .nav-section-toggle[aria-expanded="true"] .nav-section-chevron {
    transform: rotate(180deg);
}
.app-sidebar .nav-section-toggle[aria-expanded="true"] {
    color: rgba(255, 255, 255, .9);
}
.app-sidebar .nav-section-body {
    padding-top: .3rem;
    /* Pequeña animacion de entrada cuando Bootstrap termina de expandir. */
    animation: nav-section-aparecer .18s ease;
}
@keyframes nav-section-aparecer {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Sub-acordeon (Catalogos dentro de Administracion): un nivel mas de sangria
   y su propia linea divisoria (mas corta) para separarlo del resto de
   enlaces de Administracion. */
.app-sidebar .nav-section-body .nav-section {
    margin-top: .4rem;
    padding-top: .4rem;
}
.app-sidebar .nav-section-body .nav-section::before {
    left: 1.1rem;
}
.app-sidebar .nav-section-body .nav-section-toggle {
    padding-left: 1.25rem;
    font-size: .68rem;
}
.app-sidebar .nav-section-body .nav-section-body .nav-link {
    padding-left: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar .nav-link,
    .app-sidebar .nav-link i,
    .app-sidebar .nav-section-dot,
    .app-sidebar .nav-section-body {
        transition: none;
        animation: none;
    }
    .app-sidebar .nav-link:hover {
        transform: none;
    }
}

/* --- Tarjetas --- */
.card {
    border-color: var(--color-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card-header a {
    color: #fff;
}
.card-header .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .6);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: var(--color-primary);
}

/* --- Tarjetas de indicador (dashboard) --- */
.stat-card {
    border-color: var(--color-border);
}
.stat-card .stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background-color: var(--color-secondary-light);
    color: var(--color-secondary);
}
.stat-card .stat-icon.accent {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}
.stat-card .stat-icon.primary {
    background-color: rgba(22, 50, 79, .1);
    color: var(--color-primary);
}

/* --- Tablas --- */
.table > :not(caption) > * > * {
    vertical-align: middle;
}
.table-light, table thead.table-light th {
    --bs-table-bg: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
}

/* --- Formularios --- */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(22, 50, 79, .15);
}
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(22, 50, 79, .15);
}

/* --- Estados vacios --- */
.estado-vacio {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2.5rem 1rem;
}
.estado-vacio i {
    font-size: 2rem;
    color: var(--color-border);
    margin-bottom: .5rem;
    display: block;
}

/* --- Alertas con icono --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.alert i {
    margin-top: .15rem;
}

/* --- Badges de estado --- */
.badge {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* --- Calendario de minutas (vista semanal / mensual) --- */
.calendario-encabezado {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
    margin-bottom: .4rem;
}
.calendario-encabezado > div {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: .03em;
}
.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
}
.calendario-dia {
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    padding: .5rem .4rem;
    min-height: 92px;
    background: var(--color-bg);
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.calendario-dia:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(22, 50, 79, .12);
}
.calendario-dia.hoy {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}
.calendario-dia.vacio {
    background: transparent;
    border: none;
    cursor: default;
    box-shadow: none;
}
.calendario-dia .numero-dia {
    font-weight: 700;
    font-size: .95rem;
}
.calendario-dia .calendario-raciones {
    font-size: .72rem;
    color: var(--color-text-secondary);
}
.calendario-dia .calendario-costo {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
}
.calendario-dia .calendario-badge {
    font-size: .62rem;
}
.calendario-semana-tarjeta {
    border: 1px solid var(--color-border);
    border-radius: .6rem;
    padding: .75rem .5rem;
    background: var(--color-bg);
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
    height: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}
.calendario-semana-tarjeta:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(22, 50, 79, .12);
}
.calendario-semana-tarjeta.hoy {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}
@media (max-width: 576px) {
    .calendario-dia { min-height: 68px; padding: .35rem; font-size: .85rem; }
    .calendario-dia .calendario-raciones, .calendario-dia .calendario-costo { display: none; }
}

/* --- Login --- */
.login-brand {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .75rem;
    background-color: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}