:root {
    --cotton: #EDEBDD;
    --cherry-red: #810100;
    --maroon: #630000;
    --noir-black: #181717;
    --light-gray: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --radius: 10px;
    --transition: all 0.3s ease;
}

.bg-cotton { background-color: var(--cotton); }
.bg-cherry-red { background-color: var(--cherry-red); }
.bg-maroon { background-color: var(--maroon); }
.bg-noir-black { background-color: var(--noir-black); }

.text-cotton { color: var(--cotton); }
.text-cherry-red { color: var(--cherry-red); }
.text-maroon { color: var(--maroon); }
.text-noir-black { color: var(--noir-black); }

.btn-cherry-red {
    background-color: var(--cherry-red);
    border-color: var(--cherry-red);
    color: white;
}
.btn-cherry-red:hover {
    background-color: var(--maroon);
    border-color: var(--maroon);
    color: white;
}
.btn-outline-cherry-red {
    border-color: var(--cherry-red);
    color: var(--cherry-red);
}
.btn-outline-cherry-red:hover {
    background-color: var(--cherry-red);
    border-color: var(--cherry-red);
    color: white;
}

/* === FIX FOOTER === */
html, body { height: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--noir-black);
    padding-top: 76px; /* espacio para navbar fija */
    transition: var(--transition);
}
#content { flex: 1 0 auto; }
footer { margin-top: auto; }
/* === END FIX FOOTER === */

/* Navigation */
.navbar-brand { font-size: 1.5rem; }
.navbar-brand img { width: 28px; height: 28px; object-fit: contain; }
.nav-link { font-weight: 500; transition: var(--transition); }
.nav-link:hover, .nav-link.active { color: var(--cherry-red) !important; }

/* Hero Section - Modo Claro */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--cotton) 0%, #e0dfd1 100%);
    transition: var(--transition);
}
.hero-section h1 { color: var(--cherry-red); }
.hero-section p { color: var(--noir-black); }

/* Cards */
.card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}
.section { margin-bottom: 15px; }
.label { font-weight: bold; font-size: 14px; color: #555; }
.alert { color: red; font-weight: bold; }
.icon { font-size: 20px; margin-right: 8px; }

/* Canvas responsivo */
.chart-box {
  width: 100%;
  height: 220px;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  margin-top: 10px;
}

/* ===== MODO OSCURO ===== */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--noir-black);
    --bs-body-color: var(--cotton);
}
[data-bs-theme="dark"] body {
    background-color: var(--noir-black);
    color: var(--cotton);
}
[data-bs-theme="dark"] .navbar {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #444;
}
[data-bs-theme="dark"] .nav-link { color: var(--cotton) !important; }
[data-bs-theme="dark"] .nav-link.active { color: var(--cotton) !important; }
[data-bs-theme="dark"] .nav-link:hover { color: var(--cherry-red) !important; }

/* Footer */
footer a { text-decoration: none; transition: var(--transition); }
footer a:hover { color: var(--cotton) !important; }
/* Footer - Modo Oscuro */
[data-bs-theme="dark"] footer { background-color: #1a1a1a; }
[data-bs-theme="dark"] footer h5 { color: var(--cherry-red); }

/* Responsive ajustes */
@media (max-width: 768px) {
    .hero-section { text-align: center; padding: 2rem 0; }
    .display-4 { font-size: 2.5rem; }
    .pulse-animation { width: 150px; height: 150px; margin-top: 2rem; }
    .pulse-animation i { font-size: 3rem; }

    .chart-box { height: 180px; }
    h1 { font-size: 1.5rem; }
    .card { margin-bottom: 1rem; }
}