/* C:\FenixAnalyticsProject\static\css\main.css */

:root {
    /* Nueva Paleta de Colores */
    --color-principal-azul-oscuro: #07447A;
    --color-secundario-gris-calido: #607D8B;
    --color-texto-principal-gris-oscuro: #263238;
    --color-fondo-gris-muy-claro: #F0F4F8; /* Azul muy claro para el fondo */
    --color-fondo-gris: #d4cccc;
    --color-acento-dorado-suave: #FFB300;
    --color-advertencia-naranja: #FF9800;
    --color-rojo-violeta: #C2185B;
    /* --color-fucsia: #E3315E; /* Para texto de tarjeta "Productos" - se aplicará inline o en app_launcher.html */
    /* --color-amarillo: #FFCC29; /* Para texto de tarjeta "Planificación" - se aplicará inline o en app_launcher.html */
    
    --text-on-principal-header: #FFFFFF; /* Texto blanco para el header azul oscuro */

    /* Tipografía */
    --font-family-base: "Roboto", sans-serif;
    --font-family-headings: "Montserrat", sans-serif;

    /* UI General */
    --border-radius-base: 0.25rem; /* Bootstrap default */
    --border-radius-cards: 0.5rem; /* Tarjetas un poco más redondeadas */
    --box-shadow-cards: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* Sombra para tarjetas */
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-fondo-gris-muy-claro); 
    color: var(--color-texto-principal-gris-oscuro); 
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--color-texto-principal-gris-oscuro); 
}

/* --- Barra de Navegación (Header) --- */
.navbar {
    background-color: var(--color-principal-azul-oscuro) !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
}

.navbar-brand {
    font-family: var(--font-family-headings);
    font-weight: 600;
    color: var(--text-on-principal-header) !important;
}

.navbar-main-header .navbar .nav-link {
    font-family: var(--font-family-headings);
    color: var(--text-on-principal-header);
    opacity: 0.9; 
    transition: opacity 0.2s ease-in-out;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar .nav-item.dropdown > .dropdown-toggle.nav-link {
    padding-top: 0.5rem; /* O el padding vertical que tenga tu .nav-link general */
    padding-bottom: 0.5rem; /* O el padding vertical que tenga tu .nav-link general */
    /* El padding-left y padding-right se heredarán de .navbar .nav-link */
}

.navbar-main-header .nav-link:hover,
.navbar-main-header .nav-link:focus,
.navbar-main-header .navbar-nav .nav-link.active, 
.navbar-main-header .navbar-nav .show > .nav-link { 
    opacity: 1;
    color: var(--text-on-principal-header);
}
/* Colores específicos para items del menú de navegación (ejemplos) */
.nav-link.ordenes-link { color: var(--color-acento-dorado-suave) !important; }
.nav-link.inicio-link { color: var(--color-advertencia-naranja) !important; }
.nav-link.costos-link { color: var(--color-rojo-violeta) !important; }


.navbar-toggler { 
    border-color: rgba(255,255,255,0.2);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Menú Desplegable del Usuario (Dropdown) --- */
.dropdown-menu {
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-cards);
    border: 1px solid #ddd; /* Borde sutil */
}

.dropdown-item {
    color: var(--color-texto-principal-gris-oscuro) !important; 
    font-family: var(--font-family-base);
}

.dropdown-item:hover, 
.dropdown-item:focus {
    color: var(--color-texto-principal-gris-oscuro) !important;
    background-color: #e9ecef; 
}
.dropdown-divider {
    border-top-color: #ddd;
}

/* --- Contenido Principal --- */
main.container-fluid {
    flex-grow: 1; 
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}

/* --- Patron de pantallas de mantenimiento / CRUD --- */
.maintenance-shell {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(0rem, 1vw, 0.75rem);
}

.maintenance-hero {
    background: linear-gradient(135deg, rgba(7, 68, 122, 0.96), rgba(7, 68, 122, 0.78));
    color: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 24px rgba(7, 68, 122, 0.16);
}

.maintenance-hero h3,
.maintenance-hero .text-muted {
    color: #fff !important;
}

.maintenance-hero .eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.maintenance-section {
    border: 1px solid #e5eaf0;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(38, 50, 56, 0.05);
    overflow: hidden;
}

.maintenance-section + .maintenance-section {
    margin-top: 1rem;
}

.maintenance-section-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf0;
}

.maintenance-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #07447a;
    background: rgba(7, 68, 122, 0.1);
    flex: 0 0 auto;
}

