/* ==========================================================================
   Ferommis — Tema de marca (sobre Bootstrap 5, sin build step)
   Paleta verde inspirada en el diseño de Stitch "Panel de Administración".
   ========================================================================== */

:root {
    /* Marca */
    --fero-primary: #006e1c;        /* verde de marca */
    --fero-primary-hover: #00591a;  /* hover más oscuro */
    --fero-primary-active: #004715;
    --fero-accent: #86d600;         /* acento brillante (item activo sidebar) */
    --fero-accent-soft: #a3f635;

    /* Alto del navbar (debe coincidir con el top/alto del sidebar) */
    --fero-header-h: 56px;

    /* Shell oscuro (sidebar / navbar) */
    --fero-dark: #1f2421;
    --fero-dark-2: #262c28;
    --fero-dark-border: rgba(255, 255, 255, 0.12);
    --fero-on-dark: #e7eae6;
    --fero-on-dark-muted: #aab3a8;

    /* Bootstrap: re-mapeo de variables globales a la marca */
    --bs-primary: #006e1c;
    --bs-primary-rgb: 0, 110, 28;
    --bs-link-color: #006e1c;
    --bs-link-color-rgb: 0, 110, 28;
    --bs-link-hover-color: #00591a;
}

/* ----- Layout base ------------------------------------------------------- */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout {
    flex: 1 0 auto;
}

/* Navbar de alto fijo para que el sidebar (sticky) quede pegado sin hueco. */
.navbar.sticky-top {
    min-height: var(--fero-header-h);
}

/* ----- Cards de catálogos ------------------------------------------------ */
.catalogo-card {
    border: 1px solid var(--bs-border-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.catalogo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1) !important;
}

.catalogo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 110, 28, 0.1);
    color: var(--fero-primary);
    font-size: 1.6rem;
}

/* ----- Botones de acción de ícono (en tablas) --------------------------- */
.btn-icon {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.35rem;
    line-height: 1;
}

.btn-icon i {
    font-size: 1rem;
    vertical-align: -0.05em;
}

/* Warning/info de Bootstrap son demasiado claros para ícono blanco (contraste
   ~1.5:1). Para las acciones de tabla se oscurecen a tonos ámbar/teal que dan
   ~5:1 con blanco, conservando el ícono blanco y la semántica de color. */
.btn-icon.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b45309;
    --bs-btn-border-color: #b45309;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #98450a;
    --bs-btn-hover-border-color: #98450a;
    --bs-btn-active-bg: #98450a;
    --bs-btn-active-border-color: #98450a;
}

.btn-icon.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0e7490;
    --bs-btn-border-color: #0e7490;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5e75;
    --bs-btn-hover-border-color: #0b5e75;
    --bs-btn-active-bg: #0b5e75;
    --bs-btn-active-border-color: #0b5e75;
}

/* ----- Botones de marca -------------------------------------------------- */
/* Bootstrap compila .btn-primary desde SCSS, así que lo recoloreamos a mano. */
.btn-primary {
    --bs-btn-bg: var(--fero-primary);
    --bs-btn-border-color: var(--fero-primary);
    --bs-btn-hover-bg: var(--fero-primary-hover);
    --bs-btn-hover-border-color: var(--fero-primary-hover);
    --bs-btn-active-bg: var(--fero-primary-active);
    --bs-btn-active-border-color: var(--fero-primary-active);
    --bs-btn-disabled-bg: var(--fero-primary);
    --bs-btn-disabled-border-color: var(--fero-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--fero-primary);
    --bs-btn-border-color: var(--fero-primary);
    --bs-btn-hover-bg: var(--fero-primary);
    --bs-btn-hover-border-color: var(--fero-primary);
    --bs-btn-active-bg: var(--fero-primary-active);
    --bs-btn-active-border-color: var(--fero-primary-active);
}

/* ----- Color / fondo / enlaces ------------------------------------------ */
.text-primary {
    color: var(--fero-primary) !important;
}

.bg-primary {
    background-color: var(--fero-primary) !important;
}

/* Los enlaces por defecto ya toman el verde vía --bs-link-color (en :root);
   no se fuerza un selector global para no pisar utilidades semánticas como
   .link-secondary. */
