/* 🌙 VARIABLES DE TEMA - MODO CLARO/OSCURO */
:root {
    /* === MODO CLARO (por defecto) === */
    --bg-body: #f4f6f8;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-header: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --bg-progress: #ecf0f1;
    --bg-table-odd: #f8f9fa;
    --bg-table-hover: #f1f4fa;
    --bg-badge-band: #fff3cd;
    --bg-badge-mode: #d4edda;
    --bg-signal: #f1f3f5;
    --bg-btn-primary: #3498db;
    --bg-btn-success: #27ae60;
    --bg-btn-danger: #e74c3c;
    --bg-btn-outline: transparent;
    --text-main: #1a252f;
    --text-muted: #6c757d;
    --text-btn: #ffffff;
    --border-color: #dee2e6;
    --border-input: #ced4da;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.12);
    --header-gradient: linear-gradient(to bottom, #ffffff, #f9fafb);
}

[data-theme="dark"] {
    /* === MODO OSCURO - VALORES AJUSTADOS PARA CONTRASTE === */
    --bg-body: #0f0f0f;
    --bg-card: #1a1a1a;
    --bg-input: #252525;
    --bg-header: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    --bg-progress: #2a2a2a;
    --bg-table-odd: #151515;
    --bg-table-hover: #202020;
    --bg-badge-band: #4a3b1a;
    --bg-badge-mode: #1a3b2a;
    --bg-signal: #2a2a2a;
    --bg-btn-primary: #2980b9;
    --bg-btn-success: #219653;
    --bg-btn-danger: #c0392b;
    --bg-btn-outline: #2a2a2a;
    --text-main: #f0f0f0;
    --text-muted: #b0b0b0;
    --text-btn: #ffffff;
    --border-color: #3a3a3a;
    --border-input: #444444;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.6);
    --header-gradient: linear-gradient(to bottom, #1a1a1a, #0f0f0f);
}

/* =========================================
   REGLAS BASE - USANDO VARIABLES (NO HARDCODEADAS)
   ========================================= */
section {
    padding-top: 4rem;
    padding-bottom: 5rem;
    /*background-color: var(--bg-body);*/
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.card {
    background-color: var(--bg-card) !important;
}
.table th, .table td {
    padding: .3rem;
    vertical-align: middle;
    border-top: 1px solid var(--border-color);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-table-odd);
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px; 
    margin-left: 0px; 
}
.wrap {
    display: flex;
    background: var(--bg-card);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}
.wrap:hover {
    background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);
    color: white;
}
.ico-wrap {
    margin: auto;
}
.mbr-iconfont {
    font-size: 4.5rem !important;
    color: var(--text-main);
    margin: 1rem;
    padding-right: 1rem;
}
.vcenter {
    margin: auto;
}
.mbr-section-title3 {
    text-align: left;
}
h2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}
.display-5 {
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 1.4rem;
    color: var(--text-main);
}
.mbr-bold {
    font-weight: 700;
}
p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 25px;
    color: var(--text-main);
}
.display-6 {
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 1rem;
    color: var(--text-main);
}

/* =========================================
   SIDEBAR & TARJETAS
   ========================================= */
.sidebar-modern { position: sticky; top: 20px; z-index: 100; }
.card-modern {
    border: none; border-radius: 12px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--bg-card) !important; overflow: hidden; margin-bottom: 1rem;
}
.card-modern:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-header-modern {
    background: var(--bg-header) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 12px 16px; font-weight: 600; color: var(--text-main);
    font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
}
.card-header-modern i { color: var(--bg-btn-primary); font-size: 1.1rem; }
.card-body-compact { padding: 12px 16px; }

/* Formulario */
.form-modern .form-control-modern {
    border-radius: 8px 0 0 8px; border: 1px solid var(--border-input);
    padding: 10px 14px; font-size: 0.95rem; transition: all 0.2s ease;
    background: var(--bg-input); color: var(--text-main);
}
.form-modern .form-control-modern:focus {
    border-color: var(--bg-btn-primary); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.form-modern .btn-modern {
    border-radius: 0 8px 8px 0;
    background: linear-gradient(135deg, var(--bg-btn-primary) 0%, #2980b9 100%);
    border: none; color: var(--text-btn); padding: 10px 16px; font-weight: 600;
    transition: all 0.2s ease;
}
.form-modern .btn-modern:hover {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); color: var(--text-btn);
}

/* =========================================
   ONAIR
   ========================================= */
.onair-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}
.onair-item:hover {
    background-color: var(--bg-table-hover); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 6px;
}
.onair-item:last-child { border-bottom: none; }
.onair-data { display: flex; flex-direction: column; justify-content: center; }
.onair-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.onair-badge {
    font-size: 0.65rem; font-weight: 700; color: #27ae60;
    background: rgba(39, 174, 96, 0.12); padding: 3px 6px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1;
}
.onair-badge i { animation: pulse 2s infinite; }
.onair-call { font-weight: 700; color: var(--text-main); font-size: 1.05rem; }
.onair-details { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.onair-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 5px;
    background: var(--bg-input); color: var(--text-main);
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.3px;
    border: 1px solid var(--border-color);
}
.onair-tag i { font-size: 0.75rem; color: var(--text-muted); }
.onair-actions { margin-left: 10px; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* =========================================
   ESTADÍSTICAS & FECHAS
   ========================================= */
.stat-section { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.stat-section:last-child { border-bottom: none; }
.stat-header { font-weight: 600; color: var(--text-main); font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.stat-header i { color: var(--text-muted); }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.stat-label { color: var(--text-muted); font-size: 0.85rem; }
.stat-value { font-weight: 700; font-size: 1rem; color: #ffffff; }
.stat-value.badge { padding: 6px 12px; font-weight: 600; }
.progress-modern { height: 6px; border-radius: 3px; background: var(--bg-progress); overflow: hidden; }
.progress-modern .progress-bar { transition: width 0.4s ease; }
.date-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.date-row.highlight { padding-top: 10px; margin-top: 8px; border-top: 1px dashed var(--border-color); }
.date-label { color: var(--text-muted); font-size: 0.85rem; }
.date-value { font-weight: 600; color: var(--text-main); }
.date-value .badge { font-weight: 600; padding: 4px 10px; }

/* =========================================
   DESCARGAS
   ========================================= */
.download-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border-color);
}
.download-item:last-child { border-bottom: none; }
.download-info strong { display: block; color: var(--text-main); font-size: 0.95rem; }
.download-info small { font-size: 0.8rem; color: var(--text-muted); }
.btn-modern-download {
    width: 36px; height: 36px; border-radius: 8px;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none; color: var(--text-btn); display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.btn-modern-download:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3); color: var(--text-btn); }

/* =========================================
   GRID DE ESTADÍSTICAS
   ========================================= */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.chart-container { position: relative; height: 220px; margin-top: 8px; }
.chart-container.tall { height: 280px; }

.period-selector { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.period-btn {
    padding: 4px 10px; border: 1px solid var(--border-color); background: var(--bg-card);
    border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: 0.2s;
    color: var(--text-main);
}
.period-btn.active { background: var(--bg-btn-primary); color: var(--text-btn); border-color: var(--bg-btn-primary); }
.period-btn:hover { background: var(--bg-input); }
.period-btn.active:hover { background: #2980b9; }

.disabled-msg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); text-align: center; padding: 1rem;
}
.big-number { font-size: 2.2rem; font-weight: 800; color: #27ae60; line-height: 1; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 767px) {
    .sidebar-modern { position: static; margin-top: 20px; }
    .card-modern { border-radius: 10px; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .chart-container { height: 200px; }
    .chart-container.tall { height: 240px; }
    .period-selector { justify-content: center; }
}

/* =========================================
   BRANDING & HEADER
   ========================================= */
.header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 0;
}
.header-logo {
    height: 70px;
    width: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    object-fit: contain;
    flex-shrink: 0;
}
.header-logo:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.activity-name {
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 50%, #6c757d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.brand-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}
.header {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: var(--header-gradient);
}
@media (max-width: 991px) {
    .header-brand { gap: 14px; }
    .header-logo { height: 80px; }
    .activity-name { font-size: clamp(1rem, 2.2vw, 1.5rem); }
}
@media (max-width: 767px) {
    .header-brand { flex-direction: row; align-items: center; gap: 12px; }
    .header-logo { height: 70px; border-radius: 8px; }
    .activity-name { font-size: clamp(0.95rem, 3.5vw, 1.3rem); line-height: 1.35; }
}
@media (max-width: 480px) {
    .header-logo { height: 60px; }
    .activity-name { font-size: clamp(0.9rem, 4.5vw, 1.15rem); font-weight: 600; }
}

/* Navegación */
.nav-pills .nav-link {
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-btn-outline);
}
.nav-pills .nav-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    background: var(--bg-input);
    color: var(--text-main);
}
.header-nav { gap: 5px; }
.header-nav .nav-item { margin: 0; }
@media (max-width: 400px) { .header-nav { gap: 8px; } }

/* =========================================
   CHECK CONTAINER & RESULTADOS
   ========================================= */
.check-container { max-width: 900px; margin: 2rem auto; }
.result-header {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--bg-header);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.callsign-badge {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e9f7 100%);
    border: 2px solid #b3d7f0;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.status-subtitle { color: var(--text-muted); font-size: 1.1rem; font-weight: 500; }
