/* ==========================================
   Fuentes personalizadas
   ========================================== */
/* Fuente para títulos: estilo DIN */
.custom-title,
legend,
.tab-button,
.btn-din {
    font-family: 'Titillium Web', 'Segoe UI', sans-serif;
    font-weight: 700;
}

/* Fuente para texto general: Exo 2014 */
.custom-text,
body,
.form-control,
.form-select,
label,
small,
.text-muted,
.btn-exo {
    font-family: 'Exo', 'Segoe UI', sans-serif;
    color: #000000;
}

/* ==========================================
   Colores y variables
   ========================================== */
:root {
    --color-verde-principal: #73ac80; /* Botones secundarios, pestañas activas */
    --color-verde-oscuro: #355734; /* Botón principal, títulos */
    --color-texto: #000000;
    --color-fondo-inactivo: #e0e0e0;
}

/* ==========================================
   CLASES REUTILIZABLES
   ========================================== */

/* Títulos (legend, h1, h2, etc.) */
.custom-title,
legend {
    color: var(--color-verde-oscuro) !important;
    font-size: 1.25rem;
}

/* Botón principal (Guardar, Crear, etc.) */
.btn-verde-oscuro {
    background-color: var(--color-verde-oscuro) !important;
    border-color: var(--color-verde-oscuro) !important;
    color: white !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-weight: 600;
}

    .btn-verde-oscuro:hover {
        background-color: #2a442a !important;
        border-color: #2a442a !important;
    }

/* Botón secundario (Detalles, Acciones, Pestañas activas) */
.btn-verde-principal {
    background-color: var(--color-verde-principal) !important;
    border-color: var(--color-verde-principal) !important;
    color: var(--color-texto) !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-weight: 600;
}

    .btn-verde-principal:hover {
        background-color: #5f9970 !important;
        border-color: #5f9970 !important;
    }

/* Pestañas de navegación */
.tab-button {
    flex: 1;
    min-width: 120px;
    padding: 14px 10px;
    border: none;
    background: var(--color-fondo-inactivo);
    cursor: pointer;
    color: var(--color-verde-oscuro);
    transition: all 0.2s;
}

    .tab-button:hover {
        background: #d0d0d0;
    }

    .tab-button.active {
        background: var(--color-verde-principal) !important;
        color: var(--color-texto) !important;
    }

/* Badge personalizado (ACTIVO/INACTIVO) */
.badge-verde {
    background-color: var(--color-verde-principal) !important;
    color: var(--color-texto) !important;
    font-family: 'Exo', sans-serif !important;
    font-weight: 600 !important;
    padding: 0.4em 0.7em !important;
    border-radius: 0.375rem !important;
}

/* Estilo para tablas */
.table thead th {
    font-family: 'Titillium Web', sans-serif !important;
    font-weight: 700 !important;
    color: var(--color-verde-oscuro) !important;
}


.tab-content-section {
    display: none;
    padding: 1.5rem 0;
}

    .tab-content-section:first-of-type {
        display: block;
    }