/* ═══════════════════════════════════════════════════════════════
   Variables
═══════════════════════════════════════════════════════════════ */
:root {
    --brand-primary: #2563EB;
    --brand-dark:    #1D4ED8;
    --brand-light:   #EFF6FF;
    --success:       #059669;
    --surface:       #FFFFFF;
    --surface-2:     #F8FAFC;
    --border:        #E2E8F0;
    --text-primary:  #0F172A;
    --text-muted:    #64748B;
    --radius:        12px;
    --radius-sm:     8px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:     0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
    --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
}

/* ═══════════════════════════════════════════════════════════════
   Reset & Base
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    background: var(--surface-2);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   Header
═══════════════════════════════════════════════════════════════ */
.app-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #1E40AF 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

.app-logo {
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.app-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.app-subtitle {
    font-size: .8rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   Cards
═══════════════════════════════════════════════════════════════ */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    overflow: hidden;
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.25rem;
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-primary);
}

.card-header-icon {
    background: var(--brand-light);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-body { padding: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════
   Formulario
═══════════════════════════════════════════════════════════════ */
.form-label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: .9rem;
    margin-bottom: .375rem;
}

.form-control {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    outline: none;
}

.form-range { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   Botón Generar
═══════════════════════════════════════════════════════════════ */
.btn-generar {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
    border: none;
    border-radius: var(--radius-sm);
    padding: .625rem 1.25rem;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .01em;
    transition: transform .12s, box-shadow .12s, opacity .12s;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

.btn-generar:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,.45);
}

.btn-generar:active:not(:disabled) {
    transform: translateY(0);
}

.btn-generar:disabled {
    opacity: .7;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   Barra de progreso
═══════════════════════════════════════════════════════════════ */
.progress-lg {
    height: 12px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.progress-lg .progress-bar {
    background: linear-gradient(90deg, var(--brand-primary), #60A5FA);
    border-radius: 999px;
    transition: width .4s ease;
}

/* Pasos del proceso */
.pasos-lista {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    max-height: 160px;
    overflow-y: auto;
}

.paso-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--text-muted);
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    animation: fadeSlideIn .25s ease;
}

.paso-item.paso-activo {
    background: var(--brand-light);
    color: var(--brand-primary);
    font-weight: 500;
}

.paso-item.paso-listo {
    color: var(--success);
}

.paso-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   Panel resultado
═══════════════════════════════════════════════════════════════ */
.resultado-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(5,150,105,.2);
}

.btn-descarga {
    background: linear-gradient(135deg, var(--success), #047857);
    border: none;
    border-radius: var(--radius-sm);
    padding: .625rem 1.5rem;
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    color: #fff;
    transition: transform .12s, box-shadow .12s;
    box-shadow: 0 4px 12px rgba(5,150,105,.3);
}

.btn-descarga:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5,150,105,.4);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Historial tabla
═══════════════════════════════════════════════════════════════ */
.card-historial .table thead th {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .625rem 1rem;
}

.card-historial .table tbody td {
    padding: .625rem 1rem;
    font-size: .9rem;
    vertical-align: middle;
    border-color: var(--border);
}

.card-historial .table tbody tr:hover td {
    background: var(--brand-light);
}

/* ═══════════════════════════════════════════════════════════════
   Tabla de cobertura de datos (Estado Ingesta)
═══════════════════════════════════════════════════════════════ */
.table-ingesta thead th {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem 1rem;
}

.table-ingesta tbody td {
    padding: .4rem 1rem;
    font-size: .9rem;
    vertical-align: middle;
    border-color: var(--border);
}

.divisa-chip {
    background: var(--brand-light);
    color: var(--brand-primary);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: .04em;
}

/* Badges de fecha con semáforo */
.badge-fecha {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 1rem;
    font-weight: 600;
}

.badge-fecha-ok   { background: #D1FAE5; color: #065F46; }
.badge-fecha-warn { background: #FEF3C7; color: #92400E; }
.badge-fecha-old  { background: #FEE2E2; color: #991B1B; }

/* Alerta de cobertura bajo el campo FechaFin */
.alerta-cobertura {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    border-radius: var(--radius-sm);
    padding: .4rem .625rem;
    font-size: .8rem;
    line-height: 1.4;
}

.alerta-cobertura svg { margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   Footer
═══════════════════════════════════════════════════════════════ */
.app-footer {
    border-top: 1px solid var(--border);
    padding: .75rem 0;
    margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Panel de Backtesting
═══════════════════════════════════════════════════════════════ */
.btn-backtest {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    border: none;
    border-radius: var(--radius-sm);
    padding: .5rem 1.25rem;
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    color: #fff;
    transition: transform .12s, box-shadow .12s;
    box-shadow: 0 4px 12px rgba(124,58,237,.3);
}

.btn-backtest:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124,58,237,.4);
    color: #fff;
}

.btn-backtest:disabled { opacity: .65; cursor: not-allowed; }

.btn-detalle {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    border: none;
    border-radius: var(--radius-sm);
    padding: .45rem 1.1rem;
    font-weight: 600;
    font-size: .8125rem;
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: transform .12s, box-shadow .12s;
    box-shadow: 0 3px 8px rgba(15,23,42,.25);
}
.btn-detalle:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(15,23,42,.35); color: #fff; }

/* Card resultado backtest */
#panelBacktest .card-header .card-header-icon {
    background: #EDE9FE;
    color: #7C3AED;
}

.backtest-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.backtest-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    text-align: center;
}

.backtest-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.backtest-stat-value.win  { color: #059669; }
.backtest-stat-value.loss { color: #DC2626; }
.backtest-stat-value.rate { color: #7C3AED; }

.backtest-stat-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .25rem;
}

/* Distribución por nivel de gale */
.gale-dist { display: flex; gap: .375rem; flex-wrap: wrap; }

.gale-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: 600;
    background: #EDE9FE;
    color: #5B21B6;
}

/* ═══════════════════════════════════════════════════════════════
   Utilitarios
═══════════════════════════════════════════════════════════════ */
.text-sm { font-size: .9rem; }

.card-historial .table tbody td .badge {
    font-size: 1rem;
    padding: .35em .65em;
}

/* ═══════════════════════════════════════════════════════════════
   Página Detalle Backtesting
═══════════════════════════════════════════════════════════════ */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: .3rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: background .12s, color .12s;
}
.btn-volver:hover { background: var(--brand-light); color: var(--brand-primary); }

/* Header resumen */
.detalle-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detalle-win-rate {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    min-width: 90px;
}
.detalle-win-rate .wr-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
    margin-top: .15rem;
}
.wr-ok   { color: #059669; }
.wr-warn { color: #7C3AED; }
.wr-bad  { color: #DC2626; }

.detalle-stats-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.detalle-stat { text-align: center; min-width: 60px; }
.detalle-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.detalle-stat-value.win   { color: #059669; }
.detalle-stat-value.loss  { color: #DC2626; }
.detalle-stat-value.muted { color: var(--text-muted); }
.detalle-stat-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-top: .2rem;
}

/* Chart containers */
.chart-container { position: relative; min-height: 220px; }

/* Filtros */
.detalle-filtros {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Tabla de secuencias */
.table-secuencias thead th {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem 1rem;
}
.table-secuencias tbody td {
    padding: .4rem 1rem;
    font-size: 1.2rem;
    vertical-align: middle;
    border-color: var(--border);
}

/* Badges resultado */
.hora-inicio {
    display: inline-block;
    margin-left: .4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--brand-light);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: monospace;
}

.res-badge {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.res-win  { background: #D1FAE5; color: #065F46; }
.res-loss { background: #FEE2E2; color: #991B1B; }
.res-inc  { background: #FEF3C7; color: #92400E; }

.btn-outline-purple {
    color: #7C3AED;
    border-color: #7C3AED;
    background: transparent;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.btn-outline-purple:hover:not(:disabled) {
    background: #EDE9FE;
    color: #6D28D9;
    border-color: #6D28D9;
}

.btn-outline-purple:disabled { opacity: .6; cursor: not-allowed; }


code {
    font-size: 1.5rem !important
}

/* ═══════════════════════════════════════════════════════════════
   Nav menu
═══════════════════════════════════════════════════════════════ */
.app-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.app-nav-list {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.app-nav-link:hover {
    color: var(--brand-primary);
    background: var(--brand-light);
}

.app-nav-link.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Estadísticas — layout
═══════════════════════════════════════════════════════════════ */
.est-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.est-header-left { flex: 1 1 auto; }

.est-filtro {
    flex: 0 0 260px;
}

.est-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.est-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem;
    text-align: center;
    min-width: 90px;
    flex: 1 1 auto;
}

.est-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.est-stat-value.win  { color: #059669; }
.est-stat-value.loss { color: #DC2626; }
.est-stat-value.wr-ok   { color: #059669; }
.est-stat-value.wr-warn { color: #D97706; }
.est-stat-value.wr-bad  { color: #DC2626; }

.est-stat-label {
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Estadísticas — Heatmap table
═══════════════════════════════════════════════════════════════ */
.heatmap-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.heatmap-table {
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
}

.heatmap-th-divisa {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem .75rem;
    border-bottom: 2px solid var(--border);
    min-width: 80px;
}

.heatmap-th-hora {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: .4rem .35rem;
    border-bottom: 2px solid var(--border);
    min-width: 42px;
}

.heatmap-td-divisa {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
    padding: .35rem .6rem;
    border-bottom: 1px solid var(--border);
}

.divisa-chip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--brand-light);
    color: var(--brand-primary);
    border-radius: 4px;
    padding: .15rem .45rem;
    white-space: nowrap;
}

.heatmap-td {
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .25rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
    cursor: default;
    transition: opacity .15s;
}

.heatmap-td:hover { opacity: .82; }

.heatmap-td-vacio {
    background: #F1F5F9;
    color: #94A3B8;
}

/* Leyenda */
.heatmap-leyenda {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.leyenda-chip {
    font-size: .68rem;
    font-weight: 600;
    border-radius: 4px;
    padding: .15rem .5rem;
}

/* Chart container */
.chart-container {
    position: relative;
    height: 380px;
}

/* ═══════════════════════════════════════════════════════════════
   Evolución de la Estrategia
═══════════════════════════════════════════════════════════════ */
.evol-chart-container {
    position: relative;
    height: 320px;
}

.evol-tabla-scroll {
    overflow-y: auto;
    max-height: 320px;
}

.evol-tabla thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .45rem .75rem;
    border-bottom: 2px solid var(--border);
}

.evol-tabla tbody td {
    font-size: .8rem;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   Optimizador de Hora de Inicio
═══════════════════════════════════════════════════════════════ */
.opt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.opt-header-left { flex: 1 1 auto; }

.opt-controles {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.opt-control-group {
    display: flex;
    flex-direction: column;
}

/* Tarjeta "mejor hora" */
.opt-mejor-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.opt-mejor-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.opt-mejor-titulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.opt-mejor-valor {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.opt-mejor-wr {
    font-size: 1.1rem;
    font-weight: 700;
}

.opt-mejor-detalle {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

/* Tabla */
.opt-tabla-scroll {
    overflow-y: auto;
    max-height: 360px;
}

.opt-tabla thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .5rem .75rem;
}

.opt-tabla tbody td {
    font-size: .82rem;
    padding: .4rem .75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.opt-fila-mejor td { background: #EFF6FF; }
.opt-fila-sin-datos { opacity: .45; }

.opt-estrella {
    color: #F59E0B;
    font-size: .75rem;
}

.opt-wr-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 4px;
    padding: .15rem .5rem;
}

.opt-wr-badge.wr-ok   { background: #D1FAE5; color: #065F46; }
.opt-wr-badge.wr-warn { background: #FEF3C7; color: #92400E; }
.opt-wr-badge.wr-bad  { background: #FEE2E2; color: #991B1B; }

/* ═══════════════════════════════════════════════════════════════
   Gestión de Capital
═══════════════════════════════════════════════════════════════ */
.gc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.gc-filtro { flex: 0 0 280px; }

/* Stats row */
.gc-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.gc-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem;
    text-align: center;
    flex: 1 1 auto;
    min-width: 100px;
    box-shadow: var(--shadow-sm);
}
.gc-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.gc-stat-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
}

/* Calculadora */
.gc-calc-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.gc-input-group { display: flex; flex-direction: column; gap: .3rem; }
.gc-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
}
.gc-label-val {
    font-size: .9rem;
    font-weight: 700;
    color: var(--brand-primary);
}
.gc-range-bounds {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--text-muted);
}

/* Fila de parámetros base */
.gc-params-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.gc-param-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 130px;
}
.gc-param-item .form-control { max-width: 110px; }

/* Progresión de gales */
.gc-gales-header {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
}
.gc-gales-auto-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.gc-gale-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .3rem .55rem;
    min-width: 52px;
}
.gc-gale-chip-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.gc-gale-chip-val {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Grid de gales manuales */
.gc-gales-manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .6rem;
}
.gc-gale-manual-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.gc-gale-manual-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.gc-resultado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.gc-resultado {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    text-align: center;
}
.gc-resultado-valor {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.gc-resultado-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-top: .25rem;
}
.gc-resultado-sub {
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: .2rem;
}

/* Alertas */
.gc-alerta {
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .82rem;
    font-weight: 500;
}
.gc-alerta-danger { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.gc-alerta-warn   { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.gc-alerta-ok     { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }

/* Distribución de gale */
.gc-gale-lista { display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0; }
.gc-gale-fila  {
    display: grid;
    grid-template-columns: 52px 1fr 44px 40px;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
}
.gc-gale-label { font-weight: 600; }
.gc-gale-barra-wrap {
    background: #F1F5F9;
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
}
.gc-gale-barra {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
    min-width: 2px;
}
.gc-gale-pct { font-weight: 700; text-align: right; }
.gc-gale-cnt { font-size: .72rem; }

/* ═══════════════════════════════════════════════════════════════
   Análisis Semanal Histórico
═══════════════════════════════════════════════════════════════ */
.sem-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.sem-header-left { flex: 1 1 auto; }

.sem-controles {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}
.sem-control-group {
    display: flex;
    flex-direction: column;
}

/* Resumen */
.sem-resumen {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.sem-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1.25rem;
    text-align: center;
    min-width: 100px;
    flex: 1 1 auto;
    box-shadow: var(--shadow-sm);
}
.sem-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.sem-stat-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
}

/* Gráfico */
.sem-chart-container {
    position: relative;
    height: 360px;
}

/* Tabla */
.sem-tabla-scroll {
    overflow-y: auto;
    max-height: 360px;
}
.sem-tabla thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .45rem .75rem;
    border-bottom: 2px solid var(--border);
}
.sem-tabla tbody td {
    font-size: .8rem;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.sem-fila-sin-datos { opacity: .4; }

.sem-wr-badge {
    display: inline-block;
    font-size: .73rem;
    font-weight: 700;
    border-radius: 4px;
    padding: .15rem .45rem;
}
.sem-wr-badge.wr-ok   { background: #D1FAE5; color: #065F46; }
.sem-wr-badge.wr-warn { background: #FEF3C7; color: #92400E; }
.sem-wr-badge.wr-bad  { background: #FEE2E2; color: #991B1B; }
/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
}
.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
}
.login-card {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: .75rem;
    color: var(--primary);
}
.login-title {
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .25rem;
}
.login-subtitle {
    text-align: center;
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    display: block;
}