/* Paleta validada del proyecto: azul #2a78d6, naranja #eb6834, aqua #1baf7a */
:root {
  --azul: #2a78d6; --naranja: #eb6834; --aqua: #1baf7a;
  --fondo: #f6f7f9; --panel: #ffffff; --texto: #1d2330; --tenue: #667085; --borde: #e3e6eb;
  --alerta-fondo: #fdecea; --aviso-fondo: #fff4e5;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12151b; --panel: #1b2029; --texto: #e7eaf0; --tenue: #98a2b3; --borde: #2c3340;
    --alerta-fondo: #3b1f1c; --aviso-fondo: #3a2a14;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--fondo); color: var(--texto); padding-bottom: 64px; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { line-height: 1.2; }
h2 { margin: 8px 0 6px; font-size: 1.3rem; }
h3 { font-size: 1rem; margin: 18px 0 8px; }
section { margin-bottom: 28px; }
.tenue { color: var(--tenue); font-size: .9em; }

.barra { display: flex; align-items: center; gap: 20px; padding: 10px 16px; background: var(--panel);
         border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; }
.marca { font-weight: 700; color: var(--azul); }
.nav-superior { display: flex; gap: 16px; flex: 1; }
.nav-superior a, .nav-inferior a { color: var(--tenue); }
.nav-superior a.activo, .nav-inferior a.activo { color: var(--azul); font-weight: 600; }
.salir { margin: 0; }
.nav-inferior { display: none; }
@media (max-width: 700px) {
  .nav-superior { display: none; }
  .barra { justify-content: space-between; }
  .nav-inferior { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel);
                  border-top: 1px solid var(--borde); justify-content: space-around; padding: 12px 0; z-index: 2; }
}

.boton, .boton-sec, .boton-mini, .boton-texto { font: inherit; cursor: pointer; border-radius: 8px; }
.boton { background: var(--azul); color: #fff; border: 0; padding: 9px 18px; font-weight: 600; }
.boton-sec { background: transparent; color: var(--azul); border: 1px solid var(--azul); padding: 6px 12px; }
.boton-mini { background: transparent; color: var(--aqua); border: 1px solid var(--borde); padding: 2px 8px; }
.boton-texto { background: none; border: 0; color: var(--tenue); padding: 4px; }
input, select { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--borde);
                border-radius: 8px; padding: 6px 8px; }

.login { max-width: 340px; margin: 12vh auto 0; background: var(--panel); padding: 28px;
         border: 1px solid var(--borde); border-radius: 12px; }
.login h1 { color: var(--azul); margin-top: 0; }
.login label { display: block; margin-bottom: 14px; }
.login input { display: block; width: 100%; margin-top: 4px; }
.alerta { background: var(--alerta-fondo); padding: 8px 12px; border-radius: 8px; }
.aviso { background: var(--aviso-fondo); padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--naranja); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.tarjeta h3 { margin: 0 0 4px; }
.grande { font-size: 1.6rem; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.tarjeta dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: .9em; }
.tarjeta dt { color: var(--tenue); }
.tarjeta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-block; font-size: .72rem; padding: 1px 6px; border-radius: 6px;
            background: var(--fondo); border: 1px solid var(--borde); color: var(--tenue); vertical-align: middle; }
.etiqueta.manual { color: var(--naranja); border-color: var(--naranja); }

