/* --- Estilos Generales --- */
body.fondo {
    background-color: #000000;
    color: #f8f9fa;
    /* Un blanco suave para el texto general */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    padding-top: 80px;
}

/* --- Barra de Navegación (Navbar) --- */
.navbar {
    background-color: #000000 !important;
    /* Asegura que sea negro */
    border-bottom: 3px solid #F48024;
    /* Tu línea inferior naranja */
}

.navbar-brand img {
    max-height: 50px;
    /* Reduje un poco para que no sea tan dominante */
}

.nav-link {
    color: #FFFFFF !important;
    font-weight: bold;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem !important;
}

.nav-link:hover {
    color: #40E0D0 !important;
    /* Tu efecto hover turquesa */
}

.nav-item.active .nav-link {
    color: #F48024 !important;
    /* Tu enlace activo naranja */
}


/* --- Contenedor Principal (Jumbotron) --- */
.jumbotron {
    background-color: #1A1A1A;
    /* Un gris muy oscuro para diferenciarlo del fondo negro */
    border: 1px solid #F48024;
    /* Borde naranja para unificar con el navbar */
    border-radius: 0.5rem;
    padding: 3rem 2rem;
    margin-top: 80px;
    /* Espacio para el navbar fijo */
    margin-bottom: 2rem;
}

/* --- Títulos y Textos --- */
.jumbotron .display-5 {
    color: #F48024;
    /* Título principal en naranja */
    font-weight: 700;
    text-transform: uppercase;
}

.jumbotron .lead {
    color: #40E0D0;
    /* Título secundario en turquesa */
    font-weight: 400;
}

.jumbotron h4 {
    color: #FFFFFF;
    /* Títulos de sección en blanco */
    margin-bottom: 1rem;
}

.jumbotron p {
    color: #ced4da;
    /* Texto informativo en un gris claro */
    font-size: 1.1rem;
}


/* --- Botones Personalizados --- */
.btn-registro {
    background-color: #0B2161;
    /* Tu azul primario */
    border-color: #40E0D0;
    /* Borde turquesa para un look "neón" */
    color: #FFFFFF;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    border-width: 2px;
    transition: all 0.3s ease;
}

.btn-registro:hover {
    background-color: #40E0D0;
    /* El fondo se vuelve turquesa */
    color: #0B2161;
    /* El texto se vuelve azul */
    border-color: #0B2161;
    /* El borde se vuelve azul */
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(64, 224, 208, 0.3);
    /* Sombra turquesa sutil */
}

/* --- Otros estilos que tenías --- */
.thead-mercapava {
    background-color: #0B2161;
    border-color: #32383e;
    color: #fff;
}

/* Contenedor principal de la página (la tarjeta exterior) */
.card.form-card {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* Encabezado principal de la página (donde va el logo y el título grande) */
.form-card>.card-header {
    /* Usamos '>' para apuntar solo al encabezado principal */
    background-color: #1A1A1A;
    border: 1px solid #444;
    border-radius: .5rem .5rem 0 0;
}

/* ===== INICIO DE LA SOLUCIÓN ===== */
/* Colores para el texto del ENCABEZADO PRINCIPAL */
.form-card>.card-header .display-5 {
    color: #F48024;
    /* Título principal en Naranja */
}

.form-card>.card-header .lead {
    color: #40E0D0;
    /* Subtítulo en Turquesa */
}

.form-card>.card-header .text-muted {
    color: #adb5bd !important;
    /* Un gris claro para el texto pequeño (se usa !important para asegurar que sobreescriba a Bootstrap) */
}

/* ===== FIN DE LA SOLUCIÓN ===== */


/* Tarjetas INTERNAS que contienen los campos del formulario */
.form-card-inner {
    background-color: #1A1A1A;
    border: 1px solid #444;
    color: #f8f9fa;
    border-radius: .5rem;
}

/* Encabezado de las tarjetas internas (ej. "1. Información Básica") */
.form-card-inner .card-header {
    background-color: #212529;
    color: #F48024;
    border-bottom: 1px solid #444;
}

.form-label {
    color: #ced4da;
}

.form-check-input {
    background-color: #333;
    border-color: #555;
}

.form-check-input:checked {
    background-color: #0B2161;
    border-color: #40E0D0;
}

.text-turquoise {
    color: #40E0D0 !important;
    text-decoration: none;
}

.text-turquoise:hover {
    color: #fff !important;
}

.text-orange {
    color: #F48024 !important;
}


/* --- Estilos para el Datepicker de jQuery UI (Tema Oscuro) --- */
.ui-datepicker {
    background: #333;
    border: 1px solid #555;
    color: #fff;
    width: 280px;
    /* Ancho fijo para consistencia */
}

.ui-datepicker-header {
    background: #0B2161;
    border: 1px solid #0B2161;
    color: #F48024;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    background: #40E0D0;
    border: none !important;
}

.ui-datepicker-calendar .ui-state-default {
    background: #444;
    border: 1px solid #555;
    color: #fff;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #555;
    border-color: #777;
}

.ui-datepicker-calendar .ui-state-active {
    background: #40E0D0;
    color: #0B2161;
    border-color: #40E0D0;
}

/* --- Estilos para los Modales (Tema Oscuro) --- */
.modal-dark {
    background-color: #1A1A1A;
    border: 1px solid #F48024;
}

.modal-dark .modal-header {
    border-bottom: 1px solid #555;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.alerta-personalizada {
    color: #664d03;
    /* Un color de texto oscuro para buen contraste */
    background-color: #ffe69c;
    /* Tu color de fondo específico */
    border: 1px solid #ffc107;
    /* Un color de borde que combina bien */
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: .375rem;
    /* Bordes redondeados */
}