/*
 * Estilos propios de la app. Archivo plano, sin build step: se puede
 * editar directamente y los cambios se ven al recargar la pagina.
 */

:root {
    --app-primary: #146c43;
    --app-primary-dark: #0f5132;
    --app-accent: #d63384;
    --app-sidebar-bg: #1b2a22;
    --app-sidebar-active: #146c43;
    --app-bg: #f5f7f6;
}

body {
    background-color: var(--app-bg);
    min-height: 100vh;
}

/* ---------- Navbar ---------- */
.app-navbar {
    background-color: var(--app-primary-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.app-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: .02em;
}

.app-navbar .navbar-brand small {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    opacity: .8;
}

/* ---------- Sidebar ---------- */
/*
 * Bootstrap fuerza `.offcanvas-lg` (y su `.offcanvas-body`) a fondo
 * transparente con !important a partir de 992px (para que el offcanvas
 * "desaparezca" y se vea como un sidebar normal). Como reusamos esa misma
 * clase como nuestro sidebar fijo con fondo oscuro, hay que ganarle con
 * nuestro propio !important o el fondo queda transparente y el texto
 * blanco se vuelve invisible sobre el fondo claro de la pagina.
 */
.app-sidebar,
.app-sidebar .offcanvas-body {
    background-color: var(--app-sidebar-bg) !important;
}

.app-sidebar {
    width: 260px;
    flex-shrink: 0;
}

/* Mas aire arriba de los links, separandolos del topbar (el fondo se mantiene pegado). */
.app-sidebar .offcanvas-body {
    padding-top: 1.75rem !important;
}

.app-sidebar .nav-link {
    color: rgba(255, 255, 255, .75);
    border-radius: .5rem;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
}

.app-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.app-sidebar .nav-link.active {
    color: #fff;
    background-color: var(--app-sidebar-active);
}

.app-sidebar .sidebar-heading {
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08em;
    padding: .75rem .8rem .25rem;
}

/* ---------- Layout shell ---------- */
.app-shell {
    padding-top: 56px;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Utilidades ---------- */
.badge-estado {
    font-size: .78rem;
    font-weight: 500;
}

.card-stat {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.card-stat .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
}

.auth-card {
    max-width: 460px;
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-primary-dark), var(--app-primary));
    padding: 1.5rem;
}

.table-responsive-card thead {
    background-color: #eef3f0;
}

/* Mejor tacto en telefonos */
@media (max-width: 991.98px) {
    .app-main {
        padding: 1rem !important;
    }

    .card-stat .stat-value {
        font-size: 1.5rem;
    }
}