.countdown-banner {
    background: linear-gradient(135deg, var(--bg-btn-primary) 0%, #2980b9 100%);
    color: var(--text-btn);
    border-radius: 10px;
    padding: 12px 20px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.countdown-banner.finished {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    box-shadow: 0 4px 12px rgba(127, 140, 141, 0.3);
}
.countdown-value {
    font-size: 1.3rem;
    font-weight: 800;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 6px;
}
.countdown-banner i { font-size: 1.2rem; }

/* Tarjetas modernas */
.check-card {
    border: none; border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem; background: var(--bg-card); overflow: hidden;
}
.check-card .card-header {
    background: var(--bg-header);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 14px 20px; font-weight: 700; color: var(--text-main);
    font-size: 1.05rem; display: flex; align-items: center; gap: 8px;
}
.check-card .card-header i { color: var(--bg-btn-primary); font-size: 1.1rem; }
.check-card .card-body { padding: 20px; }

/* Tabla de QSOs */
.qso-table { margin-bottom: 0; }
.qso-table thead th {
    background: var(--bg-header); border-bottom: 2px solid var(--border-color);
    color: var(--text-main); font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 12px; white-space: nowrap; cursor: pointer;
    user-select: none; transition: background 0.2s;
}
.qso-table thead th:hover { background: var(--bg-table-hover); }
.qso-table thead th .sort-icon { font-size: 0.7rem; margin-left: 4px; opacity: 0.4; }
.qso-table thead th.active-sort .sort-icon { opacity: 1; color: var(--bg-btn-primary); }
.qso-table tbody td {
    padding: 10px 12px; vertical-align: middle;
    font-size: 0.9rem; color: var(--text-main); border-bottom: 1px solid var(--border-color);
}
.qso-table tbody tr:hover { background-color: var(--bg-table-hover); }

/* Badges */
.badge-band {
    background: var(--bg-badge-band);
    color: #856404; border: 1px solid #ffeeba;
    padding: 4px 10px; border-radius: 6px;
    font-weight: 600; font-size: 0.8rem;
    display: inline-flex; align-items: center; gap: 4px;
}
.badge-mode {
    background: var(--bg-badge-mode);
    color: #155724; border: 1px solid #c3e6cb;
    padding: 4px 10px; border-radius: 6px;
    font-weight: 600; font-size: 0.8rem;
    display: inline-flex; align-items: center; gap: 4px;
}
.badge-band i, .badge-mode i { font-size: 0.7rem; opacity: 0.8; }
.signal-val {
    font-weight: 700; background: var(--bg-signal);
    padding: 4px 10px; border-radius: 6px;
    min-width: 40px; text-align: center; display: inline-block;
    color: var(--text-main);
}

/* Progreso */
.progress-status {
    background: var(--bg-header); border-radius: 8px;
    padding: 16px; margin: 12px 0;
}
.progress-status .progress {
    height: 8px; border-radius: 4px; background: var(--bg-progress); margin: 8px 0;
}
.progress-status .progress-bar { border-radius: 4px; transition: width 0.4s ease; }
.status-count { font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.status-label { color: var(--text-muted); font-size: 0.9rem; }

/* Formulario descarga */
.download-form .form-control {
    border-radius: 8px; border: 1px solid var(--border-input);
    padding: 10px 14px; font-size: 1rem; transition: all 0.2s ease;
    background: var(--bg-input); color: var(--text-main);
}
.download-form .form-control:focus {
    border-color: var(--bg-btn-primary); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.download-form .btn-success {
    background: linear-gradient(135deg, var(--bg-btn-success) 0%, #219653 100%);
    border: none; border-radius: 8px; padding: 10px 24px;
    font-weight: 600; transition: all 0.2s ease; color: var(--text-btn);
}
.download-form .btn-success:hover {
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

/* Objetivos */
.objetivos-list { list-style: none; padding: 0; margin: 0; }
.objetivos-list li {
    padding: 8px 0 8px 28px; position: relative;
    color: var(--text-main); font-size: 0.95rem;
}
.objetivos-list li::before {
    content: "✓"; position: absolute; left: 0;
    color: #27ae60; font-weight: 700; font-size: 1.1rem;
}

/* Mensaje inactivo */
.inactive-card {
    border: none; border-radius: 12px;
    box-shadow: var(--shadow);
    background: var(--bg-card);
}
.inactive-card .card-header {
    background: var(--bg-badge-band);
    border-bottom: 1px solid #ffeeba;
    padding: 14px 20px; color: #856404; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.inactive-card .card-header i { font-size: 1.1rem; }

/* Responsive check */
@media (max-width: 767px) {
    .check-container { padding: 0 12px; }
    .callsign-badge { font-size: 1.5rem; padding: 6px 16px; }
    .countdown-banner { flex-direction: column; gap: 8px; text-align: center; }
    .qso-table thead { display: none; }
    .qso-table, .qso-table tbody, .qso-table tr, .qso-table td { display: block; width: 100%; }
    .qso-table tr { margin-bottom: 12px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; background: var(--bg-card); }
    .qso-table td { padding: 6px 0; border-bottom: 1px solid var(--border-color); text-align: right; position: relative; }
    .qso-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
    .qso-table td:last-child { border-bottom: none; }
}

/* =========================================
   LOG CARDS & TABLAS
   ========================================= */
.log-card { border: none; border-radius: 12px; box-shadow: var(--shadow); background: var(--bg-card); overflow: hidden; margin-bottom: 2rem; }
.log-card .card-header { background: var(--bg-header); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 14px 20px; }
.log-card .nav-tabs { border-bottom: none; }
.log-card .nav-link { border: none; color: var(--text-muted); font-weight: 600; padding: 8px 16px; border-radius: 6px; }
.log-card .nav-link.active { color: var(--text-main); background: var(--bg-card); box-shadow: var(--shadow); }

.log-table { margin-bottom: 0; }
.log-table thead th { background: var(--bg-header); border-bottom: 2px solid var(--border-color); color: var(--text-main); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px; white-space: nowrap; }
.log-table tbody td { padding: 10px 12px; vertical-align: middle; font-size: 0.9rem; color: var(--text-main); border-bottom: 1px solid var(--border-color); }
.log-table tbody tr:hover { background-color: var(--bg-table-hover); }

.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sort-link:hover { color: var(--bg-btn-primary); }
.sort-icon.active { color: var(--bg-btn-primary); opacity: 1; }
.sort-icon { opacity: 0.4; font-size: 0.75rem; margin-left: 4px; transition: opacity 0.2s; }

.callsign-highlight {
    font-weight: 800; font-size: 1.05em; color: var(--text-main);
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e9f7 100%);
    border: 1px solid #b3d7f0; padding: 3px 8px; border-radius: 6px;
    font-family: 'Courier New', monospace; letter-spacing: 0.5px;
    display: inline-block;
}

.badge-band { background: var(--bg-badge-band); color: #856404; border: 1px solid #ffeeba; padding: 3px 8px; border-radius: 5px; font-weight: 600; font-size: 0.75rem; }
.badge-mode { background: var(--bg-badge-mode); color: #155724; border: 1px solid #c3e6cb; padding: 3px 8px; border-radius: 5px; font-weight: 600; font-size: 0.75rem; }
.signal-val { font-weight: 700; background: var(--bg-signal); padding: 3px 8px; border-radius: 5px; min-width: 35px; text-align: center; display: inline-block; color: var(--text-main); }
.ref-val { color: var(--text-muted); font-style: italic; }
.ref-val:not(:empty) { color: var(--text-main); font-weight: 500; font-style: normal; }

.action-btn { 
    width: 30px; height: 30px; border-radius: 6px; 
    display: inline-flex; align-items: center; justify-content: center; 
    padding: 0; margin: 0 4px; transition: all 0.2s; border: none; color: var(--text-btn); font-size: 0.85rem; 
}
.action-btn.btn-primary { background: var(--bg-btn-primary); }
.action-btn.btn-danger { background: var(--bg-btn-danger); }
.action-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.pagination-log { margin: 1.5rem 0; justify-content: center; flex-wrap: wrap; gap: 4px; }
.pagination-log .page-link { border-radius: 6px; margin: 0 2px; padding: 6px 12px; font-weight: 500; border: 1px solid var(--border-color); color: var(--bg-btn-primary); transition: all 0.2s; background: var(--bg-card); }
.pagination-log .page-link:hover { background: var(--bg-input); border-color: #b3d7f0; transform: translateY(-1px); }
.pagination-log .page-item.active .page-link { background: linear-gradient(135deg, var(--bg-btn-primary) 0%, #2980b9 100%); border-color: var(--bg-btn-primary); color: var(--text-btn); }
.pagination-log .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }

.search-card { border: none; border-radius: 12px; box-shadow: var(--shadow); background: var(--bg-card); margin-bottom: 1.5rem; }
.search-card .card-body { padding: 20px; }
.search-card .form-control { border-radius: 8px; padding: 10px 14px; transition: all 0.2s; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-input); }
.search-card .form-control:focus { border-color: var(--bg-btn-primary); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); }
.search-card .btn { border-radius: 8px; font-weight: 600; transition: all 0.2s; }
.search-card .btn-success { background: linear-gradient(135deg, var(--bg-btn-success) 0%, #219653 100%); border: none; color: var(--text-btn); }
.search-card .btn-primary { background: linear-gradient(135deg, var(--bg-btn-primary) 0%, #2980b9 100%); border: none; color: var(--text-btn); }
.search-card .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.log-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.log-empty i { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }

@media (max-width: 991px) {
    .log-table thead { display: none; }
    .log-table, .log-table tbody, .log-table tr, .log-table td { display: block; width: 100%; }
    .log-table tr { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; background: var(--bg-card); }
    .log-table td { padding: 8px 0; border-bottom: 1px solid var(--border-color); text-align: right; position: relative; }
    .log-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
    .log-table td:last-child { border-bottom: none; }
    .log-table td[data-label="Acciones"] { text-align: center !important; }
}

/* =========================================
   LOGIN CARD
   ========================================= */
:root { --red: #e74c3c; --green: #27ae60; --blue: #3498db; --line-h: 3px; }

.login-card { 
    border: none; border-radius: 14px; 
    box-shadow: var(--shadow); 
    background: var(--bg-card); max-width: 420px; margin: 3rem auto; padding: 2rem; 
}
.login-header { text-align: center; margin-bottom: 1.5rem; }
.login-header .brand {
    font-size: 1.4rem; font-weight: 700; color: var(--blue);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-header .brand i { font-size: 1.6rem; }
.login-header .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }
.form-group { margin-bottom: 1rem; }
.field-label { 
    display: flex; justify-content: space-between; align-items: center; 
    font-weight: 600; font-size: 0.78rem; color: var(--text-main); 
    background: #f1f3f5; padding: 5px 10px; 
    border-radius: 6px 6px 0 0; border: 1px solid var(--border-color); border-bottom: none; 
}
.field-label i { color: var(--blue); margin-right: 4px; }
.form-input { 
    border-radius: 0 0 6px 6px; border: 1px solid var(--border-input); border-top: none; 
    padding: 7px 8px; font-size: 0.95rem; font-weight: 500; 
    transition: all 0.2s; width: 100%; background: var(--bg-input); color: var(--text-main);
}
.form-input:focus { 
    border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,152,219,0.15); outline: none; 
}
.btn-submit { 
    background: linear-gradient(135deg, var(--green) 0%, #219653 100%); 
    border: none; border-radius: 6px; padding: 10px 16px; 
    color: var(--text-btn); font-weight: 700; font-size: 0.95rem; 
    cursor: pointer; transition: 0.2s; 
    display: flex; align-items: center; justify-content: center; gap: 4px; 
    width: 100%; margin-bottom: 8px;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(39,174,96,0.3); }
.btn-secondary { 
    background: linear-gradient(135deg, var(--red) 0%, #c0392b 100%); 
    border: none; border-radius: 6px; padding: 10px 16px; 
    color: var(--text-btn); font-weight: 700; font-size: 0.95rem; 
    cursor: pointer; transition: 0.2s; 
    display: flex; align-items: center; justify-content: center; gap: 4px; 
    width: 100%; text-decoration: none;
}
.btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(231,76,60,0.3); }
.form-footer { 
    text-align: center; margin-top: 1rem; padding-top: 1rem; 
    border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); 
}
@media (max-width: 480px) {
    .login-card { margin: 1rem; padding: 1.5rem; }
    .login-header .brand { font-size: 1.2rem; }
}

/* =========================================
   UPLOAD CARD
   ========================================= */
.upload-card {
    border: none; border-radius: 16px;
    overflow: hidden; box-shadow: var(--shadow);
    background: var(--bg-card); transition: box-shadow 0.3s ease;
}
.upload-area {
    border: 2px dashed var(--border-input); border-radius: 12px;
    background: var(--bg-header); padding: 2.5rem 1rem; text-align: center;
    transition: all 0.3s ease; cursor: pointer; position: relative;
}
.upload-area:hover, .upload-area.dragover {
    border-color: var(--bg-btn-primary); background: #e8f4fd;
}
.upload-area input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.file-preview {
    display: none; margin-top: 1.5rem;
    background: #f1f8ff; border-left: 4px solid var(--bg-btn-primary);
    border-radius: 8px; padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(52,152,219,0.1);
    animation: slideIn 0.4s ease;
}
.file-preview.show { display: block; }
.file-name {
    font-size: 1.25rem; font-weight: 700; color: var(--text-main);
    margin: 0; word-break: break-all;
}
.file-meta { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.progress-section { margin-top: 1.5rem; }
.progress { height: 14px; background-color: var(--bg-progress); border-radius: 10px; overflow: hidden; position: relative; }
.progress-bar { transition: width 0.4s ease; background: linear-gradient(90deg, var(--bg-btn-success), #2ecc71); }
.progress-bar.processing { background: linear-gradient(90deg, var(--bg-btn-primary), #2980b9); }
.progress-bar.striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}
.progress-bar.animate { animation: progress-stripes 1s linear infinite; }
@keyframes progress-stripes { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } }
.status-text { font-size: 1rem; font-weight: 600; color: var(--text-main); min-height: 24px; }
.system-working { display: none; align-items: center; gap: 8px; margin-top: 12px; color: var(--bg-btn-primary); font-weight: 500; }
.system-working.show { display: inline-flex; }
.working-dot { width: 8px; height: 8px; background: var(--bg-btn-primary); border-radius: 50%; display: inline-block; }
.working-dot:nth-child(2) { animation: pulse 1.2s infinite 0.2s; }
.working-dot:nth-child(3) { animation: pulse 1.2s infinite 0.4s; }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
    .upload-card { border-radius: 12px; }
    .upload-area { padding: 1.5rem 1rem; }
    .file-name { font-size: 1.1rem; }
}

/* =========================================
   QSO CARD (MANUAL & EDIT)
   ========================================= */
:root { --red: #e74c3c; --green: #27ae60; --line-h: 3px; }
.qso-card { border: none; border-radius: 14px; box-shadow: var(--shadow); background: var(--bg-card); margin-bottom: 1rem; }
.qso-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; align-items: stretch; }
.field-group { flex: 1 1 110px; min-width: 120px; display: flex; flex-direction: column; position: relative; }
.field-group.mode { flex: 1.5 1 180px; }
.field-group.submit { flex: 0 0 auto; min-width: 90px; }
.field-label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.78rem; color: var(--text-main); background: #f1f3f5; padding: 5px 10px; border-radius: 6px 6px 0 0; border: 1px solid var(--border-color); border-bottom: none; }
.field-label i { color: var(--blue); margin-right: 4px; }
.field-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--red); cursor: pointer; transition: all 0.2s; background: var(--bg-card); flex-shrink: 0; }
.field-check.active { border-color: var(--green); background: #e8f5e9; color: var(--green); }
.field-check:hover { transform: scale(1.15); }
.form-input { border-radius: 0 0 6px 6px; border: 1px solid var(--border-input); border-top: none; padding: 7px 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; background: var(--bg-input); color: var(--text-main); }
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,152,219,0.15); outline: none; }
.senal-locked { border-color: var(--red) !important; background: #fdf2f2 !important; }
.senal-unlocked { border-color: var(--green) !important; background: #f0fdf4 !important; }
.senal-error { animation: flashRed 0.5s ease; }
@keyframes flashRed { 0%,100% { border-color: var(--red); } 50% { border-color: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.5); } }
.input-line { position: absolute; bottom: 0; left: 0; right: 0; height: var(--line-h); background: var(--red); border-radius: 0 0 6px 6px; transition: background 0.2s; pointer-events: none; }
.input-line.active { background: var(--green); }
.mode-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.mode-btn { padding: 3px 6px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-card); font-size: 0.7rem; cursor: pointer; transition: 0.2s; color: var(--text-main); }
.mode-btn:hover { background: #e8f4fd; border-color: var(--blue); color: var(--blue); }
.mode-btn.active { background: var(--blue); border-color: var(--blue); color: var(--text-btn); }
.btn-submit { background: linear-gradient(135deg, var(--green) 0%, #219653 100%); border: none; border-radius: 6px; padding: 0 16px; height: 100%; color: var(--text-btn); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; }
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(39,174,96,0.3); }
.btn-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.btn-submit.loading { background: #95a5a6; }
.key-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 12px; background: var(--bg-header); border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-main); border-radius: 0 0 14px 14px; align-items: center; }
.key-legend span { display: flex; align-items: center; gap: 5px; }
.key-legend kbd { background: var(--bg-card); border: 1px solid #cbd5e0; border-bottom: 2px solid #a0aec0; border-radius: 5px; padding: 2px 6px; font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.table-card { border: none; border-radius: 12px; box-shadow: var(--shadow); background: var(--bg-card); }
.log-table { margin: 0; font-size: 0.85rem; }
.log-table th { background: var(--bg-header); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; padding: 10px 8px; color: var(--text-main); }
.log-table td { padding: 8px; vertical-align: middle; color: var(--text-main); }
.callsign { font-family: monospace; font-weight: 700; }
.badge-mode { background: var(--bg-badge-mode); color: #155724; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }
.badge-band { background: var(--bg-badge-band); color: #856404; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }
.action-btn { width: 24px; height: 24px; border-radius: 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.dupe-toast i { font-size: 1.2rem; color: #d97706; }

@media (max-width: 991px) { .qso-row { gap: 8px; } .field-group { flex: 1 1 100px; } }
@media (max-width: 767px) {
    .qso-row { flex-direction: column; }
    .field-group { flex: 1 1 auto; }
    .mode-btns { justify-content: center; }
    .key-legend { justify-content: center; gap: 8px; }
    .log-table thead { display: none; }
    .log-table tr { display: block; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px; }
    .log-table td { display: block; text-align: right; padding: 4px 0; position: relative; }
    .log-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.75rem; }
}

/* Versión centrada de QSO card */
:root { --red: #e74c3c; --green: #27ae60; --blue: #3498db; --line-h: 3px; }
.qso-card { border: none; border-radius: 14px; box-shadow: var(--shadow); background: var(--bg-card); margin: 2rem auto;}
.qso-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; align-items: stretch; }
.field-group { flex: 1 1 110px; min-width: 120px; display: flex; flex-direction: column; position: relative; }
.field-group.mode { flex: 1.5 1 180px; }
.field-group.submit { flex: 0 0 auto; min-width: 90px; display: flex; align-items: flex-end; }
.field-label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.78rem; color: var(--text-main); background: #f1f3f5; padding: 5px 10px; border-radius: 6px 6px 0 0; border: 1px solid var(--border-color); border-bottom: none; }
.field-label i { color: var(--blue); margin-right: 4px; }
.form-input { border-radius: 0 0 6px 6px; border: 1px solid var(--border-input); border-top: none; padding: 7px 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; background: var(--bg-input); color: var(--text-main); }
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,152,219,0.15); outline: none; }
.form-input.error { border-color: var(--red) !important; animation: flashRed 0.5s ease; }
.mode-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.mode-btn { padding: 3px 6px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-card); font-size: 0.7rem; cursor: pointer; transition: 0.2s; color: var(--text-main); }
.mode-btn:hover { background: #e8f4fd; border-color: var(--blue); color: var(--blue); }
.mode-btn.active { background: var(--blue); border-color: var(--blue); color: var(--text-btn); }
.btn-submit { background: linear-gradient(135deg, var(--green) 0%, #219653 100%); border: none; border-radius: 6px; padding: 10px 16px; color: var(--text-btn); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(39,174,96,0.3); }
.btn-submit:disabled { opacity: 0.7; cursor: wait; }
.btn-submit.loading { background: #95a5a6; }
.form-footer { padding: 12px 16px; background: var(--bg-header); border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); border-radius: 0 0 14px 14px; text-align: center; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.form-footer span { display: flex; align-items: center; gap: 5px; }
.form-footer kbd { background: var(--bg-card); border: 1px solid #cbd5e0; border-bottom: 2px solid #a0aec0; border-radius: 5px; padding: 2px 6px; font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.table-card { border: none; border-radius: 12px; box-shadow: var(--shadow); background: var(--bg-card); margin-top: 1.5rem; }
.log-table { margin: 0; font-size: 0.85rem; }
.log-table th { background: var(--bg-header); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; padding: 10px 8px; color: var(--text-main); }
.log-table td { padding: 8px; vertical-align: middle; color: var(--text-main); }
.callsign { font-family: monospace; font-weight: 700; }
.badge-mode { background: var(--bg-badge-mode); color: #155724; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }
.badge-band { background: var(--bg-badge-band); color: #856404; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }
.dupe-toast { 
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); 
    background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; 
    padding: 12px 20px; border-radius: 10px; 
    box-shadow: var(--shadow-hover); z-index: 9999; 
    display: none; align-items: center; gap: 10px; max-width: 92vw; 
    font-size: 0.9rem; color: #92400e; font-weight: 500;
}
.dupe-toast.show { display: flex !important; animation: none !important; }
.dupe-toast i { font-size: 1.2rem; color: #d97706; }
@media (max-width: 991px) { .qso-row { gap: 8px; } .field-group { flex: 1 1 100px; } }
@media (max-width: 767px) {
    .qso-row { flex-direction: column; }
    .field-group { flex: 1 1 auto; min-width: 100%; }
    .mode-btns { justify-content: center; }
    .field-group.submit { width: 100%; }
    .btn-submit { width: 100%; }
    .form-footer { flex-direction: column; gap: 6px; }
    .log-table thead { display: none; }
    .log-table tr { display: block; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; }
    .log-table td { display: block; text-align: right; padding: 4px 0; position: relative; }
    .log-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.75rem; }
}

/* =========================================
   ANNOUNCE CARD
   ========================================= */
.announce-card {
    border: none; border-radius: 16px;
    box-shadow: var(--shadow);
    background: var(--bg-card); max-width: 600px; margin: 2rem auto;
}
.announce-card .card-header {
    background: var(--bg-header);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 16px 20px; text-align: center;
}
.announce-card .card-header h4 {
    font-weight: 700; color: var(--text-main); margin: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.announce-card .card-header h4 i { color: var(--bg-btn-primary); }
.announce-card .card-body { padding: 24px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.form-group { flex: 1; min-width: 140px; }
.form-label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-main); margin-bottom: 6px; }
.form-select {
    width: 100%; border: 1px solid var(--border-input); border-radius: 8px;
    padding: 10px 12px; font-size: 1rem; background: var(--bg-input); color: var(--text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.form-select:focus {
    border-color: var(--bg-btn-primary); box-shadow: 0 0 0 3px rgba(52,152,219,0.15); outline: none;
}
.btn-modern {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; border: none; border-radius: 8px; padding: 10px 20px;
    font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s;
    width: 100%; color: var(--text-btn);
}
.btn-success-modern { background: linear-gradient(135deg, var(--bg-btn-success) 0%, #219653 100%); }
.btn-success-modern:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(39,174,96,0.3); }
.btn-danger-modern { background: linear-gradient(135deg, var(--bg-btn-danger) 0%, #c0392b 100%); }
.btn-danger-modern:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(231,76,60,0.3); }
.btn-primary-modern { background: linear-gradient(135deg, var(--bg-btn-primary) 0%, #2980b9 100%); }
.btn-primary-modern:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52,152,219,0.3); }
.announce-exists { text-align: center; padding: 20px 0; }
.announce-exists .alert {
    background: var(--bg-badge-band); border-left: 4px solid #f39c12;
    border-radius: 8px; padding: 16px; margin-bottom: 20px;
    color: #856404; font-weight: 500; font-size: 1.05rem;
}
.announce-exists .btn-group { display: flex; gap: 10px; flex-direction: column; }
@media (min-width: 480px) { .announce-exists .btn-group { flex-direction: row; } }
.form-info {
    background: #e8f4fd; border-radius: 8px; padding: 14px;
    font-size: 0.9rem; color: var(--text-main); line-height: 1.5;
    border-left: 3px solid var(--bg-btn-primary);
}
.form-info i { color: var(--bg-btn-primary); margin-right: 4px; }
@media (max-width: 576px) {
    .announce-card { margin: 1rem; border-radius: 12px; }
    .form-row { flex-direction: column; }
    .form-group { min-width: 100%; }
    .card-body { padding: 20px; }
}

/* =========================================
   STATS CONTAINER & CHARTS
   ========================================= */
.stats-container { max-width: 1400px; margin: 2rem auto; padding: 0 15px; }
.stats-header { text-align: center; padding: 2rem 1rem; background: var(--bg-header); border-radius: 12px; margin-bottom: 2rem; }
.stats-header h2 { font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem; }
.stats-header .text-muted { font-size: 1.1rem; color: var(--text-muted); }
.chart-card { border: none; border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 1.5rem; background: var(--bg-card); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; }
.chart-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.chart-card .card-header { background: var(--bg-header); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 14px 20px; font-weight: 700; color: var(--text-main); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.chart-card .card-header i { color: var(--bg-btn-primary); }
.chart-card .card-body { padding: 16px; }
.chart-container { width: 100%; height: 300px; position: relative; }
.chart-fallback { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 10px; }
@media (min-width: 768px) { .chart-container { height: 140px; } }
@media (min-width: 992px) { .chart-container { height: 200px; } }
@media (max-width: 767px) {
    .stats-container { padding: 0 10px; }
    .chart-card { margin-bottom: 1rem; }
    .chart-container { height: 140px; }
    .stats-header { padding: 1.5rem 1rem; }
}

/* =========================================
   ADMIN PANEL
   ========================================= */
.admin-panel { max-width: 960px; margin: 2rem auto; padding: 0 15px; font-family: system-ui, -apple-system, sans-serif; }
.panel-card { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 1.5rem; overflow: hidden; }
.panel-header { background: var(--bg-header); padding: 14px 18px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--text-main); }
.panel-header i { color: var(--bg-btn-primary); }
.panel-body { padding: 18px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form-field { flex: 1 1 160px; min-width: 130px; }
.form-label { display: block; font-weight: 500; font-size: 0.85rem; color: var(--text-main); margin-bottom: 6px; }
.form-input { width: 100%; border: 1px solid var(--border-input); border-radius: 8px; padding: 9px 11px; font-size: 0.95rem; transition: all 0.2s; box-sizing: border-box; background: var(--bg-input); color: var(--text-main); }
.form-input:focus { border-color: var(--bg-btn-primary); box-shadow: 0 0 0 3px rgba(52,152,219,0.15); outline: none; }
.btn-create { background: linear-gradient(135deg, var(--bg-btn-success) 0%, #219653 100%); border: none; border-radius: 8px; padding: 9px 22px; color: var(--text-btn); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn-create:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39,174,96,0.3); }
.user-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.user-table thead th { background: var(--bg-header); color: var(--text-main); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; padding: 11px 10px; border-bottom: 2px solid var(--border-color); }
.user-table tbody td { padding: 11px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.9rem; color: var(--text-main); }
.user-table tbody tr:hover { background: var(--bg-table-hover); }
.callsign { font-family: monospace; font-weight: 600; letter-spacing: 0.5px; }
.badge-role { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.badge-admin { background: #dcfce7; color: #166534; }
.badge-user { background: var(--bg-table-odd); color: var(--text-main); }
.btn-del { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: #fee2e2; color: #dc2626; border: none; cursor: pointer; transition: 0.2s; }
.btn-del:hover { background: #fecaca; transform: scale(1.05); }
.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); }
@media (max-width: 768px) {
    .admin-form { flex-direction: column; }
    .form-field { width: 100%; }
    .btn-create { width: 100%; justify-content: center; }
    .user-table thead { display: none; }
    .user-table, .user-table tbody, .user-table tr, .user-table td { display: block; width: 100%; }
    .user-table tr { margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; }
    .user-table td { padding: 6px 0; border-bottom: none; text-align: right; position: relative; }
    .user-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.8rem; }
}

/* =========================================
   DIPLOMA & QSL PREVIEW
   ========================================= */
.diploma-preview-wrapper {
    width: 100%;
    overflow: hidden;
    border: 3px solid #28a745;
    background-color: var(--bg-body);
    margin: 20px 0;
    position: relative;
}
.diploma-preview-box {
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--bg-card);
    transform-origin: top left;
}
.diploma-preview-field {
    position: absolute;
    white-space: nowrap;
    font-weight: bold;
    pointer-events: none;
    line-height: 1;
    color: var(--text-main);
}
.sticky-preview { position: sticky; top: 20px; align-self: flex-start; }
@media (max-width: 767px) { .sticky-preview { position: static; top: auto; } }
.diploma-img-info {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    font-size: 12px;
    font-family: monospace;
    margin-bottom: 10px;
    border-radius: 3px;
    color: var(--text-main);
}
.diploma-img-info strong { color: var(--bg-btn-primary); }
.current-img-label { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.qsl-preview-wrapper {
    width: 100%;
    overflow: hidden;
    border: 3px solid #dc3545;
    background-color: var(--bg-body);
    margin: 20px 0;
    position: relative;
}
.qsl-preview-box {
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--bg-card);
    transform-origin: top left;
}
.qsl-preview-field {
    position: absolute;
    white-space: nowrap;
    font-weight: bold;
    pointer-events: none;
    line-height: 1;
    color: var(--text-main);
}
.qsl-img-info {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    font-size: 12px;
    font-family: monospace;
    margin-bottom: 10px;
    border-radius: 3px;
    color: var(--text-main);
}
.qsl-img-info strong { color: var(--bg-btn-primary); }

/* =========================================
   CONFIG PANEL
   ========================================= */
:root { --primary: #3498db; --success: #27ae60; --warning: #f59e0b; --danger: #e74c3c; --bg-card: #ffffff; --border: #e2e8f0; --text: #2d3748; --muted: #718096; }

.config-panel { max-width: 900px; margin: 2rem auto; font-family: system-ui, -apple-system, sans-serif; }
.config-section { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 1.5rem; overflow: hidden; border: 1px solid var(--border); }
.section-header { background: var(--bg-header); padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); font-size: 1.05rem; }
.section-header i { color: var(--primary); }
.section-body { padding: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form-full { grid-column: 1 / -1; }
.form-label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.9rem; color: var(--text); margin-bottom: 6px; }
.form-label i { color: var(--primary); font-size: 0.85rem; }
.form-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; transition: all 0.2s; background: var(--bg-input); color: var(--text); box-sizing: border-box; }
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52,152,219,0.15); outline: none; }
.help-text { font-size: 0.8rem; color: var(--muted); margin-top: 4px; display: block; line-height: 1.4; }
.alert-modern { background: #fef3c7; border-left: 4px solid var(--warning); padding: 12px 14px; border-radius: 8px; color: #92400e; font-size: 0.88rem; line-height: 1.5; margin-bottom: 16px; }
.editor-container { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.editor-container textarea { border: none; width: 100%; resize: vertical; background: var(--bg-input); color: var(--text); }
.btn-save { background: linear-gradient(135deg, var(--success) 0%, #219653 100%); border: none; border-radius: 8px; padding: 12px 24px; color: var(--text-btn); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(39,174,96,0.3); }
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .section-header { font-size: 0.95rem; }
    .config-panel { margin: 1rem; }
}

/* =========================================
   MSG CARD
   ========================================= */
:root { --red: #e74c3c; --green: #27ae60; --blue: #3498db; --line-h: 3px; }
.qso-card { border: none; border-radius: 14px; box-shadow: var(--shadow); background: var(--bg-card); margin: 2rem auto;}
.qso-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; align-items: stretch; }
.field-group { flex: 1 1 110px; min-width: 120px; display: flex; flex-direction: column; position: relative; }
.field-group.mode { flex: 1.5 1 180px; }
.field-group.submit { flex: 0 0 auto; min-width: 90px; display: flex; align-items: flex-end; }
.field-label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.78rem; color: var(--text-main); background: #f1f3f5; padding: 5px 10px; border-radius: 6px 6px 0 0; border: 1px solid var(--border-color); border-bottom: none; }
.field-label i { color: var(--blue); margin-right: 4px; }
.form-input { border-radius: 0 0 6px 6px; border: 1px solid var(--border-input); border-top: none; padding: 7px 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; background: var(--bg-input); color: var(--text-main); }
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,152,219,0.15); outline: none; }
.form-input.error { border-color: var(--red) !important; animation: flashRed 0.5s ease; }
.mode-btns { display: flex; flex-wrap: wrap; gap: 2px; }
.mode-btn { padding: 3px 6px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-card); font-size: 0.7rem; cursor: pointer; transition: 0.2s; color: var(--text-main); }
.mode-btn:hover { background: #e8f4fd; border-color: var(--blue); color: var(--blue); }
.mode-btn.active { background: var(--blue); border-color: var(--blue); color: var(--text-btn); }
.btn-submit { background: linear-gradient(135deg, var(--green) 0%, #219653 100%); border: none; border-radius: 6px; padding: 10px 16px; color: var(--text-btn); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(39,174,96,0.3); }
.btn-submit:disabled { opacity: 0.7; cursor: wait; }
.btn-submit.loading { background: #95a5a6; }
.form-footer { padding: 12px 16px; background: var(--bg-header); border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); border-radius: 0 0 14px 14px; text-align: center; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.form-footer span { display: flex; align-items: center; gap: 5px; }
.form-footer kbd { background: var(--bg-card); border: 1px solid #cbd5e0; border-bottom: 2px solid #a0aec0; border-radius: 5px; padding: 2px 6px; font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
@media (max-width: 991px) { .qso-row { gap: 8px; } .field-group { flex: 1 1 100px; } }
@media (max-width: 767px) {
    .qso-row { flex-direction: column; }
    .field-group { flex: 1 1 auto; min-width: 100%; }
    .mode-btns { justify-content: center; }
    .field-group.submit { width: 100%; }
    .btn-submit { width: 100%; }
    .form-footer { flex-direction: column; gap: 6px; }
}

.msg-card { padding: 2.5rem 2rem; font-size: 1.3rem; text-align: center; box-shadow: var(--shadow); border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); max-width: 500px; margin: 3rem auto; }
.msg-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.msg-success .msg-icon { color: #16a34a; }
.msg-error .msg-icon { color: #dc2626; }
.msg-warning .msg-icon { color: #f59e0b; }
.btn-continue { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: var(--text-btn) !important; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(59,130,246,0.3); margin-top: 1rem; }
.btn-continue:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); color: var(--text-btn) !important; text-decoration: none; }
.btn-warning-modern { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; box-shadow: 0 2px 8px rgba(245,158,11,0.3) !important; }
.btn-warning-modern:hover { box-shadow: 0 4px 12px rgba(245,158,11,0.4) !important; }
.btn-danger-modern { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important; }
.btn-danger-modern:hover { box-shadow: 0 4px 12px rgba(239,68,68,0.4) !important; }

/* =========================================
   THEME TOGGLE BUTTON
   ========================================= */
.theme-toggle-btn {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    margin-left: 8px !important;
    transition: all 0.2s ease !important;
    color: var(--text-muted) !important;
    background: var(--bg-btn-outline) !important;
}
.theme-toggle-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow) !important;
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .theme-toggle-btn {
    border-color: #444 !important;
    color: var(--text-muted) !important;
}

/* =========================================
   🌙 MODO OSCURO - OVERRIDES FINALES (ALTA ESPECIFICIDAD)
   ========================================= */

/* Cards - Forzar modo oscuro */
[data-theme="dark"] .card,
[data-theme="dark"] .card-modern,
[data-theme="dark"] .qso-card,
[data-theme="dark"] .check-card,
[data-theme="dark"] .log-card,
[data-theme="dark"] .upload-card,
[data-theme="dark"] .announce-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .config-section,
[data-theme="dark"] .login-card,
[data-theme="dark"] .msg-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .search-card,
[data-theme="dark"] .inactive-card,
[data-theme="dark"] .wrap,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .result-header,
[data-theme="dark"] .stats-header,

/* Headers de cards */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header-modern,
[data-theme="dark"] .check-card .card-header,
[data-theme="dark"] .log-card .card-header,
[data-theme="dark"] .announce-card .card-header,
[data-theme="dark"] .panel-header,
[data-theme="dark"] .section-header {
    background: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Formularios en modo oscuro */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control-modern,
[data-theme="dark"] .form-select {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-control-modern::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
[data-theme="dark"] .field-label {
    background: #2a2a2a !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* Tablas en modo oscuro */
[data-theme="dark"] .table,
[data-theme="dark"] .qso-table,
[data-theme="dark"] .log-table,
[data-theme="dark"] .user-table {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .qso-table thead th,
[data-theme="dark"] .log-table thead th,
[data-theme="dark"] .user-table thead th {
    background: var(--bg-header) !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .qso-table tbody td,
[data-theme="dark"] .log-table tbody td,
[data-theme="dark"] .user-table tbody td {
    background: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .qso-table tbody tr:nth-of-type(odd),
[data-theme="dark"] .log-table tbody tr:nth-of-type(odd) {
    background: var(--bg-table-odd) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .qso-table tbody tr:hover,
[data-theme="dark"] .log-table tbody tr:hover {
    background: var(--bg-table-hover) !important;
}

/* Botones del menú - CRÍTICO */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-muted) !important;
    background: var(--bg-btn-outline) !important;
}
[data-theme="dark"] .nav-pills .nav-link:hover {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active.btn-primary,
[data-theme="dark"] .nav-pills .nav-link.active.btn-success,
[data-theme="dark"] .nav-pills .nav-link.active.btn-danger {
    color: var(--text-btn) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active.btn-primary { background: var(--bg-btn-primary) !important; }
[data-theme="dark"] .nav-pills .nav-link.active.btn-success { background: var(--bg-btn-success) !important; }
[data-theme="dark"] .nav-pills .nav-link.active.btn-danger { background: var(--bg-btn-danger) !important; }

/* Badges */
[data-theme="dark"] .badge-band {
    background: var(--bg-badge-band) !important;
    color: #ffd54f !important;
    border-color: #5d4a1a !important;
}
[data-theme="dark"] .badge-mode {
    background: var(--bg-badge-mode) !important;
    color: #81c784 !important;
    border-color: #1a4d2a !important;
}
[data-theme="dark"] .onair-tag {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .signal-val {
    background: var(--bg-signal) !important;
    color: var(--text-main) !important;
}

/* Barras de progreso */
[data-theme="dark"] .progress-modern,
[data-theme="dark"] .progress {
    background: var(--bg-progress) !important;
}
[data-theme="dark"] .progress-bar {
    background: var(--bg-btn-success) !important;
}
[data-theme="dark"] .progress-bar.bg-info {
    background: var(--bg-btn-primary) !important;
}

/* Header y branding */
[data-theme="dark"] .header {
    background: var(--header-gradient) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .activity-name {
    background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 50%, #999 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Paginación */
[data-theme="dark"] .pagination-log .page-link {
    background: var(--bg-card) !important;
    color: var(--bg-btn-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .pagination-log .page-link:hover {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .pagination-log .page-item.active .page-link {
    background: var(--bg-btn-primary) !important;
    color: var(--text-btn) !important;
    border-color: var(--bg-btn-primary) !important;
}

/* Responsive fixes para modo oscuro */
@media (max-width: 767px) {
    [data-theme="dark"] .qso-table tr,
    [data-theme="dark"] .log-table tr,
    [data-theme="dark"] .user-table tr {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .qso-table td::before,
    [data-theme="dark"] .log-table td::before,
    [data-theme="dark"] .user-table td::before {
        color: var(--text-muted) !important;
    }
}

/* Transición suave */
/*body, .card, .card-modern, .form-input, .table, .nav-link, 
.badge-band, .badge-mode, .onair-tag, .btn-modern {
    transition: background-color 0.25s ease, color 0.25s ease, 
                border-color 0.25s ease, box-shadow 0.25s ease !important;
}*/

/* =========================================
   🌙 MODO OSCURO - NUCLEAR (MÁXIMA ESPECIFICIDAD)
   ========================================= */

/* HTML con data-theme + body + todas las cards */
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-modern,
html[data-theme="dark"] .qso-card,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .log-card,
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .announce-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .config-section,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .msg-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .inactive-card,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .result-header,
html[data-theme="dark"] .stats-header {
    background-color: #1a1a1a !important;
    /*background: #1a1a1a !important;*/
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
}

/* Headers de cards */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-header-modern,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .section-header {
    background-color: #222222 !important;
    background: #222222 !important;
    color: #f0f0f0 !important;
    border-bottom-color: #3a3a3a !important;
}

/* Headers de tablas */
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .qso-table thead th,
html[data-theme="dark"] .log-table thead th,
html[data-theme="dark"] .user-table thead th {
    background-color: #222222 !important;
    background: #222222 !important;
    color: #f0f0f0 !important;
}

/* Filas de tablas */
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .qso-table tbody td,
html[data-theme="dark"] .log-table tbody td,
html[data-theme="dark"] .user-table tbody td {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
}

/* Inputs y selects */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select {
    background-color: #252525 !important;
    background: #252525 !important;
    color: #f0f0f0 !important;
    border-color: #444444 !important;
}

/* Botones del menú */
html[data-theme="dark"] .nav-pills .nav-link {
    background-color: transparent !important;
    background: transparent !important;
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: #252525 !important;
    background: #252525 !important;
    color: #f0f0f0 !important;
}

html[data-theme="dark"] .nav-pills .nav-link.active.btn-primary {
    background-color: #2980b9 !important;
    background: #2980b9 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .nav-pills .nav-link.active.btn-success {
    background-color: #219653 !important;
    background: #219653 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .nav-pills .nav-link.active.btn-danger {
    background-color: #c0392b !important;
    background: #c0392b !important;
    color: #ffffff !important;
}

/* Badges */
html[data-theme="dark"] .badge-band {
    background-color: #4a3b1a !important;
    background: #4a3b1a !important;
    color: #ffd54f !important;
    border-color: #5d4a1a !important;
}

html[data-theme="dark"] .badge-mode {
    background-color: #1a3b2a !important;
    background: #1a3b2a !important;
    color: #81c784 !important;
    border-color: #1a4d2a !important;
}

/* Textos generales */
html[data-theme="dark"] p,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] label {
    color: #f0f0f0 !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .date-label {
    color: #b0b0b0 !important;
}

/* Header principal */
html[data-theme="dark"] .header {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border-bottom-color: #3a3a3a !important;
}

/* =========================================
   🌙 FIX: Botón activo sin clase de color
   ========================================= */
html[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: #2980b9 !important;
    background: #2980b9 !important;
    color: #ffffff !important;
}

/* Si hay otros botones activos sin clase específica, forzar blanco */
html[data-theme="dark"] .nav-pills .nav-link.active:not(.btn-primary):not(.btn-success):not(.btn-danger) {
    background-color: #2980b9 !important;
    background: #2980b9 !important;
    color: #ffffff !important;
}

/* =========================================
   🌙 FIX: Elementos específicos en blanco
   ========================================= */

/* 1. Nav tabs en card headers */
html[data-theme="dark"] .nav-tabs.card-header-tabs {
    background-color: #222222 !important;
    border-bottom: 1px solid #3a3a3a !important;
}

html[data-theme="dark"] .nav-tabs.card-header-tabs .nav-link {
    background-color: transparent !important;
    color: #b0b0b0 !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
}

html[data-theme="dark"] .nav-tabs.card-header-tabs .nav-link:hover {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
}

html[data-theme="dark"] .nav-tabs.card-header-tabs .nav-link.active {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
    border-bottom-color: #1a1a1a !important;
}

/* 2. Callsign highlight (indicativos resaltados) */
html[data-theme="dark"] .callsign-highlight {
    background: linear-gradient(135deg, #1a3a52 0%, #0f2a3d 100%) !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* 3. Mode buttons (botones de modo SSB, CW, etc.) */
html[data-theme="dark"] .mode-btn {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

html[data-theme="dark"] .mode-btn:hover {
    background-color: #2a2a2a !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .mode-btn.active {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

/* 4. Key legend (leyenda de teclas) */
html[data-theme="dark"] .key-legend {
    background-color: #222222 !important;
    border-top-color: #3a3a3a !important;
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .key-legend kbd {
    background-color: #1a1a1a !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

html[data-theme="dark"] .key-legend .fa {
    color: #b0b0b0 !important;
}

/* 5. Icono de bombilla (lightbulb) */
html[data-theme="dark"] .fa-lightbulb,
html[data-theme="dark"] .fa-lightbulb-o {
    color: #f39c12 !important;
}

/* 6. Alert modern (alertas modernas) */
html[data-theme="dark"] .alert-modern {
    background-color: #2a2520 !important;
    border-left-color: #f39c12 !important;
    color: #ffd54f !important;
}

html[data-theme="dark"] .alert-modern.alert-success {
    background-color: #1a2a20 !important;
    border-left-color: #27ae60 !important;
    color: #81c784 !important;
}

html[data-theme="dark"] .alert-modern.alert-danger {
    background-color: #2a1a1a !important;
    border-left-color: #c0392b !important;
    color: #ef9a9a !important;
}

html[data-theme="dark"] .alert-modern.alert-info {
    background-color: #1a2530 !important;
    border-left-color: #2980b9 !important;
    color: #90caf9 !important;
}

/* Variantes adicionales por si existen */
html[data-theme="dark"] .alert {
    background-color: #2a2520 !important;
    color: #ffd54f !important;
    border-color: #3a3a3a !important;
}

html[data-theme="dark"] .alert-success {
    background-color: #1a2a20 !important;
    color: #81c784 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: #2a1a1a !important;
    color: #ef9a9a !important;
}

html[data-theme="dark"] .alert-info {
    background-color: #1a2530 !important;
    color: #90caf9 !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: #2a2520 !important;
    color: #ffd54f !important;
}
/* =========================================
   🌙 FIX: Últimos elementos en blanco
   ========================================= */

/* 1. Form info (cajas de información en formularios) */
html[data-theme="dark"] .form-info {
    background-color: #1a2530 !important;
    border-left-color: #2980b9 !important;
    color: #90caf9 !important;
}

html[data-theme="dark"] .form-info i {
    color: #5dade2 !important;
}

/* 2. Upload area hover (área de carga de archivos) */
html[data-theme="dark"] .upload-area:hover,
html[data-theme="dark"] .upload-area.dragover {
    background-color: #1a2530 !important;
    border-color: #2980b9 !important;
}

html[data-theme="dark"] .upload-area {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .upload-area i {
    color: #b0b0b0 !important;
}

/* 3. Chart.js fills (rellenos de gráficos) */
/* Estos se aplican vía JavaScript, pero forzamos los colores del canvas */
html[data-theme="dark"] canvas {
    background-color: transparent !important;
}

/* Ajustar tooltips de Chart.js */
html[data-theme="dark"] .chartjs-tooltip {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
}

/* 4. Badge roles (admin, user, etc.) */
html[data-theme="dark"] .badge-role {
    border: 1px solid #3a3a3a !important;
}

html[data-theme="dark"] .badge-admin {
    background-color: #1a2a20 !important;
    color: #81c784 !important;
    border-color: #27ae60 !important;
}

html[data-theme="dark"] .badge-user {
    background-color: #252525 !important;
    color: #b0b0b0 !important;
    border-color: #3a3a3a !important;
}

/* Variantes adicionales por si existen otros roles */
html[data-theme="dark"] .badge-moderator {
    background-color: #2a1a2a !important;
    color: #ce93d8 !important;
    border-color: #9c27b0 !important;
}

/* =========================================
   🌙 FIX: Elementos adicionales de gráficos
   ========================================= */

/* Stats container y cards de estadísticas */
html[data-theme="dark"] .stats-container {
    background-color: #0f0f0f !important;
}

html[data-theme="dark"] .stat-card {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
}

html[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Números grandes de estadísticas */
html[data-theme="dark"] .stat-number {
    color: #ffffff !important;
}

html[data-theme="dark"] .stat-label {
    color: #b0b0b0 !important;
}

/* =========================================
   🌙 FIX: Colores de Chart.js vía CSS variables
   ========================================= */

/* Si Chart.js usa variables CSS, las sobrescribimos */
html[data-theme="dark"] {
    --chart-color-1: #3498db !important;
    --chart-color-2: #2ecc71 !important;
    --chart-color-3: #f39c12 !important;
    --chart-color-4: #e74c3c !important;
    --chart-color-5: #9b59b6 !important;
    --chart-grid-color: #3a3a3a !important;
    --chart-text-color: #f0f0f0 !important;
}
/* =========================================
   🌙 FIX: Elementos kbd (teclas)
   ========================================= */

/* kbd genérico en cualquier contexto */
html[data-theme="dark"] kbd {
    background-color: #1a1a1a !important;
    border: 1px solid #3a3a3a !important;
    border-bottom: 3px solid #4a4a4a !important;
    color: #f0f0f0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

html[data-theme="dark"] kbd:hover {
    background-color: #252525 !important;
    border-color: #4a4a4a !important;
    border-bottom-color: #5a5a5a !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}

/* kbd dentro de key-legend (leyenda de atajos) */
html[data-theme="dark"] .key-legend kbd {
    background-color: #1a1a1a !important;
    border: 1px solid #3a3a3a !important;
    border-bottom: 2px solid #4a4a4a !important;
    color: #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* kbd dentro de form-footer */
html[data-theme="dark"] .form-footer kbd {
    background-color: #1a1a1a !important;
    border: 1px solid #3a3a3a !important;
    border-bottom: 2px solid #4a4a4a !important;
    color: #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* kbd dentro de alertas */
html[data-theme="dark"] .alert kbd,
html[data-theme="dark"] .alert-modern kbd {
    background-color: #0f0f0f !important;
    border-color: #2a2a2a !important;
    border-bottom-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* kbd dentro de texto informativo */
html[data-theme="dark"] .form-info kbd,
html[data-theme="dark"] .help-text kbd {
    background-color: #0f0f0f !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
/* =========================================
   🌙 FIX: Elementos con bg-light (Bootstrap)
   ========================================= */

/* bg-light general en modo oscuro */
html[data-theme="dark"] .bg-light {
    background-color: #252525 !important;
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
}

/* bg-light con border (como el consejo estratégico) */
html[data-theme="dark"] .bg-light.border {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

/* bg-light rounded con padding */
html[data-theme="dark"] .bg-light.rounded {
    background-color: #252525 !important;
    color: #f0f0f0 !important;
}

/* Textos dentro de bg-light */
html[data-theme="dark"] .bg-light p,
html[data-theme="dark"] .bg-light .text-muted {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .bg-light strong,
html[data-theme="dark"] .bg-light .text-dark {
    color: #ffffff !important;
}

html[data-theme="dark"] .bg-light .fw-bold {
    color: #ffffff !important;
}

html[data-theme="dark"] .bg-light .small {
    color: #b0b0b0 !important;
}

/* Iconos dentro de bg-light */
html[data-theme="dark"] .bg-light .fa-lightbulb,
html[data-theme="dark"] .bg-light .fa-lightbulb-o {
    color: #f39c12 !important;
}

html[data-theme="dark"] .bg-light .fa-info-circle {
    color: #5dade2 !important;
}

html[data-theme="dark"] .bg-light .fa-check-circle {
    color: #27ae60 !important;
}

/* =========================================
   🌙 FIX: Variantes específicas de bg-light
   ========================================= */

/* bg-light dentro de cards */
html[data-theme="dark"] .card .bg-light,
html[data-theme="dark"] .card-modern .bg-light,
html[data-theme="dark"] .check-card .bg-light {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
}

/* bg-light en alertas o consejos */
html[data-theme="dark"] .alert .bg-light,
html[data-theme="dark"] .form-info .bg-light {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* =========================================
   🌙 FIX: Otros fondos de Bootstrap
   ========================================= */

/* bg-white en modo oscuro */
html[data-theme="dark"] .bg-white {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

/* bg-dark (ya debería ser oscuro, pero asegurar contraste) */
html[data-theme="dark"] .bg-dark {
    background-color: #0f0f0f !important;
    color: #f0f0f0 !important;
}

/* text-dark en modo oscuro (forzar texto claro) */
html[data-theme="dark"] .text-dark {
    color: #f0f0f0 !important;
}

/* text-muted mantener gris claro */
html[data-theme="dark"] .text-muted {
    color: #b0b0b0 !important;
}
/* =========================================
   🌙 FIX: Botones de período (data-days)
   ========================================= */

/* Botones de período en modo oscuro */
html[data-theme="dark"] .period-btn {
    background-color: #252525 !important;
    border: 1px solid #3a3a3a !important;
    color: #f0f0f0 !important;
}

html[data-theme="dark"] .period-btn:hover {
    background-color: #2a2a2a !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* Botón de período activo */
html[data-theme="dark"] .period-btn.active {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .period-btn.active:hover {
    background-color: #3498db !important;
    border-color: #3498db !important;
}

/* Asegurar que cualquier botón con data-days tenga estos estilos */
html[data-theme="dark"] [data-days] {
    background-color: #252525 !important;
    border: 1px solid #3a3a3a !important;
    color: #f0f0f0 !important;
}

html[data-theme="dark"] [data-days]:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] [data-days].active {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}
/* =========================================
   🌙 FIX: Contenedor del gráfico (chart-container tall)
   ========================================= */

/* Fondo del contenedor en modo oscuro */
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .chart-container.tall {
    background-color: transparent !important;
}

/* Canvas del gráfico */
html[data-theme="dark"] canvas {
    background-color: transparent !important;
}

/* Tooltip de Chart.js si usa HTML externo */
html[data-theme="dark"] .chartjs-tooltip {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
}

/* =========================================
   🌙 FIX: Chart card header en modo oscuro
   ========================================= */

html[data-theme="dark"] .chart-card .card-header {
    background-color: #222222 !important;
    color: #f0f0f0 !important;
    border-bottom-color: #3a3a3a !important;
}

html[data-theme="dark"] .chart-card .card-header i {
    color: #5dade2 !important;
}
/* =========================================
   🌙 FIX NUCLEAR: chart-container
   ========================================= */

/* Forzar fondo oscuro con máxima especificidad */
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .chart-container.tall,
html[data-theme="dark"] div.chart-container,
html[data-theme="dark"] div.chart-container.tall {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
}

/* Canvas dentro del contenedor */
html[data-theme="dark"] .chart-container canvas,
html[data-theme="dark"] .chart-container.tall canvas {
    background-color: transparent !important;
    background: transparent !important;
}

/* Chart card completo */
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .card.chart-card {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border-color: #3a3a3a !important;
}

/* Chart card body */
html[data-theme="dark"] .chart-card .card-body,
html[data-theme="dark"] .chart-card .card-body-compact {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
}

/* Stats container */
html[data-theme="dark"] .stats-container {
    background-color: #0f0f0f !important;
    background: #0f0f0f !important;
}

/* Stats grid */
html[data-theme="dark"] .stats-grid {
    background-color: transparent !important;
}

/* Cualquier div que contenga chart-container */
html[data-theme="dark"] div:has(.chart-container) {
    background-color: #1a1a1a !important;
}

/* =========================================
   🌙 FIX: Chart fallback (mensaje cuando no hay datos)
   ========================================= */

html[data-theme="dark"] .chart-fallback {
    background-color: #1a1a1a !important;
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .chart-fallback i {
    color: #b0b0b0 !important;
}

/* =========================================
   🌙 FIX: Si hay estilos inline, forzar con JavaScript
   ========================================= */
   /* =========================================
   🌙 FIX: Google Charts Tooltips
   ========================================= */

html[data-theme="dark"] .google-visualization-tooltip {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html[data-theme="dark"] .google-visualization-tooltip * {
    color: #f0f0f0 !important;
}

/* Contenedores de gráficos */
html[data-theme="dark"] [id$="chart_div"] {
    background-color: #1a1a1a !important;
}

/* Si los gráficos tienen contenedor padre */
html[data-theme="dark"] .chart-wrapper,
html[data-theme="dark"] .google-chart-container {
    background-color: #1a1a1a !important;
}

/* =========================================
   🦶 FOOTER MODERNO (Light + Dark)
   ========================================= */

/* Variables del footer */
:root {
    --footer-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --footer-text: #181a1a;
    --footer-link: #000000;
    --footer-link-hover: #3498db;
    --footer-border: #3498db;
    --footer-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    --footer-subtext-opacity: 0.75;
}

[data-theme="dark"] {
    --footer-bg: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    --footer-text: #f0f0f0;
    --footer-link: #e0e0e0;
    --footer-link-hover: #5dade2;
    --footer-border: #5dade2;
    --footer-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    --footer-subtext-opacity: 0.85;
}

/* Footer principal */
.footer-modern {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 24px 0 20px;
    margin-top: 50px;
    border-top: 3px solid var(--footer-border);
    box-shadow: var(--footer-shadow);
    position: relative;
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Enlaces del footer */
.footer-link {
    color: var(--footer-link);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer-link:hover {
    color: var(--footer-link-hover);
    text-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
    text-decoration: none;
}

[data-theme="dark"] .footer-link:hover {
    text-shadow: 0 0 8px rgba(93, 173, 226, 0.5);
}

/* Subtexto */
.footer-subtext {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    opacity: var(--footer-subtext-opacity);
    letter-spacing: 0.2px;
    color: var(--footer-text);
}

/* Animación del corazón */
.footer-subtext .fa-heart {
    display: inline-block;
    animation: heartbeat 1.6s ease-in-out infinite;
    color: #e74c3c;
}

[data-theme="dark"] .footer-subtext .fa-heart {
    color: #ec7063;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Iconos del footer */
.footer-modern .fa {
    color: var(--footer-text);
}

[data-theme="dark"] .footer-modern .fa-github,
[data-theme="dark"] .footer-modern .fa-envelope {
    color: #b0b0b0;
}

/* Separadores */
.footer-modern hr,
.footer-modern .footer-divider {
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .footer-modern hr,
[data-theme="dark"] .footer-modern .footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive: ajustes para móvil */
@media (max-width: 767px) {
    .footer-modern {
        padding: 18px 0 15px;
        margin-top: 35px;
    }
    .footer-link { 
        font-size: 0.9rem; 
    }
    .footer-subtext { 
        font-size: 0.75rem; 
    }
}

/* Transición suave al cambiar tema */
.footer-modern,
.footer-modern *,
.footer-link,
.footer-subtext {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, 
                box-shadow 0.3s ease, opacity 0.3s ease;
}

/* =========================================
   🌓 AUTOCOMPLETADO - MODO CLARO (por defecto)
   ========================================= */

/* Inputs normales en modo claro */
input:not(:-webkit-autofill),
textarea:not(:-webkit-autofill),
select:not(:-webkit-autofill) {
    background-color: #ffffff !important;
    color: #1a252f !important;
    caret-color: #1a252f !important;
}

/* Inputs autocompletados en modo claro (WebKit) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #1a252f !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: #1a252f !important;
}

/* Firefox en modo claro */
input:autofill,
textarea:autofill,
select:autofill {
    background-color: #ffffff !important;
    color: #1a252f !important;
}

/* Foco en modo claro */
input:focus,
textarea:focus,
select:focus {
    color: #1a252f !important;
    caret-color: #1a252f !important;
}

/* Placeholder en modo claro */
input::placeholder,
textarea::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* =========================================
   🌙 AUTOCOMPLETADO - MODO OSCURO
   ========================================= */

/* Inputs normales en modo oscuro */
[data-theme="dark"] input:not(:-webkit-autofill),
[data-theme="dark"] textarea:not(:-webkit-autofill),
[data-theme="dark"] select:not(:-webkit-autofill) {
    background-color: #252525 !important;
    color: #f0f0f0 !important;
    caret-color: #f0f0f0 !important;
}

/* Inputs autocompletados en modo oscuro (WebKit) */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f0f0f0 !important;
    -webkit-box-shadow: 0 0 0px 1000px #252525 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: #f0f0f0 !important;
}

/* Firefox en modo oscuro */
[data-theme="dark"] input:autofill,
[data-theme="dark"] textarea:autofill,
[data-theme="dark"] select:autofill {
    background-color: #252525 !important;
    color: #f0f0f0 !important;
}

/* Foco en modo oscuro */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    color: #f0f0f0 !important;
    caret-color: #f0f0f0 !important;
}

/* Placeholder en modo oscuro */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #808080 !important;
    opacity: 1 !important;
}

/* =========================================
   🌓 field-label - MODO CLARO
   ========================================= */

.field-group:has(input:-webkit-autofill) .field-label,
.field-group:has(input:autofill) .field-label,
.form-group.autofilled .field-label,
.field-group.autofilled .field-label {
    background: #f1f3f5 !important;
    color: #555 !important;
    border-color: #dee2e6 !important;
}

/* =========================================
   🌙 field-label - MODO OSCURO
   ========================================= */

[data-theme="dark"] .field-group:has(input:-webkit-autofill) .field-label,
[data-theme="dark"] .field-group:has(input:autofill) .field-label,
[data-theme="dark"] .form-group.autofilled .field-label,
[data-theme="dark"] .field-group.autofilled .field-label {
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #3a3a3a !important;
}

/* =========================================
   🌓 Input con foco + autocompletado
   ========================================= */

/* Modo claro */
input:-webkit-autofill:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25) !important;
}

/* Modo oscuro */
[data-theme="dark"] input:-webkit-autofill:focus {
    border-color: #5dade2 !important;
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.25) !important;
}

/* =========================================
   🌙 FIX: Filas de tabla en modo móvil (responsive)
   ========================================= */

/* Modo oscuro - TODAS las filas en móvil deben ser oscuras */
[data-theme="dark"] .qso-table tr,
[data-theme="dark"] .log-table tr,
[data-theme="dark"] .user-table tr,
[data-theme="dark"] .table tr {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
}

/* Filas pares e impares en móvil (cuando son bloques) */
[data-theme="dark"] .qso-table tbody tr:nth-of-type(odd),
[data-theme="dark"] .qso-table tbody tr:nth-of-type(even),
[data-theme="dark"] .log-table tbody tr:nth-of-type(odd),
[data-theme="dark"] .log-table tbody tr:nth-of-type(even),
[data-theme="dark"] .user-table tbody tr:nth-of-type(odd),
[data-theme="dark"] .user-table tbody tr:nth-of-type(even),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
}

/* Hover en móvil también oscuro */
[data-theme="dark"] .qso-table tbody tr:hover,
[data-theme="dark"] .log-table tbody tr:hover,
[data-theme="dark"] .user-table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #202020 !important;
    background: #202020 !important;
}

/* Celdas dentro de las filas en móvil */
[data-theme="dark"] .qso-table td,
[data-theme="dark"] .log-table td,
[data-theme="dark"] .user-table td,
[data-theme="dark"] .table td {
    background-color: transparent !important;
    color: #f0f0f0 !important;
    border-bottom-color: #3a3a3a !important;
}

/* Pseudo-elementos ::before (labels en móvil) */
[data-theme="dark"] .qso-table td::before,
[data-theme="dark"] .log-table td::before,
[data-theme="dark"] .user-table td::before {
    color: #b0b0b0 !important;
}

/* =========================================
   🌓 MODO CLARO - Asegurar consistencia
   ========================================= */

/* En modo claro, filas pares pueden tener fondo alterno */
.qso-table tbody tr:nth-of-type(odd),
.log-table tbody tr:nth-of-type(odd),
.user-table tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}

.qso-table tbody tr:nth-of-type(even),
.log-table tbody tr:nth-of-type(even),
.user-table tbody tr:nth-of-type(even),
.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* =========================================
   🌙 FIX: Fondo del <table> en modo oscuro
   ========================================= */

/* Todas las tablas en modo oscuro */
[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] .qso-table,
[data-theme="dark"] .log-table,
[data-theme="dark"] .user-table {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
}

/* thead, tbody, tfoot también oscuros */
[data-theme="dark"] table thead,
[data-theme="dark"] table tbody,
[data-theme="dark"] table tfoot,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table tbody,
[data-theme="dark"] .qso-table thead,
[data-theme="dark"] .qso-table tbody,
[data-theme="dark"] .log-table thead,
[data-theme="dark"] .log-table tbody,
[data-theme="dark"] .user-table thead,
[data-theme="dark"] .user-table tbody {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
}

/* En modo móvil cuando tr es display:block, 
   el espacio entre filas muestra el fondo del table */
@media (max-width: 991px) {
    [data-theme="dark"] table,
    [data-theme="dark"] .table,
    [data-theme="dark"] .qso-table,
    [data-theme="dark"] .log-table,
    [data-theme="dark"] .user-table {
        background-color: #1a1a1a !important;
        background: #1a1a1a !important;
        border-color: #3a3a3a !important;
    }
    
    /* Cada fila como bloque con borde oscuro */
    [data-theme="dark"] .qso-table tr,
    [data-theme="dark"] .log-table tr,
    [data-theme="dark"] .user-table tr {
        background-color: #1a1a1a !important;
        border-color: #3a3a3a !important;
    }
}

/* =========================================
   🌓 MODO CLARO - Restaurar fondos originales
   ========================================= */

table,
.table,
.qso-table,
.log-table,
.user-table {
    background-color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd),
.qso-table tbody tr:nth-of-type(odd),
.log-table tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}

/* =========================================
   🌙 FIX: file-preview en modo oscuro
   ========================================= */

[data-theme="dark"] .file-preview,
[data-theme="dark"] .file-preview.show {
    background-color: #1a2530 !important;
    background: #1a2530 !important;
    border-left-color: #5dade2 !important;
    box-shadow: 0 2px 8px rgba(93, 173, 226, 0.15) !important;
}

[data-theme="dark"] .file-preview .file-name {
    color: #f0f0f0 !important;
}

[data-theme="dark"] .file-preview .file-meta {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .file-preview i {
    color: #5dade2 !important;
}

/* =========================================
   🌓 MODO CLARO - Mantener estilo original
   ========================================= */

.file-preview,
.file-preview.show {
    background-color: #f1f8ff !important;
    border-left-color: #3498db !important;
}

.file-preview .file-name {
    color: #1a252f !important;
}

.file-preview .file-meta {
    color: #6c757d !important;
}

/* =========================================
   🌙 FIX: Google Charts Tooltips (Nuclear)
   ========================================= */

/* Forzar fondo oscuro en todos los tooltips de Google Charts */
html[data-theme="dark"] .google-visualization-tooltip,
html[data-theme="dark"] div.google-visualization-tooltip {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Texto dentro del tooltip */
html[data-theme="dark"] .google-visualization-tooltip *,
html[data-theme="dark"] .google-visualization-tooltip span,
html[data-theme="dark"] .google-visualization-tooltip div {
    color: #f0f0f0 !important;
}

/* Título del tooltip (si existe) */
html[data-theme="dark"] .google-visualization-tooltip-title {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Filas del tooltip */
html[data-theme="dark"] .google-visualization-tooltip-row {
    border-bottom: 1px solid #3a3a3a !important;
}

html[data-theme="dark"] .google-visualization-tooltip-row:last-child {
    border-bottom: none !important;
}

/* Celdas del tooltip */
html[data-theme="dark"] .google-visualization-tooltip-cell {
    color: #f0f0f0 !important;
}

/* Iconos o colores dentro del tooltip */
html[data-theme="dark"] .google-visualization-tooltip-square {
    border-color: #f0f0f0 !important;
}

/* =========================================
   🌓 MODO CLARO - Restaurar estilo original
   ========================================= */

.google-visualization-tooltip {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.google-visualization-tooltip * {
    color: #2c3e50 !important;
}

/* =========================================
   🌙 FIX: SVG path dentro de Google Charts Tooltip
   ========================================= */

/* Flecha/indicador SVG del tooltip */
html[data-theme="dark"] .google-visualization-tooltip path,
html[data-theme="dark"] .google-visualization-tooltip svg path {
    fill: #2a2a2a !important;
    stroke: #3a3a3a !important;
}

/* Cualquier otro elemento SVG dentro del tooltip */
html[data-theme="dark"] .google-visualization-tooltip svg,
html[data-theme="dark"] .google-visualization-tooltip svg * {
    fill: #f0f0f0 !important;
}

html[data-theme="dark"] .google-visualization-tooltip svg rect {
    fill: #2a2a2a !important;
    stroke: #3a3a3a !important;
}

html[data-theme="dark"] .google-visualization-tooltip svg line {
    stroke: #3a3a3a !important;
}

/* =========================================
   🌓 MODO CLARO - Restaurar colores originales
   ========================================= */

.google-visualization-tooltip path,
.google-visualization-tooltip svg path {
    fill: #ffffff !important;
    stroke: #dee2e6 !important;
}

.google-visualization-tooltip svg rect {
    fill: #ffffff !important;
    stroke: #dee2e6 !important;
}

/* =========================================
   🌙 FIX: callsign-badge en modo oscuro
   ========================================= */

[data-theme="dark"] .callsign-badge {
    background: linear-gradient(135deg, #1a2530 0%, #0f1a25 100%) !important;
    border-color: #2980b9 !important;
    color: #5dade2 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* =========================================
   🌓 MODO CLARO - Mantener estilo original
   ========================================= */

.callsign-badge {
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e9f7 100%) !important;
    border-color: #b3d7f0 !important;
    color: #1a252f !important;
}

/* =========================================
   🌓 FIX: .wrap hover en modo claro
   ========================================= */

.wrap:hover {
    background: linear-gradient(135deg, #6394ff 0%, #0a193b 100%) !important;
    color: #ffffff !important;
}

/* Todos los textos dentro del wrap en hover deben ser blancos */
.wrap:hover * {
    color: #ffffff !important;
}

.wrap * {
    color: #3498db !important;
}

/* Eliminar subrayado en enlaces dentro del wrap */
.wrap:hover a,
.wrap:hover a * {
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.wrap i,
.wrap .fa,
.wrap .mbr-iconfont {
    color: #3498db !important;
}


/* Iconos también blancos en hover */
.wrap:hover i,
.wrap:hover .fa,
.wrap:hover .mbr-iconfont {
    color: #ffffff !important;
}

/* =========================================
   🌙 MODO OSCURO - Mantener mismo comportamiento
   ========================================= */

[data-theme="dark"] .wrap:hover {
    background: linear-gradient(135deg, #6394ff 0%, #0a193b 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .wrap:hover * {
    color: #ffffff !important;
}

[data-theme="dark"] .wrap:hover a,
[data-theme="dark"] .wrap:hover a * {
    color: #ffffff !important;
    text-decoration: none !important;
}

[data-theme="dark"] .wrap:hover i,
[data-theme="dark"] .wrap:hover .fa,
[data-theme="dark"] .wrap:hover .mbr-iconfont {
    color: #ffffff !important;
}

/* =========================================
   📊 TABLA ANCHO COMPLETO + SCROLL MÓVIL
   ========================================= */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-wrapper .log-table {
    width: 100%;
    margin-bottom: 0;
}

/* Cabecera pegajosa */
.table-responsive-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Indicador de scroll solo en móvil */
@media (max-width: 767px) {
    .table-responsive-wrapper::after {
        content: '← Desliza para ver más →';
        display: block;
        text-align: center;
        padding: 8px;
        font-size: 0.75rem;
        color: var(--text-muted);
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
    }
    
    .table-responsive-wrapper td,
    .table-responsive-wrapper th {
        white-space: nowrap;
    }
}

/* =========================================
   🎯 DUPE TOAST - CENTRADO + ANCHO ADAPTATIVO
   ========================================= */
.dupe-toast {
    /* ✅ Centrado EXACTO en pantalla (horizontal + vertical) */
    position: fixed !important;
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    pointer-events: none !important;

    /* ✅ Ancho adaptativo: 80% desktop, casi 100% móvil */
    width: 80vw !important;
    max-width: 900px !important;

    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    padding: 16px 20px 12px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    z-index: 9999;

    display: none;
    flex-direction: column;
    gap: 10px;
    font-size: 0.95rem;
    color: #92400e;
    line-height: 1.4;

    /* ✅ Nunca se sale de la pantalla */
    max-height: 50vh !important;
    overflow: hidden;
}

.dupe-toast > *,
.dupe-toast * {
    pointer-events: auto !important;
}

.dupe-toast.show {
    display: flex !important;
    animation: dupeFadeIn 0.3s ease-out !important;
}

@keyframes dupeFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Contenido principal con scroll interno */
.dupe-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0; /* ✅ Clave para que flex child haga scroll */
	width: 100%;
}

.dupe-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dupe-icon {
    font-size: 1.3rem;
    color: #d97706;
    flex-shrink: 0;
}

.dupe-title {
    font-weight: 700;
    font-size: 0.9rem;
}

/* Tabla con scroll bidireccional */
.dupe-msg {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-height: 0;
}

/* Footer SIEMPRE visible */
.dupe-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(217, 119, 6, 0.15);
    flex-shrink: 0; /* ✅ NUNCA se comprime ni oculta */
}

.dupe-hint {
    font-size: 0.72rem;
    color: #b45309;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dupe-hint kbd {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-bottom: 2px solid #fbbf24;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: #92400e;
}

.dupe-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #fde68a;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.dupe-close-btn:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    transform: scale(1.1);
}

/* =========================================
   📊 TABLA INTERNA DEL DUPE TOAST
   ========================================= */
.dupe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dupe-table th {
    background: rgba(217, 119, 6, 0.12);
    color: #92400e;
    padding: 6px 10px;
    text-align: left;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid #fde68a;
}

.dupe-table td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(217, 119, 6, 0.1);
    color: #78350f;
}

.dupe-table tbody tr:hover {
    background: rgba(245, 158, 11, 0.08);
}

.dupe-table .badge-mode,
.dupe-table .badge-band {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.dupe-count {
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 0.7rem;
    color: #b45309;
    opacity: 0.7;
}

/* Scrollbars */
.dupe-msg::-webkit-scrollbar { width: 6px; height: 6px; }
.dupe-msg::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 3px; }
.dupe-msg::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 3px; }
.dupe-msg::-webkit-scrollbar-thumb:hover { background: #d97706; }
/* Contador inline dentro del hint del footer */
.dupe-count-inline {
    font-weight: 700;
    color: #d97706;
}

[data-theme="dark"] .dupe-count-inline {
    color: #fbbf24 !important;
}

/* Indicativo en el header */
.dupe-title strong {
    font-size: 1em;
    letter-spacing: 0.5px;
}

/* =========================================
   🌙 MODO OSCURO
   ========================================= */
[data-theme="dark"] .dupe-toast {
    background: #2a2520 !important;
    border-color: #5d4a1a !important;
    border-left-color: #f59e0b !important;
    color: #ffd54f !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .dupe-icon,
[data-theme="dark"] .dupe-title { color: #f59e0b !important; }
[data-theme="dark"] .dupe-footer { border-top-color: rgba(245,158,11,0.2) !important; }
[data-theme="dark"] .dupe-hint { color: #fbbf24 !important; }
[data-theme="dark"] .dupe-hint kbd {
    background: #3d3520 !important; border-color: #5d4a1a !important;
    border-bottom-color: #b45309 !important; color: #ffd54f !important;
}
[data-theme="dark"] .dupe-close-btn {
    background: #3d3520 !important; border-color: #5d4a1a !important; color: #fbbf24 !important;
}
[data-theme="dark"] .dupe-close-btn:hover {
    background: #f59e0b !important; border-color: #f59e0b !important; color: #1a1a1a !important;
}
[data-theme="dark"] .dupe-table th {
	background: rgb(76 67 50) !important;
    color: #ffffff !important;
    border-bottom-color: #5d4a1a !important;
}
[data-theme="dark"] .dupe-table td {
    color: #f0e6d0 !important; border-bottom-color: rgba(245,158,11,0.1) !important;
}
[data-theme="dark"] .dupe-table tbody tr:hover { background: rgba(245,158,11,0.1) !important; }
[data-theme="dark"] .dupe-count { color: #fbbf24 !important; }
[data-theme="dark"] .dupe-msg::-webkit-scrollbar-track { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .dupe-msg::-webkit-scrollbar-thumb { background: #b45309 !important; }
[data-theme="dark"] .dupe-msg::-webkit-scrollbar-thumb:hover { background: #f59e0b !important; }

/* =========================================
   📱 RESPONSIVE MÓVIL
   ========================================= */
@media (max-width: 767px) {
    .dupe-toast {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 14px 14px 10px;
        font-size: 0.85rem;
    }
    .dupe-msg { max-height: 45vh; }
    .dupe-table { font-size: 0.72rem; }
    .dupe-table th, .dupe-table td { padding: 4px 7px; }
    .dupe-hint { font-size: 0.65rem; }
    .dupe-footer { gap: 8px; }
}

/* Toast simple para mensajes de submit */
.simple-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10000;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.simple-toast.show { display: flex; animation: fadeInUp 0.3s ease; }
.simple-toast.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.simple-toast.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
@keyframes fadeInUp { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

[data-theme="dark"] .simple-toast.success { background:#1a3a2a; color:#82e0aa; border-color:#27ae60; }
[data-theme="dark"] .simple-toast.error { background:#3a1a1a; color:#ec7063; border-color:#c0392b; }

/* =========================================
   📖 MODAL MANUAL - COMPLETO
   ========================================= */

/* Botón de ayuda en nav */
.nav-item .btn-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: transparent;
    color: #2c3e50;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
    text-decoration: none;
}

.nav-item .btn-help:hover {
    border-color: #16a085;
    background: rgba(22, 160, 133, 0.08);
    color: #16a085;
    text-decoration: none;
}

/* Overlay */
.manual-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.manual-modal.show {
    display: flex;
    animation: manualFadeIn 0.25s ease;
}

@keyframes manualFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.manual-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Container */
.manual-container {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: manualSlideUp 0.3s ease;
}

@keyframes manualSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header */
.manual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: linear-gradient(135deg, #16a085 0%, #27ae60 100%);
    color: #fff;
    flex-shrink: 0;
}

.manual-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.manual-icon {
    font-size: 2rem;
    opacity: 0.95;
}

.manual-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.manual-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.manual-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manual-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Body: sidebar + content */
.manual-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar / Índice */
.manual-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 16px 0;
}

.manual-sidebar-title {
    padding: 8px 20px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #95a5a6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.manual-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.manual-nav-link {
    padding: 9px 20px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.manual-nav-link:hover {
    background: #ecf5f3;
    color: #16a085;
    text-decoration: none;
}

.manual-nav-link.active {
    background: #d5ede7;
    color: #16a085;
    border-left-color: #16a085;
    font-weight: 600;
}

/* Contenido principal */
.manual-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    scroll-behavior: smooth;
}

.manual-section {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #f0f0f0;
    scroll-margin-top: 20px;
}

.manual-section:last-of-type {
    border-bottom: none;
}

.manual-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #16a085;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.manual-section h2 i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.manual-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 18px 0 10px;
}

.manual-section p {
    line-height: 1.7;
    color: #34495e;
    margin: 0 0 12px;
}

.manual-section ul, .manual-section ol {
    padding-left: 22px;
    margin: 0 0 12px;
    color: #34495e;
    line-height: 1.8;
}

.manual-section code {
    background: #f4f6f8;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.88em;
    color: #c0392b;
    border: 1px solid #e1e4e8;
}

.manual-section kbd {
    background: #2c3e50;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.82em;
    border-bottom: 2px solid #1a252f;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin: 0 2px;
}

/* Tablas */
.manual-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.9rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.manual-table thead {
    background: #16a085;
    color: #fff;
}

.manual-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
}

.manual-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #34495e;
}

.manual-table tbody tr:hover {
    background: #f8f9fa;
}

.manual-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alertas */
.manual-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin: 14px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-left: 4px solid;
}

.manual-alert i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.manual-alert-info {
    background: #e8f5fc;
    border-color: #3498db;
    color: #1e4e79;
}

.manual-alert-warning {
    background: #fff8e1;
    border-color: #f39c12;
    color: #7a5400;
}

.manual-alert-success {
    background: #e8f5e9;
    border-color: #27ae60;
    color: #1e5a2f;
}

/* Grid de 2 columnas */
.manual-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 14px 0;
}

.manual-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.manual-card h4 {
    margin: 0 0 10px;
    color: #16a085;
    display: flex;
    align-items: center;
    gap: 8px;
}

.manual-card ul {
    margin: 0;
    padding-left: 18px;
}

/* Code blocks */
.manual-code {
    display: inline-block;
    background: #2c3e50;
    color: #ecf0f1;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.88em;
    margin: 6px 0;
    word-break: break-all;
}

.manual-pre {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 14px 18px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
    font-size: 0.85em;
    line-height: 1.5;
}

.manual-pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: none;
}

/* Curiosidades */
.manual-curiosidades {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manual-curiosidad {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: linear-gradient(135deg, #fff5e6 0%, #fff 100%);
    border-radius: 8px;
    border-left: 4px solid #f39c12;
}

.manual-curiosidad i {
    font-size: 1.5rem;
    color: #f39c12;
    flex-shrink: 0;
    margin-top: 2px;
}

.manual-curiosidad strong {
    display: block;
    color: #2c3e50;
    margin-bottom: 4px;
}

.manual-curiosidad p {
    margin: 0;
    font-size: 0.9rem;
    color: #5d6d7e;
}

/* FAQ acordeón */
.manual-faq {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.manual-faq[open] {
    background: #fff;
    border-color: #16a085;
    box-shadow: 0 2px 8px rgba(22, 160, 133, 0.1);
}

.manual-faq summary {
    padding: 14px 18px;
    cursor: pointer;
    color: #2c3e50;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease;
}

.manual-faq summary::-webkit-details-marker { display: none; }

.manual-faq summary::after {
    content: '\f107';
    font-family: FontAwesome;
    color: #95a5a6;
    transition: transform 0.2s ease;
}

.manual-faq[open] summary::after {
    transform: rotate(180deg);
    color: #16a085;
}

.manual-faq summary:hover {
    background: #ecf5f3;
}

.manual-faq > p, .manual-faq > div {
    padding: 0 18px 16px;
    color: #5d6d7e;
    line-height: 1.7;
    margin: 0;
}

/* Footer contenido */
.manual-footer-content {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    text-align: center;
    color: #95a5a6;
    font-size: 0.9rem;
}

/* Badges */
.badge-success {
    display: inline-block;
    background: #27ae60;
    color: #fff;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.82em;
    font-weight: 600;
}

/* =========================================
   🌙 MODO OSCURO
   ========================================= */
[data-theme="dark"] .manual-container {
    background: #1a1a1a;
    color: #e0e0e0;
}

[data-theme="dark"] .manual-header {
    background: linear-gradient(135deg, #1a5c4e 0%, #1e6b4a 100%);
}

[data-theme="dark"] .manual-sidebar {
    background: #141414;
    border-right-color: #2a2a2a;
}

[data-theme="dark"] .manual-sidebar-title {
    color: #808080;
}

[data-theme="dark"] .manual-nav-link {
    color: #c0c0c0;
}

[data-theme="dark"] .manual-nav-link:hover {
    background: #1e2a28;
    color: #5dade2;
}

[data-theme="dark"] .manual-nav-link.active {
    background: #1a2a35;
    color: #5dade2;
    border-left-color: #5dade2;
}

[data-theme="dark"] .manual-section h2 {
    color: #5dade2;
}

[data-theme="dark"] .manual-section h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .manual-section p,
[data-theme="dark"] .manual-section ul,
[data-theme="dark"] .manual-section ol {
    color: #c0c0c0;
}

[data-theme="dark"] .manual-section code {
    background: #252525;
    color: #ff7675;
    border-color: #3a3a3a;
}

[data-theme="dark"] .manual-table {
    background: #1e1e1e;
}

[data-theme="dark"] .manual-table thead {
    background: #1a5c4e;
}

[data-theme="dark"] .manual-table td {
    color: #c0c0c0;
    border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .manual-table tbody tr:hover {
    background: #252525;
}

[data-theme="dark"] .manual-alert-info {
    background: #1a2a35;
    color: #85c1e0;
    border-color: #3498db;
}

[data-theme="dark"] .manual-alert-warning {
    background: #2a2515;
    color: #f5c26b;
    border-color: #f39c12;
}

[data-theme="dark"] .manual-alert-success {
    background: #1a2a1f;
    color: #7dd3a1;
    border-color: #27ae60;
}

[data-theme="dark"] .manual-card {
    background: #202020;
    border-color: #2a2a2a;
}

[data-theme="dark"] .manual-card h4 {
    color: #5dade2;
}

[data-theme="dark"] .manual-curiosidad {
    background: linear-gradient(135deg, #2a2515 0%, #1e1e1e 100%);
    border-color: #f39c12;
}

[data-theme="dark"] .manual-curiosidad strong {
    color: #e0e0e0;
}

[data-theme="dark"] .manual-curiosidad p {
    color: #a0a0a0;
}

[data-theme="dark"] .manual-faq {
    background: #202020;
    border-color: #2a2a2a;
}

[data-theme="dark"] .manual-faq[open] {
    background: #252525;
    border-color: #5dade2;
}

[data-theme="dark"] .manual-faq summary {
    color: #e0e0e0;
}

[data-theme="dark"] .manual-faq summary:hover {
    background: #1e2a28;
}

[data-theme="dark"] .manual-faq > p,
[data-theme="dark"] .manual-faq > div {
    color: #a0a0a0;
}

[data-theme="dark"] .manual-footer-content {
    border-top-color: #2a2a2a;
    color: #808080;
}

[data-theme="dark"] .manual-section {
    border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .nav-item .btn-help {
    border-color: #3a3a3a;
    color: #f0f0f0;
}

[data-theme="dark"] .nav-item .btn-help:hover {
    border-color: #5dade2;
    background: rgba(93, 173, 226, 0.1);
    color: #5dade2;
}

[data-theme="dark"] .manual-pre {
    background: #0d0d0d;
}

/* =========================================
   📱 RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .manual-modal { padding: 10px; }
    .manual-container { max-height: 95vh; }
    
    .manual-body { flex-direction: column; }
    
    .manual-sidebar {
        width: 100%;
        max-height: 140px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .manual-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 10px;
        gap: 4px;
    }
    
    .manual-nav-link {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .manual-nav-link.active {
        border-left: none;
        border-bottom-color: #16a085;
    }
    
    .manual-content { padding: 20px; }
    .manual-header { padding: 16px 20px; }
    .manual-title { font-size: 1.1rem; }
    .manual-subtitle { font-size: 0.75rem; }
    .manual-icon { font-size: 1.5rem; }
    
    .manual-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .manual-header-content { gap: 10px; }
    .manual-section h2 { font-size: 1.15rem; }
    .manual-table { font-size: 0.82rem; }
    .manual-table th, .manual-table td { padding: 8px 10px; }
}

/* Scrollbar personalizado */
.manual-sidebar::-webkit-scrollbar,
.manual-content::-webkit-scrollbar { width: 8px; height: 8px; }
.manual-sidebar::-webkit-scrollbar-track,
.manual-content::-webkit-scrollbar-track { background: transparent; }
.manual-sidebar::-webkit-scrollbar-thumb,
.manual-content::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}
.manual-sidebar::-webkit-scrollbar-thumb:hover,
.manual-content::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

[data-theme="dark"] .manual-sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .manual-content::-webkit-scrollbar-thumb {
    background: #3a3a3a;
}

/* =========================================
   🛡️ SECCIONES DE ADMINISTRACIÓN
   ========================================= */

.manual-section-admin {
    border-left: 4px solid #e74c3c;
    padding-left: 20px;
    background: linear-gradient(to right, rgba(231, 76, 60, 0.03), transparent);
    border-radius: 0 8px 8px 0;
}

.manual-section-admin h2 {
    color: #c0392b !important;
}

[data-theme="dark"] .manual-section-admin h2 {
    color: #e74c3c !important;
}

[data-theme="dark"] .manual-section-admin {
    border-left-color: #e74c3c;
    background: linear-gradient(to right, rgba(231, 76, 60, 0.08), transparent);
}

/* Separador y título de sección en el índice */
.manual-nav-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 12px 20px;
}

[data-theme="dark"] .manual-nav-divider {
    background: #2a2a2a;
}

.manual-nav-section-title {
    padding: 4px 20px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #e74c3c;
    display: flex;
    align-items: center;
    gap: 6px;
}

.manual-nav-section-title::before {
    content: '\f023';
    font-family: FontAwesome;
    font-size: 0.65rem;
}

[data-theme="dark"] .manual-nav-section-title {
    color: #ff6b5b;
}

/* Tarjetas apiladas verticalmente (una sola columna) */
.manual-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 14px 0;
}

.manual-cards-stack .manual-card {
    margin: 0;
    width: 100%;
}
/* Agrupa alertas consecutivas en una sola columna */
.manual-alerts-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.manual-alerts-stack .manual-alert {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.manual-alerts-stack .manual-alert i {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 2px;
}

.manual-alerts-stack .manual-alert strong {
    display: inline;
    margin-right: 4px;
}

/* En móvil: asegurar que nunca se pongan en columnas */
@media (max-width: 767px) {
    .manual-alerts-stack .manual-alert {
        flex-direction: row;
        width: 100%;
    }
}
/* =========================================
   ALERTAS DEL MANUAL - TEXTO CONTINUO
   ========================================= */

.manual-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin: 14px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-left: 4px solid;
    line-height: 1.6;
}

.manual-alert i {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
}

/* ✅ CLAVE: El texto fluye como párrafo continuo */
.manual-alert-text {
    flex: 1;
    min-width: 0; /* Permite que el texto se ajuste */
    word-wrap: break-word;
}

.manual-alert-text strong {
    display: inline; /* ✅ inline, no block */
    margin-right: 4px;
    font-weight: 700;
}

.manual-alert-text p {
    margin: 0 0 8px;
}

.manual-alert-text p:last-child {
    margin-bottom: 0;
}

/* Tipos de alerta */
.manual-alert-info {
    background: #e8f5fc;
    border-color: #3498db;
    color: #1e4e79;
}

.manual-alert-info i { color: #3498db; }

.manual-alert-warning {
    background: #fff8e1;
    border-color: #f39c12;
    color: #7a5400;
}

.manual-alert-warning i { color: #f39c12; }

.manual-alert-success {
    background: #e8f5e9;
    border-color: #27ae60;
    color: #1e5a2f;
}

.manual-alert-success i { color: #27ae60; }

/* Agrupación de alertas consecutivas */
.manual-alerts-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.manual-alerts-stack .manual-alert {
    margin: 0;
}

/* =========================================
   🌙 MODO OSCURO - ALERTAS
   ========================================= */
[data-theme="dark"] .manual-alert-info {
    background: #1a2a35;
    color: #85c1e0;
    border-color: #3498db;
}

[data-theme="dark"] .manual-alert-info i { color: #5dade2; }

[data-theme="dark"] .manual-alert-warning {
    background: #2a2515;
    color: #f5c26b;
    border-color: #f39c12;
}

[data-theme="dark"] .manual-alert-warning i { color: #f5b041; }

[data-theme="dark"] .manual-alert-success {
    background: #1a2a1f;
    color: #7dd3a1;
    border-color: #27ae60;
}

[data-theme="dark"] .manual-alert-success i { color: #58d68d; }

/* =========================================
   📱 RESPONSIVE - ALERTAS
   ========================================= */
@media (max-width: 767px) {
    .manual-alert {
        padding: 12px 14px;
        gap: 10px;
    }
    
    .manual-alert i {
        font-size: 1rem;
    }
    
    .manual-alert-text {
        font-size: 0.92rem;
    }
}

/* =========================================
   🦶 FOOTER MODERNO v2.2 - MULTI-TEMA
   ========================================= */

/* =========================================
   🎨 VARIABLES POR TEMA
   ========================================= */
:root {
    /* MODO LIGHT - Grises neutros modernos */
    --footer-bg-1: #f5f6f8;
    --footer-bg-2: #e9ecef;
    --footer-bg-gradient: linear-gradient(135deg, #f5f6f8 0%, #e9ecef 50%, #dee2e6 100%);
    --footer-bottom-bg: rgba(0, 0, 0, 0.04);
    --footer-wave-fill: #f8f9fa;
    --footer-shadow: 0 -5px 30px rgba(0, 0, 0, 0.06);
    
    --footer-text: #2c3e50;
    --footer-text-muted: #5a6c7d;
    --footer-text-subtle: #8b95a1;
    
    --footer-border: rgba(0, 0, 0, 0.08);
    --footer-border-light: rgba(0, 0, 0, 0.06);
    
    --footer-card-bg: #ffffff;
    --footer-card-bg-hover: #f8f9fa;
    --footer-card-border: rgba(0, 0, 0, 0.08);
    
    --footer-accent: #3498db;
    --footer-accent-hover: #2980b9;
    --footer-accent-soft: rgba(52, 152, 219, 0.1);
    
    --footer-title-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #5a6c7d 100%);
    
    --footer-logo-bg: rgba(52, 152, 219, 0.08);
    --footer-logo-border: rgba(52, 152, 219, 0.2);
    
    --footer-wave-color: rgba(52, 152, 219, 0.25);
    --footer-rss-color: #f39c12;
    --footer-rss-color-alt: #e67e22;
    --footer-signal-color: #27ae60;
    --footer-heart-color: #e74c3c;
    
    --footer-tech-bg: rgba(52, 152, 219, 0.08);
    --footer-tech-border: rgba(52, 152, 219, 0.2);
    --footer-tech-text: #34495e;
    --footer-tech-hover-bg: rgba(52, 152, 219, 0.15);
    
    --footer-contact-bg: linear-gradient(135deg, rgba(231, 76, 60, 0.06), rgba(231, 76, 60, 0.02));
    --footer-contact-bg-hover: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(231, 76, 60, 0.06));
    --footer-contact-border: rgba(231, 76, 60, 0.2);
    --footer-contact-border-hover: rgba(231, 76, 60, 0.4);
    --footer-contact-text: #2c3e50;
    --footer-contact-label: #6c757d;
    --footer-contact-hint: #95a5a6;
    
    --footer-ql-bg: #ffffff;
    --footer-ql-bg-hover: #f8f9fa;
    --footer-ql-border: rgba(0, 0, 0, 0.08);
    --footer-ql-text: #2c3e50;
    --footer-ql-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --footer-ql-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    --footer-status-active-bg: rgba(39, 174, 96, 0.08);
    --footer-status-active-border: rgba(39, 174, 96, 0.25);
    --footer-status-pending-bg: rgba(241, 196, 15, 0.08);
    --footer-status-pending-border: rgba(241, 196, 15, 0.25);
    --footer-status-finished-bg: rgba(231, 76, 60, 0.08);
    --footer-status-finished-border: rgba(231, 76, 60, 0.25);
    --footer-status-card-bg: #ffffff;
    --footer-status-text: #2c3e50;
    --footer-status-label: #6c757d;
    --footer-progress-bg: rgba(0, 0, 0, 0.06);
    
    --footer-divider-gradient: linear-gradient(90deg, 
        rgba(52, 152, 219, 0.5) 0%, 
        rgba(90, 108, 125, 0.3) 50%, 
        transparent 100%);
    --footer-divider-dot: #3498db;
    --footer-divider-glow: rgba(52, 152, 219, 0.5);
    
    --footer-edition-bg: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(90, 108, 125, 0.08));
    --footer-edition-border: rgba(52, 152, 219, 0.3);
    --footer-edition-text: #2980b9;
    --footer-edition-icon: #3498db;
    
    --footer-version-bg: rgba(52, 152, 219, 0.1);
    --footer-version-border: rgba(52, 152, 219, 0.25);
    --footer-version-text: #2980b9;
    
    --footer-copyright-text: #6c757d;
    --footer-separator-color: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
    /* MODO DARK - Grises oscuros neutros (sin tonos azulados) */
    --footer-bg-1: #1e2125;
    --footer-bg-2: #2c2f33;
    --footer-bg-gradient: linear-gradient(135deg, #1e2125 0%, #2c2f33 50%, #34383c 100%);
    --footer-bottom-bg: rgba(0, 0, 0, 0.25);
    --footer-wave-fill: #14161a;
    --footer-shadow: 0 -5px 30px rgba(0, 0, 0, 0.35);
    
    --footer-text: #ecf0f1;
    --footer-text-muted: rgba(236, 240, 241, 0.75);
    --footer-text-subtle: rgba(236, 240, 241, 0.5);
    
    --footer-border: rgba(255, 255, 255, 0.08);
    --footer-border-light: rgba(255, 255, 255, 0.05);
    
    --footer-card-bg: rgba(255, 255, 255, 0.04);
    --footer-card-bg-hover: rgba(255, 255, 255, 0.07);
    --footer-card-border: rgba(255, 255, 255, 0.08);
    
    --footer-accent: #5dade2;
    --footer-accent-hover: #85c1e9;
    --footer-accent-soft: rgba(93, 173, 226, 0.15);
    
    --footer-title-gradient: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 50%, #95a5a6 100%);
    
    --footer-logo-bg: rgba(255, 255, 255, 0.08);
    --footer-logo-border: rgba(255, 255, 255, 0.15);
    
    --footer-wave-color: rgba(93, 173, 226, 0.35);
    --footer-rss-color: #f39c12;
    --footer-rss-color-alt: #f8c471;
    --footer-signal-color: #82e0aa;
    --footer-heart-color: #e74c3c;
    
    --footer-tech-bg: rgba(255, 255, 255, 0.05);
    --footer-tech-border: rgba(255, 255, 255, 0.1);
    --footer-tech-text: rgba(236, 240, 241, 0.8);
    --footer-tech-hover-bg: rgba(93, 173, 226, 0.18);
    
    --footer-contact-bg: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(231, 76, 60, 0.05));
    --footer-contact-bg-hover: linear-gradient(135deg, rgba(231, 76, 60, 0.22), rgba(231, 76, 60, 0.1));
    --footer-contact-border: rgba(231, 76, 60, 0.25);
    --footer-contact-border-hover: rgba(231, 76, 60, 0.5);
    --footer-contact-text: #ffffff;
    --footer-contact-label: rgba(255, 255, 255, 0.6);
    --footer-contact-hint: rgba(255, 255, 255, 0.5);
    
    --footer-ql-bg: rgba(255, 255, 255, 0.04);
    --footer-ql-bg-hover: rgba(255, 255, 255, 0.08);
    --footer-ql-border: rgba(255, 255, 255, 0.08);
    --footer-ql-text: rgba(236, 240, 241, 0.9);
    --footer-ql-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --footer-ql-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.35);
    
    --footer-status-active-bg: rgba(39, 174, 96, 0.1);
    --footer-status-active-border: rgba(39, 174, 96, 0.3);
    --footer-status-pending-bg: rgba(241, 196, 15, 0.1);
    --footer-status-pending-border: rgba(241, 196, 15, 0.3);
    --footer-status-finished-bg: rgba(231, 76, 60, 0.1);
    --footer-status-finished-border: rgba(231, 76, 60, 0.3);
    --footer-status-card-bg: rgba(255, 255, 255, 0.05);
    --footer-status-text: #ecf0f1;
    --footer-status-label: rgba(236, 240, 241, 0.65);
    --footer-progress-bg: rgba(0, 0, 0, 0.3);
    
    --footer-divider-gradient: linear-gradient(90deg, 
        rgba(93, 173, 226, 0.5) 0%, 
        rgba(149, 165, 166, 0.35) 50%, 
        transparent 100%);
    --footer-divider-dot: #5dade2;
    --footer-divider-glow: rgba(93, 173, 226, 0.5);
    
    --footer-edition-bg: linear-gradient(135deg, rgba(93, 173, 226, 0.2), rgba(149, 165, 166, 0.15));
    --footer-edition-border: rgba(93, 173, 226, 0.45);
    --footer-edition-text: #aed6f1;
    --footer-edition-icon: #5dade2;
    
    --footer-version-bg: rgba(93, 173, 226, 0.15);
    --footer-version-border: rgba(93, 173, 226, 0.3);
    --footer-version-text: #aed6f1;
    
    --footer-copyright-text: rgba(236, 240, 241, 0.6);
    --footer-separator-color: rgba(255, 255, 255, 0.2);
}

/* =========================================
   📦 CONTENEDOR PRINCIPAL
   ========================================= */
.footer-modern-v2 {
    position: relative;
    background: var(--footer-bg-gradient);
    color: var(--footer-text);
    margin-top: 80px;
    overflow: hidden;
    box-shadow: var(--footer-shadow);
    transition: background 0.4s ease, color 0.4s ease;
}

/* =========================================
   🌊 ONDA DECORATIVA SUPERIOR
   ========================================= */
.footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 1;
}

.footer-wave svg {
    width: 100%;
    height: 100%;
    fill: var(--footer-wave-fill);
    transition: fill 0.4s ease;
}

/* =========================================
   📡 SECCIÓN SUPERIOR (Identidad + Actividad)
   ========================================= */
.footer-top {
    position: relative;
    z-index: 2;
    padding: 80px 0 40px;
    border-bottom: 1px solid var(--footer-border);
}

.footer-identity {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 25px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 28px; /* ✅ Aumentado de 18px a 28px */
    flex: 1;
    min-width: 280px;
    padding-left: 20px; /* ✅ Añadido: aire izquierdo */
}

/* Logo con ondas de radio */
.footer-logo-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.footer-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--footer-logo-bg);
    padding: 6px;
    border: 2px solid var(--footer-logo-border);
    transition: all 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.05) rotate(-2deg);
    border-color: var(--footer-accent);
}

.footer-radio-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.footer-radio-waves span {
    position: absolute;
    border: 2px solid var(--footer-wave-color);
    border-radius: 50%;
    animation: radioWave 3s ease-out infinite;
}

.footer-radio-waves span:nth-child(1),
.footer-radio-waves span:nth-child(2),
.footer-radio-waves span:nth-child(3) {
    width: 80px; height: 80px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.footer-radio-waves span:nth-child(1) { animation-delay: 0s; }
.footer-radio-waves span:nth-child(2) { animation-delay: 1s; }
.footer-radio-waves span:nth-child(3) { animation-delay: 2s; }

@keyframes radioWave {
    0% { width: 80px; height: 80px; opacity: 0.8; }
    100% { width: 140px; height: 140px; opacity: 0; }
}

/* Brand text visual */
.footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    position: relative;
    left: 18px; /* ✅ Desplazamiento sutil a la derecha */
}

.brand-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-edition-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--footer-edition-bg);
    border: 1px solid var(--footer-edition-border);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--footer-edition-text);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all 0.3s ease;
}

.brand-edition-badge i {
    font-size: 0.75rem;
    color: var(--footer-edition-icon);
}

.brand-edition-badge-generic {
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.12), 
        rgba(26, 188, 156, 0.12));
    border-color: rgba(39, 174, 96, 0.3);
    color: var(--footer-signal-color);
}

[data-theme="dark"] .brand-edition-badge-generic {
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.2), 
        rgba(26, 188, 156, 0.2));
    border-color: rgba(39, 174, 96, 0.4);
    color: #82e0aa;
}

.brand-edition-badge-generic i {
    color: var(--footer-signal-color);
}

.footer-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.1;
    background: var(--footer-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    transition: background 0.4s ease;
}

.brand-divider {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 2px 0;
    max-width: 220px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: var(--footer-divider-gradient);
    border-radius: 1px;
}

.divider-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--footer-divider-dot);
    box-shadow: 0 0 8px var(--footer-divider-glow);
    flex-shrink: 0;
}

.divider-icon {
    font-size: 0.85rem;
    color: var(--footer-rss-color);
    flex-shrink: 0;
    animation: rssPulse 2s ease-in-out infinite;
}

@keyframes rssPulse {
    0%, 100% { 
        transform: scale(1); 
        color: var(--footer-rss-color);
    }
    50% { 
        transform: scale(1.15); 
        color: var(--footer-rss-color-alt);
    }
}

.footer-tagline {
    margin: 0;
    font-size: 0.88rem;
    color: var(--footer-text-muted);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.footer-tagline i {
    color: var(--footer-signal-color);
    font-size: 0.85rem;
}

/* =========================================
   📅 TARJETA DE ESTADO DE ACTIVIDAD
   ========================================= */
.footer-activity-status {
    flex-shrink: 0;
    min-width: 300px;
    max-width: 380px;
}

.activity-status-card {
    background: var(--footer-status-card-bg);
    border: 1px solid var(--footer-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.activity-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: background 0.3s ease;
}

.activity-status-card.status-active {
    border-color: var(--footer-status-active-border);
    background: var(--footer-status-active-bg);
}
.activity-status-card.status-active::before {
    background: linear-gradient(180deg, #27ae60, #2ecc71);
}

.activity-status-card.status-pending {
    border-color: var(--footer-status-pending-border);
    background: var(--footer-status-pending-bg);
}
.activity-status-card.status-pending::before {
    background: linear-gradient(180deg, #f39c12, #f1c40f);
}

.activity-status-card.status-finished {
    border-color: var(--footer-status-finished-border);
    background: var(--footer-status-finished-bg);
}
.activity-status-card.status-finished::before {
    background: linear-gradient(180deg, #e74c3c, #c0392b);
}

.activity-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .activity-status-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.activity-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--footer-status-label);
    font-weight: 600;
}

.activity-status-header i {
    font-size: 1.1rem;
}

.status-active .activity-status-header i { color: #27ae60; }
.status-pending .activity-status-header i { color: #f39c12; }
.status-finished .activity-status-header i { color: #e74c3c; }

[data-theme="dark"] .status-active .activity-status-header i { color: #82e0aa; }
[data-theme="dark"] .status-pending .activity-status-header i { color: #f8c471; }
[data-theme="dark"] .status-finished .activity-status-header i { color: #ec7063; }

.activity-status-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--footer-status-text);
    line-height: 1.3;
}

.activity-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--footer-progress-bg);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.activity-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease-out;
    position: relative;
    overflow: hidden;
}

.status-active .activity-progress-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}
.status-pending .activity-progress-fill {
    background: linear-gradient(90deg, #f39c12, #f1c40f);
    width: 0% !important;
}
.status-finished .activity-progress-fill {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.activity-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.activity-dates {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--footer-status-label);
    gap: 10px;
    padding-top: 2px;
}

.activity-dates span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.activity-dates i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* =========================================
   📋 SECCIÓN PRINCIPAL (Grid)
   ========================================= */
.footer-main {
    position: relative;
    z-index: 2;
    padding: 50px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr;
    gap: 50px;
}

.footer-col-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--footer-text);
    margin: 0 0 20px;
    padding-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col-title i {
    color: var(--footer-accent);
    font-size: 1.1rem;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--footer-accent), transparent);
    border-radius: 2px;
}

.footer-description {
    color: var(--footer-text-muted);
    line-height: 1.7;
    font-size: 0.9rem;
    margin: 0 0 20px;
}

.footer-tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--footer-tech-bg);
    border: 1px solid var(--footer-tech-border);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--footer-tech-text);
    font-weight: 500;
    transition: all 0.2s ease;
}

.tech-badge:hover {
    background: var(--footer-tech-hover-bg);
    border-color: var(--footer-accent);
    color: var(--footer-accent);
    transform: translateY(-2px);
}

/* =========================================
   📧 TARJETA DE CONTACTO
   ========================================= */
.footer-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--footer-contact-bg);
    border: 1px solid var(--footer-contact-border);
    border-radius: 14px;
    color: var(--footer-contact-text);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.footer-contact-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-contact-card:hover {
    background: var(--footer-contact-bg-hover);
    border-color: var(--footer-contact-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(231, 76, 60, 0.15);
    color: var(--footer-contact-text);
    text-decoration: none;
}

[data-theme="dark"] .footer-contact-card:hover {
    box-shadow: 0 10px 25px rgba(231, 76, 60, 0.25);
}

.footer-contact-card:hover::before {
    opacity: 1;
}

.contact-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.footer-contact-card:hover .contact-card-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.5);
}

.contact-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.contact-card-label {
    font-size: 0.72rem;
    color: var(--footer-contact-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.contact-card-value {
    font-size: 0.95rem;
    color: var(--footer-contact-text);
    font-weight: 600;
    word-break: break-all;
    line-height: 1.3;
}

.contact-card-hint {
    font-size: 0.75rem;
    color: var(--footer-contact-hint);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.contact-card-hint i {
    font-size: 0.7rem;
}

.contact-card-arrow {
    color: var(--footer-text-subtle);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.footer-contact-card:hover .contact-card-arrow {
    color: var(--footer-accent);
    transform: translateX(4px);
}

/* =========================================
   🔗 ENLACES RÁPIDOS (SOLO LOG PÚBLICO - DISEÑO AMPLIADO)
   ========================================= */

.footer-quick-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--footer-ql-bg);
    border: 1px solid var(--footer-ql-border);
    border-radius: 14px;
    color: var(--footer-ql-text);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 80px;
    box-shadow: var(--footer-ql-shadow);
}

.quick-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--ql-color, var(--footer-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quick-link-card:hover {
    transform: translateX(4px);
    background: var(--footer-ql-bg-hover);
    border-color: var(--ql-color, var(--footer-accent));
    color: var(--footer-ql-text);
    text-decoration: none;
    box-shadow: var(--footer-ql-shadow-hover);
}

.quick-link-card:hover::before {
    opacity: 1;
}

.ql-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ql-color, var(--footer-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.quick-link-card:hover .ql-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.ql-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ql-text {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: var(--footer-ql-text);
}

.ql-subtext {
    font-size: 0.78rem;
    color: var(--footer-text-muted);
    font-weight: 400;
    line-height: 1.3;
}

.ql-arrow {
    color: var(--footer-text-subtle);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.quick-link-card:hover .ql-arrow {
    color: var(--ql-color, var(--footer-accent));
    transform: translateX(4px);
}

/* Color distintivo para Log público */
.ql-log { --ql-color: #27ae60; }
[data-theme="dark"] .ql-log { --ql-color: #58d68d; }

/* =========================================
   ⚖️ SECCIÓN INFERIOR (Copyright)
   ========================================= */
.footer-bottom {
    position: relative;
    z-index: 2;
    background: var(--footer-bottom-bg);
    padding: 20px 0;
    border-top: 1px solid var(--footer-border-light);
    transition: background 0.4s ease;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--footer-copyright-text);
}

.footer-separator {
    color: var(--footer-separator-color);
}

.footer-copyright-link {
    color: var(--footer-accent);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-copyright-link:hover {
    color: var(--footer-accent-hover);
    text-decoration: underline;
}

.footer-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    background: var(--footer-version-bg);
    border: 1px solid var(--footer-version-border);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--footer-version-text);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

.footer-made-with {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--footer-copyright-text);
}

.heart-beat {
    color: var(--footer-heart-color);
    font-size: 0.95rem;
    animation: heartBeat 1.5s ease-in-out infinite;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.15); }
}

/* =========================================
   📱 RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .footer-col:first-child {
        grid-column: 1 / -1;
    }
    
    .footer-activity-status {
        min-width: 100%;
    }
}

@media (max-width: 767px) {
    .footer-modern-v2 {
        margin-top: 50px;
    }
    
    .footer-top {
        padding: 60px 0 30px;
    }
    
    .footer-identity {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-brand {
        gap: 18px;
        padding-left: 0;
        justify-content: center;
    }
    
    .footer-title {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .footer-tagline {
        justify-content: center;
        text-align: center;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    
    .footer-col:first-child {
        grid-column: auto;
    }
    
    .footer-col-title {
        justify-content: center;
    }
    
    .footer-col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-description {
        text-align: center;
    }
    
    .footer-tech-badges {
        justify-content: center;
    }
    
    .footer-quick-links {
        grid-template-columns: 1fr 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-copyright {
        justify-content: center;
    }
    
    .footer-made-with {
        justify-content: center;
    }
    
    .footer-wave {
        height: 40px;
    }
    
    .activity-status-card {
        text-align: left;
    }
    
    .activity-dates {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .brand-header {
        justify-content: center;
    }
    
    .brand-divider {
        justify-content: center;
        max-width: 100%;
        margin: 4px auto;
    }
    .footer-brand-text {
        left: 0; /* Centrado en móvil */
        align-items: center;
    }
}

@media (max-width: 480px) {
    .footer-quick-links {
        grid-template-columns: 1fr;
    }
    
    .quick-link-card {
        flex-direction: row;
        justify-content: flex-start;
        padding: 14px 18px;
        min-height: auto;
        gap: 14px;
    }
    
    .ql-text {
        text-align: left;
    }
    
    .footer-logo-wrapper {
        width: 56px;
        height: 56px;
    }
    
    .footer-logo {
        width: 56px;
        height: 56px;
    }
    
    .footer-title {
        font-size: 1.3rem;
    }
    
    .brand-edition-badge {
        font-size: 0.68rem;
        padding: 3px 10px;
    }
    
    .footer-radio-waves span:nth-child(1),
    .footer-radio-waves span:nth-child(2),
    .footer-radio-waves span:nth-child(3) {
        width: 70px;
        height: 70px;
    }
    
    @keyframes radioWave {
        0% { width: 70px; height: 70px; opacity: 0.8; }
        100% { width: 120px; height: 120px; opacity: 0; }
    }
}

/* =========================================
   🍪 COOKIE CONSENT BANNER
   ========================================= */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 20px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    pointer-events: none;
}

.cookie-banner.cookie-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.cookie-banner.cookie-closing {
    transform: translateY(100%);
    opacity: 0;
}

.cookie-container {
    max-width: 720px;
    margin: 0 auto;
    background: var(--cookie-bg, #ffffff);
    border: 1px solid var(--cookie-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Variables para modo claro (por defecto) */
:root {
    --cookie-bg: #ffffff;
    --cookie-border: rgba(0, 0, 0, 0.08);
    --cookie-text: #2c3e50;
    --cookie-text-muted: #6c757d;
    --cookie-text-subtle: #95a5a6;
    --cookie-icon-bg: linear-gradient(135deg, #f39c12, #e67e22);
    --cookie-icon-color: #ffffff;
    --cookie-category-bg: #f8f9fa;
    --cookie-category-border: rgba(0, 0, 0, 0.05);
    --cookie-code-bg: rgba(0, 0, 0, 0.06);
    --cookie-code-text: #c0392b;
    --cookie-btn-reject-bg: #f8f9fa;
    --cookie-btn-reject-text: #2c3e50;
    --cookie-btn-reject-border: rgba(0, 0, 0, 0.1);
    --cookie-btn-reject-hover: #e9ecef;
    --cookie-btn-accept-bg: linear-gradient(135deg, #27ae60, #229954);
    --cookie-btn-accept-text: #ffffff;
    --cookie-switch-bg: #dee2e6;
    --cookie-switch-active: #27ae60;
    --cookie-badge-required-bg: rgba(39, 174, 96, 0.15);
    --cookie-badge-required-text: #27ae60;
    --cookie-badge-optional-bg: rgba(52, 152, 219, 0.15);
    --cookie-badge-optional-text: #2980b9;
    --cookie-divider: rgba(0, 0, 0, 0.06);
}

/* Variables para modo oscuro */
[data-theme="dark"] {
    --cookie-bg: #1e2530;
    --cookie-border: rgba(255, 255, 255, 0.08);
    --cookie-text: #ecf0f1;
    --cookie-text-muted: rgba(255, 255, 255, 0.7);
    --cookie-text-subtle: rgba(255, 255, 255, 0.5);
    --cookie-icon-bg: linear-gradient(135deg, #f39c12, #e67e22);
    --cookie-icon-color: #ffffff;
    --cookie-category-bg: rgba(255, 255, 255, 0.04);
    --cookie-category-border: rgba(255, 255, 255, 0.08);
    --cookie-code-bg: rgba(255, 255, 255, 0.08);
    --cookie-code-text: #ff7675;
    --cookie-btn-reject-bg: rgba(255, 255, 255, 0.06);
    --cookie-btn-reject-text: #ecf0f1;
    --cookie-btn-reject-border: rgba(255, 255, 255, 0.1);
    --cookie-btn-reject-hover: rgba(255, 255, 255, 0.1);
    --cookie-btn-accept-bg: linear-gradient(135deg, #27ae60, #229954);
    --cookie-btn-accept-text: #ffffff;
    --cookie-switch-bg: rgba(255, 255, 255, 0.15);
    --cookie-switch-active: #27ae60;
    --cookie-badge-required-bg: rgba(39, 174, 96, 0.2);
    --cookie-badge-required-text: #82e0aa;
    --cookie-badge-optional-bg: rgba(93, 173, 226, 0.2);
    --cookie-badge-optional-text: #aed6f1;
    --cookie-divider: rgba(255, 255, 255, 0.06);
}

/* Cabecera */
.cookie-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cookie-divider);
}

.cookie-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cookie-icon-bg);
    color: var(--cookie-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.25);
}

.cookie-header-text {
    flex: 1;
    min-width: 0;
}

.cookie-title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cookie-text);
}

.cookie-subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: var(--cookie-text-muted);
    line-height: 1.5;
}

.cookie-toggle-details {
    width: 34px;
    height: 34px;
    border: 1px solid var(--cookie-border);
    background: var(--cookie-category-bg);
    border-radius: 10px;
    color: var(--cookie-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.cookie-toggle-details:hover {
    background: var(--cookie-btn-reject-hover);
    color: var(--cookie-text);
    transform: translateY(-1px);
}

/* Detalles expandibles */
.cookie-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--cookie-category-bg);
}

.cookie-details.show {
    max-height: 800px;
}

/* Categorías de cookies */
.cookie-category {
    padding: 16px 22px;
    border-bottom: 1px solid var(--cookie-category-border);
}

.cookie-category:last-child {
    border-bottom: none;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.cookie-category-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cookie-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}

.cookie-category-icon.essential {
    background: linear-gradient(135deg, #27ae60, #229954);
}

.cookie-category-icon.preferences {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.cookie-category-icon.third-party {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.cookie-category-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cookie-text);
}

.cookie-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-badge.required {
    background: var(--cookie-badge-required-bg);
    color: var(--cookie-badge-required-text);
}

.cookie-badge.optional {
    background: var(--cookie-badge-optional-bg);
    color: var(--cookie-badge-optional-text);
}

.cookie-category-desc {
    margin: 0;
    padding-left: 48px;
    font-size: 0.82rem;
    color: var(--cookie-text-muted);
    line-height: 1.5;
}

.cookie-category-desc code {
    background: var(--cookie-code-bg);
    color: var(--cookie-code-text);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.78em;
}

/* Switch toggle */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--cookie-switch-bg);
    transition: 0.3s;
    border-radius: 24px;
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cookie-switch input:checked + .cookie-slider {
    background-color: var(--cookie-switch-active);
}

.cookie-switch input:checked + .cookie-slider:before {
    transform: translateX(20px);
}

.cookie-switch.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cookie-switch.disabled .cookie-slider {
    cursor: not-allowed;
}

/* Botones de acción */
.cookie-actions {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--cookie-divider);
}

.cookie-btn {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.cookie-btn-reject {
    background: var(--cookie-btn-reject-bg);
    color: var(--cookie-btn-reject-text);
    border: 1px solid var(--cookie-btn-reject-border);
}

.cookie-btn-reject:hover {
    background: var(--cookie-btn-reject-hover);
    transform: translateY(-1px);
}

.cookie-btn-accept {
    background: var(--cookie-btn-accept-bg);
    color: var(--cookie-btn-accept-text);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
}

.cookie-btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(39, 174, 96, 0.35);
}

/* Footer info */
.cookie-footer-info {
    padding: 12px 22px;
    border-top: 1px solid var(--cookie-divider);
    background: var(--cookie-category-bg);
    text-align: center;
}

.cookie-footer-info small {
    color: var(--cookie-text-subtle);
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cookie-footer-info i {
    color: var(--cookie-badge-optional-text);
}

/* =========================================
   📱 RESPONSIVE
   ========================================= */
@media (max-width: 767px) {
    .cookie-banner {
        padding: 12px;
    }
    
    .cookie-container {
        border-radius: 14px;
    }
    
    .cookie-header {
        padding: 16px 18px;
        gap: 12px;
    }
    
    .cookie-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
    }
    
    .cookie-title {
        font-size: 1rem;
    }
    
    .cookie-subtitle {
        font-size: 0.82rem;
    }
    
    .cookie-category {
        padding: 14px 18px;
    }
    
    .cookie-category-desc {
        padding-left: 0;
        margin-top: 8px;
    }
    
    .cookie-category-header {
        flex-wrap: wrap;
    }
    
    .cookie-actions {
        flex-direction: column;
        padding: 14px 18px;
    }
    
    .cookie-btn {
        width: 100%;
        padding: 14px;
    }
    
    .cookie-footer-info {
        padding: 10px 18px;
    }
}

@media (max-width: 480px) {
    .cookie-toggle-details {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .cookie-category-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .cookie-category-title {
        font-size: 0.85rem;
    }
    
    .cookie-badge {
        font-size: 0.62rem;
        padding: 1px 6px;
    }
}
/* =========================================
   🍪 ICONO DE COOKIE (EMOJI O FA)
   ========================================= */

.cookie-emoji {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
    animation: cookieBounce 2s ease-in-out infinite;
}

@keyframes cookieBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-5deg); }
    75% { transform: translateY(-2px) rotate(5deg); }
}

/* Si usas FA en lugar del emoji */
.cookie-icon-wrapper .fa-shield {
    font-size: 1.3rem;
}
/* =========================================
   🛡️ AVISO DE PRIVACIDAD (UNA COLUMNA)
   ========================================= */

.cookie-privacy-notice {
    display: flex;
    gap: 14px;
    padding: 16px 22px;
    margin: 0;
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.08), 
        rgba(46, 204, 113, 0.04));
    border-top: 1px solid var(--cookie-divider);
    border-bottom: 1px solid var(--cookie-divider);
    align-items: flex-start;
}

[data-theme="dark"] .cookie-privacy-notice {
    background: linear-gradient(135deg, 
        rgba(39, 174, 96, 0.12), 
        rgba(46, 204, 113, 0.06));
}

.privacy-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #27ae60, #229954);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(39, 174, 96, 0.25);
}

.privacy-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.privacy-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cookie-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.privacy-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
    animation: privacyPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes privacyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ✅ Lista en UNA SOLA COLUMNA con texto continuo */
.privacy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.privacy-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--cookie-text-muted);
    line-height: 1.55;
    padding: 6px 10px;
    background: rgba(39, 174, 96, 0.04);
    border-left: 3px solid rgba(39, 174, 96, 0.3);
    border-radius: 0 6px 6px 0;
    transition: all 0.2s ease;
}

[data-theme="dark"] .privacy-item {
    background: rgba(39, 174, 96, 0.06);
    border-left-color: rgba(130, 224, 170, 0.4);
}

.privacy-item:hover {
    background: rgba(39, 174, 96, 0.08);
    border-left-color: #27ae60;
    transform: translateX(2px);
}

.privacy-item i {
    color: #27ae60;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

[data-theme="dark"] .privacy-item i {
    color: #82e0aa;
}

/* ✅ Texto continuo como en el manual */
.privacy-text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

.privacy-text strong {
    display: inline;
    margin-right: 4px;
    font-weight: 700;
    color: var(--cookie-text);
}

/* =========================================
   📱 RESPONSIVE - PRIVACIDAD
   ========================================= */

@media (max-width: 767px) {
    .cookie-privacy-notice {
        padding: 14px 18px;
        gap: 12px;
    }
    
    .privacy-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .privacy-title {
        font-size: 0.88rem;
    }
    
    .privacy-item {
        font-size: 0.8rem;
        padding: 5px 8px;
        gap: 8px;
    }
    
    .privacy-item i {
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .privacy-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
    
    .privacy-item {
        font-size: 0.78rem;
    }
}
/* =========================================
   🆕 BOTÓN DE DESCARGA CLOUDBOOK
   ========================================= */

.footer-download-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 4px 0 16px;
    background: linear-gradient(135deg, 
        var(--footer-download-bg-1, rgba(52, 152, 219, 0.1)), 
        var(--footer-download-bg-2, rgba(41, 128, 185, 0.05)));
    border: 1px solid var(--footer-download-border, rgba(52, 152, 219, 0.25));
    border-radius: 12px;
    color: var(--footer-text);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.footer-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #3498db, #2980b9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-download-btn:hover {
    background: linear-gradient(135deg, 
        var(--footer-download-bg-1-hover, rgba(52, 152, 219, 0.18)), 
        var(--footer-download-bg-2-hover, rgba(41, 128, 185, 0.1)));
    border-color: var(--footer-download-border-hover, rgba(52, 152, 219, 0.5));
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.15);
    color: var(--footer-text);
    text-decoration: none;
}

.footer-download-btn:hover::before {
    opacity: 1;
}

.download-btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
}

.footer-download-btn:hover .download-btn-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 6px 14px rgba(52, 152, 219, 0.45);
}

.download-btn-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.download-btn-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--footer-text);
    letter-spacing: 0.2px;
}

.download-btn-version {
    font-size: 0.72rem;
    color: var(--footer-text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.download-btn-arrow {
    color: var(--footer-text-subtle);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.footer-download-btn:hover .download-btn-arrow {
    color: #3498db;
    transform: translateX(3px);
}

/* =========================================
   🆕 BADGE GPLv3+ CON SVG INLINE
   ========================================= */

.tech-badge-gpl {
    background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.12), 
        rgba(127, 140, 141, 0.08)) !important;
    border-color: rgba(149, 165, 166, 0.3) !important;
    color: var(--footer-text) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}

.tech-badge-gpl:hover {
    background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.22), 
        rgba(127, 140, 141, 0.15)) !important;
    border-color: rgba(149, 165, 166, 0.5) !important;
    color: var(--footer-text) !important;
}

.gpl-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: currentColor;
}

/* =========================================
   🎨 VARIABLES DE TEMA PARA DESCARGA
   ========================================= */

:root {
    --footer-download-bg-1: rgba(52, 152, 219, 0.1);
    --footer-download-bg-2: rgba(41, 128, 185, 0.05);
    --footer-download-bg-1-hover: rgba(52, 152, 219, 0.18);
    --footer-download-bg-2-hover: rgba(41, 128, 185, 0.1);
    --footer-download-border: rgba(52, 152, 219, 0.25);
    --footer-download-border-hover: rgba(52, 152, 219, 0.5);
}

[data-theme="dark"] {
    --footer-download-bg-1: rgba(93, 173, 226, 0.12);
    --footer-download-bg-2: rgba(93, 173, 226, 0.06);
    --footer-download-bg-1-hover: rgba(93, 173, 226, 0.22);
    --footer-download-bg-2-hover: rgba(93, 173, 226, 0.12);
    --footer-download-border: rgba(93, 173, 226, 0.3);
    --footer-download-border-hover: rgba(93, 173, 226, 0.6);
}

/* =========================================
   📱 RESPONSIVE
   ========================================= */

@media (max-width: 767px) {
    .footer-download-btn {
        padding: 12px 16px;
        gap: 12px;
    }
    
    .download-btn-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }
    
    .download-btn-label {
        font-size: 0.88rem;
    }
    
    .download-btn-version {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .download-btn-icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    
    .gpl-icon {
        width: 11px;
        height: 11px;
    }
}
.footer-version i {
    font-size: 0.82rem;
    transition: transform 0.3s ease;
}

.footer-version:hover {
    background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.25), 
        rgba(41, 128, 185, 0.15));
    border-color: rgba(52, 152, 219, 0.5);
    color: #2980b9;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.15);
}

[data-theme="dark"] .footer-version:hover {
    background: linear-gradient(135deg, 
        rgba(93, 173, 226, 0.3), 
        rgba(93, 173, 226, 0.15));
    border-color: rgba(93, 173, 226, 0.6);
    color: #aed6f1;
    box-shadow: 0 4px 10px rgba(93, 173, 226, 0.2);
}

.footer-version:hover i {
    transform: translateY(-2px) scale(1.1);
}

/* =========================================
   ⬆️ BOTÓN SCROLL TO TOP
   ========================================= */

.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--scroll-top-border, rgba(0, 0, 0, 0.08));
    background: var(--scroll-top-bg, linear-gradient(135deg, #3498db, #2980b9));
    color: var(--scroll-top-text, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--scroll-top-shadow, 0 6px 20px rgba(52, 152, 219, 0.35));
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.85);
    transition: 
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s,
        box-shadow 0.25s ease,
        background 0.25s ease;
    outline: none;
    padding: 0;
    overflow: visible;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: var(--scroll-top-shadow-hover, 0 10px 28px rgba(52, 152, 219, 0.5));
    background: var(--scroll-top-bg-hover, linear-gradient(135deg, #2980b9, #1f6391));
}

.scroll-top-btn:active {
    transform: translateY(-1px) scale(1);
    transition-duration: 0.1s;
}

.scroll-top-btn:focus-visible {
    outline: 3px solid var(--scroll-top-focus, rgba(52, 152, 219, 0.5));
    outline-offset: 3px;
}

/* Icono interior */
.scroll-top-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.scroll-top-btn:hover .scroll-top-icon-wrapper {
    transform: translateY(-2px);
    animation: scrollBounce 0.8s ease infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(-6px); }
}

/* Tooltip lateral */
.scroll-top-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: var(--scroll-top-tooltip-bg, #2c3e50);
    color: var(--scroll-top-tooltip-text, #ffffff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scroll-top-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--scroll-top-tooltip-bg, #2c3e50);
}

.scroll-top-btn:hover .scroll-top-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* =========================================
   🌙 VARIABLES POR TEMA
   ========================================= */
:root {
    --scroll-top-bg: linear-gradient(135deg, #3498db, #2980b9);
    --scroll-top-bg-hover: linear-gradient(135deg, #2980b9, #1f6391);
    --scroll-top-text: #ffffff;
    --scroll-top-border: rgba(0, 0, 0, 0.08);
    --scroll-top-shadow: 0 6px 20px rgba(52, 152, 219, 0.35);
    --scroll-top-shadow-hover: 0 10px 28px rgba(52, 152, 219, 0.5);
    --scroll-top-focus: rgba(52, 152, 219, 0.5);
    --scroll-top-tooltip-bg: #2c3e50;
    --scroll-top-tooltip-text: #ffffff;
}

[data-theme="dark"] {
    --scroll-top-bg: linear-gradient(135deg, #5dade2, #3498db);
    --scroll-top-bg-hover: linear-gradient(135deg, #85c1e9, #5dade2);
    --scroll-top-text: #ffffff;
    --scroll-top-border: rgba(255, 255, 255, 0.1);
    --scroll-top-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    --scroll-top-shadow-hover: 0 10px 28px rgba(93, 173, 226, 0.45);
    --scroll-top-focus: rgba(93, 173, 226, 0.5);
    --scroll-top-tooltip-bg: #ecf0f1;
    --scroll-top-tooltip-text: #2c3e50;
}

/* =========================================
   📱 RESPONSIVE
   ========================================= */
@media (max-width: 767px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
    
    .scroll-top-tooltip {
        display: none; /* Ocultar tooltip en móvil para no tapar */
    }
}

@media (max-width: 480px) {
    .scroll-top-btn {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* Evitar solapamiento con banner de cookies */
.cookie-banner.cookie-visible ~ .scroll-top-btn,
.cookie-banner:not(.cookie-closing) ~ .scroll-top-btn {
    bottom: calc(28px + var(--cookie-banner-height, 280px));
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.35s ease, 
                transform 0.35s ease, 
                visibility 0.35s, 
                box-shadow 0.25s ease, 
                background 0.25s ease;
}

@media (max-width: 767px) {
    .cookie-banner.cookie-visible ~ .scroll-top-btn,
    .cookie-banner:not(.cookie-closing) ~ .scroll-top-btn {
        bottom: calc(20px + var(--cookie-banner-height, 400px));
    }
}
/* ✅ Modal adaptado al tema claro/oscuro */
.theme-aware-modal {
    background-color: var(--bg-card, #ffffff);
    color: var(--text-main, #2c3e50);
    border: 1px solid var(--border-color, #dee2e6);
}

[data-theme="dark"] .theme-aware-modal {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border-color: #3a3a3a;
}

[data-theme="dark"] .theme-aware-modal .modal-header,
[data-theme="dark"] .theme-aware-modal .modal-footer {
    border-color: #3a3a3a;
}

[data-theme="dark"] .theme-aware-modal .close {
    color: #f0f0f0;
    text-shadow: none;
}

[data-theme="dark"] .theme-aware-modal .close:hover {
    color: #ffffff;
}