/* --- 1. Definición de Variables de Color --- */
:root {
    /* Tema Oscuro (Paleta Dinorifa) */
    --bg-color: #000000; /* negro1 */
    --text-color: #ebc155; /* dorado1 */
    --text-muted-color: #b4882f; /* dorado2 */
    --text-light-color: #F5ECCE; /* Dorado pálido, casi blanco */
    --card-bg: #1a1a1a;
    --card-border: #b4882f;
    --modal-bg: #1a1a1a;
    --primary-accent: #ebc155; /* Dorado principal */
    --btn-primary-bg: #ebc155;
    --btn-primary-text: #000000;
    --btn-primary-hover-bg: #b4882f;
    --link-color: #ebc155;
}

/* --- 2. Aplicación de Estilos Globales --- */
html,
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* --- 3. Estilos de Componentes --- */

/* Tarjetas y Modales */
.card,
.modal-content {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
}

.modal-header,
.modal-footer {
    border-color: var(--card-border);
}

.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

/* Píldora de resumen de compra */
.summary-pill {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

/* Secciones con fondo claro por defecto (como el verificador) */
.bg-light {
    background-color: var(--card-bg) !important; /* Bootstrap usa !important, así que lo necesitamos para sobrescribir */
}

/* Títulos y Encabezados */
.section-title,
.navbar-brand,
.nav-link,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

.navbar-brand .fw-bold {
    color: var(--primary-accent) !important;
}

/* Botones */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}
.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-bg);
}

.btn-success {
    --bs-btn-bg: var(--btn-primary-hover-bg); /* Dorado oscuro */
    --bs-btn-border-color: var(--btn-primary-hover-bg);
    --bs-btn-color: var(--btn-primary-text); /* Texto negro para contraste */
    --bs-btn-hover-bg: var(--primary-accent); /* Dorado más claro al pasar el mouse */
    --bs-btn-hover-border-color: var(--primary-accent);
    --bs-btn-hover-color: var(--btn-primary-text);
}

.btn-success {
    --bs-btn-bg: var(--btn-primary-hover-bg); /* Dorado oscuro */
    --bs-btn-border-color: var(--btn-primary-hover-bg);
    --bs-btn-color: var(--btn-primary-text); /* Texto negro para contraste */
    --bs-btn-hover-bg: var(--primary-accent); /* Dorado más claro al pasar el mouse */
    --bs-btn-hover-border-color: var(--primary-accent);
    --bs-btn-hover-color: var(--btn-primary-text);
}

.btn-danger {
    --bs-btn-bg: var(--primary-accent);
    --bs-btn-color: var(--bg-color);
    --bs-btn-border-color: var(--primary-accent);
    --bs-btn-hover-bg: var(--btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--btn-primary-hover-bg);
}

/* Botón específico del verificador para que coincida con el fondo oscuro */
#verificador .btn-danger {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

/* Este estilo puede que ya no sea necesario, pero lo mantenemos por si acaso */
#verificador .btn-danger:hover {
    background-color: var(--bg-color);
    border-color: var(--primary-accent);
    color: var(--primary-accent);
}

/* Texto descriptivo en la sección principal (hero) */
.hero-text {
    color: var(--text-light-color);
    font-weight: 300; /* Fuente más fina para mayor contraste */
}

/* Formularios */
.form-control,
.form-select {
    background-color: var(--bg-color); /* Fondo negro por defecto para todos los inputs */
    color: var(--text-color);
    border-color: var(--card-border);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--bg-color); /* Mantenemos el fondo negro en foco */
    color: var(--text-color);
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 0.25rem rgba(235, 193, 85, 0.25);
}
.form-control::placeholder {
    color: var(--text-muted-color);
}

/* Solución robusta para el autocompletado del navegador (fondo claro) */
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control:-webkit-autofill:hover,
.form-floating > .form-control:-webkit-autofill:focus,
.form-floating > .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px var(--bg-color) inset !important; /* Truco para forzar el fondo */
    -webkit-text-fill-color: var(--text-color) !important; /* Forzar color del texto */
}

/* --- 4. Estilos para Componentes de Admin --- */

/* Pestañas (Tabs) del formulario de login */
.nav-tabs {
    border-bottom-color: var(--card-border);
}

.nav-tabs .nav-link {
    color: var(--text-muted-color);
    background: none;
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--primary-accent);
    background-color: var(--card-bg);
    border-color: var(--card-border) var(--card-border) var(--card-bg);
}

/* Estilos para tablas en modo oscuro */
.table {
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--card-border);
    --bs-table-striped-bg: var(--bg-color); /* Fondo más oscuro para filas alternas */
    --bs-table-striped-color: var(--text-color);
    --bs-table-hover-bg: var(--text-muted-color); /* Resaltado al pasar el mouse */
    --bs-table-hover-color: var(--bg-color);
}
.table-bordered {
    border-color: var(--card-border);
}