.link-primary {
    color: var(--fero-primary);
}

/* Foco verde (no azul) en inputs y controles */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
    border-color: var(--fero-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 110, 28, 0.25);
}

.form-check-input:checked {
    background-color: var(--fero-primary);
    border-color: var(--fero-primary);
}

/* La columna de contenido no debe desbordar al lado del sidebar. */
.content-col {
    min-width: 0;
}

/* ----- Sidebar (oscuro + acento verde) ---------------------------------- */
/* Sin padding horizontal: el item activo cubre todo el ancho, sin márgenes. */
.sidebar {
    width: 216px;                 /* 10% más angosto que el original (240px) */
    flex-shrink: 0;
    align-self: flex-start;       /* no estirarse con el alto del contenido */
    position: sticky;
    top: var(--fero-header-h);    /* pegado al navbar, sin hueco */
    height: calc(100vh - var(--fero-header-h)); /* alto consistente respecto a la pantalla */
    overflow-y: auto;
    background-color: var(--fero-dark) !important;
    border-right: 1px solid var(--fero-dark-border) !important;
    padding: 0.5rem 0;
    transition: width 0.2s ease;
}

/* Barra superior del sidebar con el botón de contraer */
.sidebar-top {
    padding: 0.25rem 0.75rem 0.5rem;
}

.sidebar-toggle {
    border: 0;
    background: transparent;
    color: var(--fero-on-dark-muted);
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 0.375rem;
}

.sidebar-toggle:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar .nav {
    gap: 0;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--fero-on-dark-muted);
    border-radius: 0;
    padding: 0.7rem 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link i {
    width: 1.25rem;
    font-size: 1.1rem;
    text-align: center;
    margin-right: 0.85rem;
    flex-shrink: 0;
}

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

.sidebar .nav-link.active {
    background-color: var(--fero-primary);
    color: #fff;
    box-shadow: inset 4px 0 0 0 var(--fero-accent);
}

.sidebar .nav-link.disabled {
    color: rgba(170, 179, 168, 0.45);
}

/* Pie del sidebar: logout */
.sidebar-footer {
    border-top: 1px solid var(--fero-dark-border);
    padding: 0.5rem 0.75rem 0;
    margin-top: 0.5rem;
}

.sidebar-footer .btn-logout {
    width: 100%;
    color: var(--fero-on-dark-muted);
    border: 1px solid var(--fero-dark-border);
    background-color: transparent;
}

.sidebar-footer .btn-logout i {
    font-size: 1.05rem;
}

.sidebar-footer .btn-logout .link-label {
    margin-left: 0.5rem;
}

.sidebar-footer .btn-logout:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* ----- Modo "solo íconos" (rail) en escritorio -------------------------- */
.layout.sidebar-mini .sidebar {
    width: 64px;
}

.layout.sidebar-mini .sidebar .link-label {
    display: none;
}

.layout.sidebar-mini .sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.layout.sidebar-mini .sidebar .nav-link i {
    margin-right: 0;
}

.layout.sidebar-mini .sidebar-top {
    justify-content: center !important;
}

.layout.sidebar-mini .sidebar-footer {
    padding-left: 0;
    padding-right: 0;
}

.layout.sidebar-mini .sidebar-footer .btn-logout {
    justify-content: center;
}

/* ----- Responsive: sidebar colapsable en móvil -------------------------- */
/* En escritorio (≥769px) la utilidad .d-md-flex mantiene el sidebar visible
   como flex; en móvil .collapse lo oculta hasta que el toggler lo abre. */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }

    .sidebar,
    .layout.sidebar-mini .sidebar {
        width: 100%;
        height: auto;
        position: static;         /* en móvil no es sticky ni de alto fijo */
        overflow-y: visible;
    }

    /* En móvil siempre se muestran las etiquetas (no aplica el modo rail). */
    .layout.sidebar-mini .sidebar .link-label {
        display: inline;
    }

    .layout.sidebar-mini .sidebar .nav-link {
        justify-content: flex-start;
        padding-left: 1.25rem;
    }

    .layout.sidebar-mini .sidebar .nav-link i {
        margin-right: 0.85rem;
    }
}