.maintenance-section-body {
    padding: 1.25rem;
}

.maintenance-help-card {
    border: 1px solid #e5eaf0;
    border-radius: 0.75rem;
    background: #f8fafc;
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

.maintenance-actions {
    border-top: 1px solid #e5eaf0;
    background: #fff;
    padding-top: 1rem;
}

.maintenance-stat-card {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.875rem 1rem;
}

.maintenance-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.78;
}

.maintenance-stat-value {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.maintenance-info-list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.maintenance-info-item {
    display: grid;
    grid-template-columns: minmax(130px, 0.42fr) 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #edf1f5;
}

.maintenance-info-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.maintenance-info-item dt {
    color: #607d8b;
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0;
}

.maintenance-info-item dd {
    margin: 0;
    color: #263238;
    font-weight: 500;
}

.maintenance-table {
    margin-bottom: 0;
}

.maintenance-table thead th {
    color: #607d8b;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.maintenance-table tbody td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: middle;
}

.maintenance-table tbody tr {
    transition: background-color 0.15s ease-in-out;
}

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

.maintenance-avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #07447a;
    background: rgba(7, 68, 122, 0.1);
    font-weight: 800;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.maintenance-entity-title {
    color: #263238;
    font-weight: 700;
    text-decoration: none;
}

.maintenance-entity-title:hover {
    color: #07447a;
    text-decoration: underline;
}

.maintenance-entity-meta {
    color: #607d8b;
    font-size: 0.85rem;
}

.maintenance-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.maintenance-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

.maintenance-empty-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #07447a;
    background: rgba(7, 68, 122, 0.1);
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.required-mark {
    color: #c2185b;
    font-weight: 700;
}

@media (min-width: 1400px) {
    .maintenance-hero {
        padding: 1.75rem 2rem;
    }

    .maintenance-section-body {
        padding: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .maintenance-help-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .maintenance-shell {
        padding: 0;
    }

    .maintenance-hero {
        padding: 1.25rem;
        border-radius: 0.5rem;
    }

    .maintenance-hero .btn,
    .maintenance-actions .btn {
        width: 100%;
    }

    .maintenance-section {
        border-radius: 0.5rem;
    }

    .maintenance-section-header,
    .maintenance-section-body,
    .maintenance-help-card {
        padding: 1rem;
    }

    .maintenance-actions {
        justify-content: stretch !important;
    }

    .maintenance-info-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .maintenance-actions-cell .btn {
        width: auto;
    }
}

/* --- Pie de Página (Footer) --- */
footer.text-center {
    background-color: #e9ecef; /* Un gris un poco más oscuro que el fondo del body */
    border-top: 1px solid #ced4da;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

footer.text-center small {
    color: var(--color-secundario-gris-calido); 
    font-size: 0.875rem;
}



/* --- Estilos para el Breadcrumb --- */
/* Resalta el último elemento (la página actual) en la ruta de navegación */
.breadcrumb-item.active {
    font-weight: 900 !important; /* Letra en negrita (bold) */
    color: #000000 !important; /* Color de texto principal para mayor énfasis */
}



/* --- Estilos para Reducir el Tamaño de las Tarjetas del Menú Principal (app_dashboard.html) --- */

/* Usamos un selector más específico para garantizar que estos estilos se apliquen */
.app-dashboard-grid .app-card {
    /* --- Controla el tamaño general de la tarjeta --- */
    max-width: 220px;  /* <-- ANCHO MÁXIMO: Ajústalo a tu gusto */
    min-height: 200px; /* <-- ALTURA MÍNIMA: Para mantener la uniformidad */
    padding: 1rem;     /* <-- Reduce el espacio interno (relleno) */
    
    /* Centra la tarjeta si la columna es más ancha */
    margin-left: auto;
    margin-right: auto;
}

.app-dashboard-grid .app-card .app-icon i {
    /* --- Controla el tamaño del ícono --- */
    font-size: 2.5rem; /* <-- TAMAÑO DEL ÍCONO */
}

.app-dashboard-grid .app-card .card-title {
    /* --- Controla el tamaño del título --- */
    font-size: 1.1rem; /* <-- TAMAÑO DEL TÍTULO */
}

.app-dashboard-grid .app-card .card-text {
    /* --- Controla el tamaño de la descripción --- */
    font-size: 0.85rem; /* <-- TAMAÑO DE LA DESCRIPCIÓN */
}