.titulo-con-filtro { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.titulo-con-filtro form { display: flex; gap: 6px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.cifra { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; }
.cifra span { display: block; color: var(--tenue); font-size: .85em; }
.cifra strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cifra.ahorro strong { color: var(--aqua); }

.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .columnas { grid-template-columns: 1fr; } }
.tabla-cat { width: 100%; border-collapse: collapse; }
.tabla-cat td { padding: 6px 4px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-cat .cat a { color: inherit; }
.tabla-cat meter { display: block; width: 100%; height: 6px; margin-top: 4px; }
meter::-webkit-meter-optimum-value { background: var(--azul); }
meter::-webkit-meter-bar { background: var(--borde); border: 0; border-radius: 3px; }
meter::-moz-meter-bar { background: var(--azul); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.check { color: var(--tenue); font-size: .9em; }
.tabla-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; }
.tabla-mov { width: 100%; border-collapse: collapse; font-size: .92em; }
.tabla-mov th { text-align: left; color: var(--tenue); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--borde); }
.tabla-mov td { padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-mov tr.guardado td { background: color-mix(in srgb, var(--aqua) 14%, transparent); }
.fecha { white-space: nowrap; }
.editar { display: flex; gap: 4px; align-items: center; margin: 0; }
.editar select { max-width: 210px; padding: 3px 6px; }

.subir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--panel);
         padding: 14px; border: 1px dashed var(--borde); border-radius: 12px; }
.reportes { list-style: none; padding: 0; }
.reportes li { padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; background: var(--panel);
               border-left: 3px solid var(--aqua); }
.reportes li.error { border-left-color: var(--naranja); }
.detalle { font-size: .88em; margin-top: 2px; }

/* ---------- Evolución: serie categórica (orden fijo) y escala secuencial azul ---------- */
.s1 { fill: #2a78d6; background: #2a78d6; }
.s2 { fill: #eb6834; background: #eb6834; }
.s3 { fill: #1baf7a; background: #1baf7a; }
.n0 { background: #cde2fb; } .n1 { background: #9ec5f4; } .n2 { background: #5598e7; }
.n3 { background: #2a78d6; } .n4 { background: #104281; }
.n0 a, .n1 a { color: #0b0b0b; } .n2 a, .n3 a, .n4 a { color: #ffffff; }
.grilla { stroke: #e1e0d9; stroke-width: 1; } .eje { stroke: #c3c2b7; stroke-width: 1; }
.eje-txt { fill: #898781; font-size: 12px; } .valor-txt { fill: var(--texto); font-size: 12px; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .s1 { fill: #3987e5; background: #3987e5; } .s2 { fill: #d95926; background: #d95926; }
  .s3 { fill: #199e70; background: #199e70; }
  .n0 { background: #104281; } .n1 { background: #1c5cab; } .n2 { background: #2a78d6; }
  .n3 { background: #5598e7; } .n4 { background: #9ec5f4; }
  .n0 a, .n1 a, .n2 a { color: #f0efec; } .n3 a, .n4 a { color: #0b0b0b; }
  .grilla { stroke: #2c2c2a; } .eje { stroke: #383835; }
}
.grafico { margin: 6px 0 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 8px 4px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .hit { fill: transparent; }
.grafico .col:hover .hit { fill: var(--borde); opacity: .5; }
.leyenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: .88em; color: var(--tenue); margin-bottom: 4px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cuadro { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.tabla-datos { margin: 4px 0 18px; font-size: .9em; } .tabla-datos summary { cursor: pointer; color: var(--azul); }
.calor-wrap { padding: 6px; }
.calor { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: .85em; font-variant-numeric: tabular-nums; }
.calor th { color: var(--tenue); font-weight: 500; padding: 2px 4px; text-align: center; }
.calor th.cat, .calor td.cat { text-align: left; white-space: nowrap; padding-right: 10px; }
.calor td.cat a { color: var(--texto); }
.calor td { text-align: center; border-radius: 4px; min-width: 44px; }
.calor td a { display: block; padding: 5px 2px; text-decoration: none; }
.calor td a:hover { outline: 2px solid var(--texto); outline-offset: -2px; border-radius: 4px; }
.calor td.vacio { background: transparent; }
.calor td.total { padding-left: 8px; color: var(--texto); }
.leyenda-calor .cuadro { margin: 0 1px; }
@media (max-width: 700px) {
  .eje-txt, .valor-txt { font-size: 24px; }
  .calor th.cat, .calor td.cat { position: sticky; left: 0; background: var(--panel); z-index: 1; }
  .calor td.cat { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
}