/* =========================================================
   BIOEVOLUTIVO — Sistema de Gestión
   Hoja de estilos principal
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variables globales ── */
:root {
    --sidebar-bg:       #1c1c2e;
    --sidebar-width:    240px;
    --sidebar-active:   #27ae60;
    --sidebar-hover:    rgba(255,255,255,0.08);
    --topbar-bg:        #1c1c2e;
    --topbar-height:    60px;
    --body-bg:          #f0f2f5;
    --card-radius:      14px;
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.12);
    --green:            #27ae60;
    --orange:           #e67e22;
    --blue:             #2980b9;
    --red:              #e74c3c;
    --text-dark:        #1a1a2e;
    --text-muted:       #8a9bb0;
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--body-bg);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--text-dark);
    margin: 0;
    font-size: 14px;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.container-fluid.p-0 > .row.g-0 {
    min-height: 100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Logo / cabecera del sidebar */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 16px 18px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-align: center;
}

.sidebar-brand-name {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.2;
}

.sidebar-brand-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 3px;
}

/* legacy — por si alguna vista todavía usa estas clases */
.sidebar-header,
.logo-box {
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 18px 14px;
    text-align: center;
}

.sidebar-header img,
.logo-box img {
    max-width: 110px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.logo-box h5 {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    margin: 0;
}

.logo-box small {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Nav links */
.sidebar .nav {
    padding: 10px 0;
    flex: 1;
}

.sidebar .nav-link {
    color: rgba(255,255,255,0.65);
    padding: 10px 18px;
    border-radius: 10px;
    margin: 2px 10px;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 0.18s, color 0.18s;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar .nav-link i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

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

.sidebar .nav-link.active {
    background: var(--green);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(39,174,96,0.35);
}

.sidebar .nav-link.text-danger {
    color: #e57373 !important;
}

.sidebar .nav-link.text-danger:hover {
    background: rgba(231,76,60,0.15);
    color: #e74c3c !important;
}

/* Separador de sección admin */
.sidebar .nav-divider {
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 10px 18px;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    background: var(--topbar-bg);
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    width: 100%;
    box-sizing: border-box;
}

/* Logo centrado — columna del medio */
.topbar > a:nth-child(2) {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botones — columna derecha */
.topbar > div:last-child {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Logo específico de la topbar */
.topbar-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Zona derecha */
.topbar > div:last-child {
    display: flex;
    align-items: center;
}

/* Badge de vencidas */
.topbar-badge {
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    background: var(--red) !important;
    color: #fff !important;
}

/* Icono campana */
.topbar-icon {
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    cursor: pointer;
    transition: color 0.15s;
}
.topbar-icon:hover { color: #fff; }

/* Nombre de usuario */
.topbar-user {
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.topbar-user i { color: rgba(255,255,255,0.6); }

/* Botón cerrar sesión */
.topbar-btn-logout {
    font-size: 12.5px !important;
    padding: 5px 14px !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    background: var(--red) !important;
    border-color: var(--red) !important;
    white-space: nowrap;
}

/* =========================================================
   CONTENT WRAPPER
   ========================================================= */

.content-wrapper {
    padding: 28px 28px 40px;
    flex: 1;
    min-width: 0;
}

/* Título de página */
.page-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

/* =========================================================
   CARDS DE MÉTRICAS (las 4 grandes)
   ========================================================= */

.metric-card {
    border-radius: var(--card-radius);
    padding: 18px 20px;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}

.metric-card .metric-label {
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0.92;
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-card .metric-label i {
    font-size: 14px;
    background: rgba(255,255,255,0.2);
    padding: 5px;
    border-radius: 7px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-card .metric-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    word-break: break-word;
}

.metric-card.green  { background: linear-gradient(135deg, #27ae60, #1e8449); }
.metric-card.orange { background: linear-gradient(135deg, #e67e22, #ca6f1e); }
.metric-card.blue   { background: linear-gradient(135deg, #2980b9, #1a6fa0); }
.metric-card.red    { background: linear-gradient(135deg, #e74c3c, #c0392b); }

/* Compatibilidad con clases antiguas card-stats */
.card-stats {
    border-radius: var(--card-radius);
    padding: 20px 22px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.card-stats h2 {
    margin: 0;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -1px;
}

.card-green  { color: #fff !important; background: linear-gradient(135deg, #27ae60, #1e8449); border-radius: var(--card-radius); }
.card-orange { color: #fff !important; background: linear-gradient(135deg, #e67e22, #ca6f1e); border-radius: var(--card-radius); }
.card-blue   { color: #fff !important; background: linear-gradient(135deg, #2980b9, #1a6fa0); border-radius: var(--card-radius); }
.card-red    { color: #fff !important; background: linear-gradient(135deg, #e74c3c, #c0392b); border-radius: var(--card-radius); }

/* =========================================================
   PANELES / BOX
   ========================================================= */

.box-panel {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.box-panel h5,
.box-panel .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

/* =========================================================
   TABLAS
   ========================================================= */

.table {
    font-size: 13.5px;
    margin-bottom: 0;
}

.table thead th {
    background-color: #2c2c44;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 11px 14px;
    border: none;
    text-transform: none;
}

.table thead th:first-child { border-radius: 8px 0 0 8px; }
.table thead th:last-child  { border-radius: 0 8px 8px 0; }

.table tbody tr {
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.12s;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    color: #2d3748;
}

/* =========================================================
   BADGES DE ESTADO
   ========================================================= */

.badge-estado {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Próximo a vencer — amarillo/naranja */
.badge-proximo,
.badge-warning {
    background: #fef3cd;
    color: #b7770d;
    border: 1px solid #fbd96e;
}

/* Vencida — rojo */
.badge-vencida,
.badge-danger {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6c2;
}

/* Al día — verde */
.badge-aldia,
.badge-success {
    background: #e8f8ef;
    color: #1e8449;
    border: 1px solid #a9dfbf;
}

/* Pendiente — gris */
.badge-pendiente {
    background: #f0f2f5;
    color: #5a6a7a;
    border: 1px solid #dce1e7;
}

/* Bootstrap overrides para badges */
span.badge.bg-warning { background: #fef3cd !important; color: #b7770d !important; }
span.badge.bg-danger  { background: #e74c3c !important; color: #fff !important; }
span.badge.bg-success { background: #27ae60 !important; color: #fff !important; }

/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary {
    background: #2980b9;
    border-color: #2980b9;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13.5px;
}

.btn-success {
    background: var(--green);
    border-color: var(--green);
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13.5px;
}

.btn-success-lg {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(39,174,96,0.3);
}

.btn-outline-secondary {
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

/* Filtrar button azul como en la imagen */
.btn-filter {
    background: #2980b9;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn-filter:hover { background: #1a6fa0; }

/* Ver todos */
.btn-ver-todos {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-ver-todos:hover { background: #1e8449; color: #fff; }

/* =========================================================
   FORMULARIOS / INPUTS
   ========================================================= */

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #dce1e7;
    font-size: 13.5px;
    padding: 8px 12px;
    color: var(--text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.15);
    outline: none;
}

/* Input de búsqueda con ícono */
.input-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-search-wrap .form-control {
    padding-right: 36px;
}

.input-search-wrap i {
    position: absolute;
    right: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* =========================================================
   ALERTAS / NOTIFICACIONES
   ========================================================= */

.alert {
    border-radius: 10px;
    font-size: 13.5px;
    border: none;
    padding: 12px 18px;
}

/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination .page-link {
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    border-color: #dce1e7;
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* =========================================================
   UTILIDADES
   ========================================================= */

.text-muted-custom { color: var(--text-muted) !important; }

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 18px;
}

/* Icono circular de métrica */
.metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ── Offcanvas mobile: estilo de los nav-links dentro del panel deslizable ── */
#mobileSidebar .nav-link {
    color: rgba(255,255,255,0.65);
    padding: 10px 18px;
    border-radius: 10px;
    margin: 2px 10px;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 0.18s, color 0.18s;
    text-decoration: none;
    white-space: nowrap;
}
#mobileSidebar .nav-link:hover,
#mobileSidebar .nav-link.active {
    background: var(--sidebar-hover);
    color: #fff;
}
#mobileSidebar .nav-link.active {
    background: var(--green);
    font-weight: 600;
}
#mobileSidebar .nav-link.text-danger { color: #e57373 !important; }
#mobileSidebar .nav-divider {
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 10px 18px;
}
#mobileSidebar .nav-link i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    /* Forzar ocultamiento del sidebar desktop en mobile */
    .col-md-2.sidebar {
        display: none !important;
    }
    /* El contenido ocupa todo el ancho */
    .col-md-10 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Scroll horizontal en tablas */
    .box-panel,
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Topbar: ocultar texto largo en pantallas chicas */
    .topbar-user {
        display: none !important;
    }
    /* Cards de métricas en columna única */
    .metric-card {
        margin-bottom: 12px;
    }
    .metric-card .metric-value {
        font-size: 28px;
    }
    /* Ajuste de padding general */
    .content-wrapper {
        padding: 12px !important;
    }
}

@media (max-width: 767px) {
    .content-wrapper { padding: 16px; }
    .metric-card .metric-value { font-size: 28px; }
    /* Scroll horizontal en tablas */
    .box-panel { overflow-x: auto; }
}