/* Lenguaje visual de SolaFlux (Ron Design Lab, pedido 2026-10-09): base
   monocromática -- negro casi puro y grises cálidos --, un único acento
   naranja para lo importante, tipografía geométrica liviana con números
   grandes, tarjetas claras y oscuras alternadas, medidores semicirculares.
   Series con ROL: solar = naranja, red (distribuidora) = gris oscuro,
   previo (período anterior) = gris claro. Validado con dataviz: ΔE ≥ 18. */
:root {
  --bg: #ebeae6;
  --surface: #f6f5f2;
  --surface-2: #e2e1dc;
  --ink: #1d1d1b;
  --ink-2: #4a4a46;
  --muted: #8a8882;
  --line: #d8d6d0;
  --primary: #1d1d1b;
  --primary-ink: #f6f5f2;
  --accent: #e8590c;
  --accent-ink: #ffffff;
  --sidebar: #0b0b0b;
  --sidebar-2: #141414;
  --sidebar-ink: #a3a19b;
  --dark-card: #232322;
  --dark-card-ink: #ecebe7;
  --soft-green: #dfe9df;
  --soft-sun: #f7dccb;
  --sun: #e8590c;
  --good: #2f7d4f;
  --bad: #c2410c;
  --serie-solar: #e8590c;
  --serie-red: #3a3a38;
  --serie-previo: #b5b2aa;
  --grid: #dddbd5;
  --radius: 18px;
  --shadow: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b; --surface: #1c1c1b; --surface-2: #252524; --ink: #ecebe7; --ink-2: #c4c2bc;
    --muted: #8a8882; --line: #2e2e2c; --primary: #ecebe7; --primary-ink: #0b0b0b;
    --sidebar: #000000; --sidebar-2: #0b0b0b; --dark-card: #2a2a28; --soft-green: #1d2b22; --soft-sun: #3a2112;
    --sun: #f26a1b; --accent: #f26a1b; --good: #5fbf88; --bad: #f2895a;
    --serie-solar: #f26a1b; --serie-red: #b3afa6; --serie-previo: #5e5c57; --grid: #2a2a28; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0b; --surface: #1c1c1b; --surface-2: #252524; --ink: #ecebe7; --ink-2: #c4c2bc;
  --muted: #8a8882; --line: #2e2e2c; --primary: #ecebe7; --primary-ink: #0b0b0b;
  --sidebar: #000000; --sidebar-2: #0b0b0b; --dark-card: #2a2a28; --soft-green: #1d2b22; --soft-sun: #3a2112;
  --sun: #f26a1b; --accent: #f26a1b; --good: #5fbf88; --bad: #f2895a;
  --serie-solar: #f26a1b; --serie-red: #b3afa6; --serie-previo: #5e5c57; --grid: #2a2a28; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
.text-muted, .muted { color: var(--muted) !important; }
.num { font-variant-numeric: tabular-nums; }

/* ── estructura ─────────────────────────────────────────────────────────── */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 1030;
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: var(--sidebar-ink); display: none; flex-direction: column; padding: 22px 14px;
}
.lateral .marca { padding: 0 10px 26px; }
.lateral nav a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 4px;
  color: var(--sidebar-ink); text-decoration: none; border-radius: 10px; font-size: .98rem;
}
.lateral nav a i { font-size: 1.2rem; opacity: .9; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral nav a.activa { background: #1f1f1e; color: #fff; }
.lateral nav a.activa i { color: var(--accent); }
.lateral .pie { margin-top: auto; background: #1a1a19; border-radius: 14px;
  padding: 16px; font-size: .82rem; color: var(--sidebar-ink); }

.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca .nombre { font-size: 1.5rem; font-weight: 400; letter-spacing: .01em; line-height: 1; color: #fff; }
.marca .sub { font-size: .72rem; color: var(--sidebar-ink); }

.principal { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 76px; }
.barra-sup {
  position: sticky; top: 0; z-index: 1020; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
}
.barra-sup .marca .nombre { color: var(--ink); font-size: 1.25rem; }
.barra-sup .marca .sub { display: none; }
.contenido { padding: 16px; flex: 1; width: 100%; max-width: 1400px; }

.avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }
.boton-icono { position: relative; background: none; border: 0; color: var(--ink-2); font-size: 1.25rem;
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.boton-icono:hover { background: var(--surface-2); }

/* barra inferior (celular) */
.barra-inf {
  position: fixed; inset: auto 0 0 0; z-index: 1030; background: var(--sidebar);
  border-top: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.barra-inf a, .barra-inf button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; min-height: 52px;
  color: var(--sidebar-ink); text-decoration: none; font-size: .7rem; background: none; border: 0;
}
.barra-inf .activa { color: #fff; }
.barra-inf i { font-size: 1.3rem; }
.barra-inf .activa { color: var(--ink); }
.barra-inf .activa i { color: var(--accent); }

@media (min-width: 992px) {
  .lateral { display: flex; }
  .principal { margin-left: 248px; padding-bottom: 0; }
  .barra-inf, .barra-sup .marca { display: none; }
  .barra-sup { padding: 12px 32px; }
  .contenido { padding: 28px 32px; }
}

/* ── tipografía de página ───────────────────────────────────────────────── */
.titular { font-size: clamp(1.7rem, 5vw, 3rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.08;
  margin: 4px 0 8px; }
.titular .tenue, .tenue-sub { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .12em; }
.ceja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.ceja .act { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.ceja .act::before { content: "//"; color: var(--muted); }
.ceja .act i.punto-a { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.ceja .otro::before { content: "// "; }
.bajada { color: var(--ink-2); font-size: 1.02rem; margin-bottom: 20px; }
h2.seccion { font-size: 1.05rem; font-weight: 500; margin: 0 0 2px; letter-spacing: -.01em; }
.seccion-sub { color: var(--muted); font-size: .86rem; margin-bottom: 12px; }

/* ── tarjetas ───────────────────────────────────────────────────────────── */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; }
/* estirar solo la tarjeta única de una columna (las apiladas, a su alto natural) */
.row > [class*="col"] > .tarjeta:only-child { height: 100%; }
.tarjeta.suave { background: var(--surface-2); box-shadow: none; }
.tarjeta { position: relative; }
.tarjeta.oscura { background: var(--dark-card); color: var(--dark-card-ink); border: 0; }
.tarjeta.oscura .muted, .tarjeta.oscura .seccion-sub { color: #9a9892 !important; }
.tarjeta.negra { background: var(--sidebar); color: var(--dark-card-ink); border: 0; }
.tarjeta.negra .muted { color: #8a8882 !important; }
.flecha { position: absolute; top: 16px; right: 16px; color: var(--muted); font-size: .95rem; text-decoration: none; }
.flecha:hover { color: var(--accent); }
.kpi .cab { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.kpi .cab i { color: var(--muted); font-size: 1rem; }
.kpi .valor { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 300; letter-spacing: -.04em; margin: 14px 0 2px;
  font-variant-numeric: tabular-nums; line-height: 1; }
.kpi .valor small { font-size: .9rem; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.kpi .sub { color: var(--muted); font-size: .88rem; }
.kpi .var { font-size: .82rem; margin-top: 10px; color: var(--muted); }
.var .bien { color: var(--good); font-weight: 600; }
.var .mal { color: var(--bad); font-weight: 600; }

.mini { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.mini .et { font-size: .82rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.mini .v { font-size: 1.45rem; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini.ahorro { background: var(--dark-card); color: var(--dark-card-ink); border-color: transparent; }
.mini.ahorro .et, .mini.ahorro .muted { color: #9a9892 !important; }
.mini.ahorro .v { color: #fff; }
.marca-serie { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.marca-serie.solar { background: var(--serie-solar); }
.marca-serie.red { background: var(--serie-red); }
.marca-serie.previo { background: var(--serie-previo); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font-size: .82rem; }
.chip.verde { background: var(--soft-green); }
.chip.naranja { background: var(--accent); color: var(--accent-ink); }


.btn-e { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 18px; font-weight: 500;
  background: var(--accent); color: var(--accent-ink); border: 0; text-decoration: none; min-height: 44px; }
.btn-e:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn-e.claro { background: var(--surface-2); color: var(--ink); }
.btn-e.oscuro { background: var(--primary); color: var(--primary-ink); }
.tarjeta.oscura .btn-e.claro, .tarjeta.negra .btn-e.claro { background: #333331; color: #fff; }

.segmentado { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.segmentado button { border: 0; background: none; border-radius: 8px; padding: 5px 12px; font-size: .8rem; color: var(--ink-2); min-height: 32px; }
.segmentado button.activo { background: var(--accent); color: var(--accent-ink); }

/* ── gráficos ───────────────────────────────────────────────────────────── */
.grafico { width: 100%; height: 260px; }
@media (min-width: 768px) { .grafico { height: 300px; } }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-2); margin: 6px 0; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
details.tabla-datos summary { font-size: .8rem; color: var(--muted); cursor: pointer; margin-top: 6px; }
details.tabla-datos table { font-size: .8rem; }

/* ── tablas → tarjetas en el celular ────────────────────────────────────── */
.lista { width: 100%; border-collapse: collapse; }
.lista th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lista td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lista tr.clic { cursor: pointer; }
.lista tr.clic:hover td { background: var(--surface-2); }
.lista .der { text-align: right; }
@media (max-width: 767.98px) {
  .lista thead { display: none; }
  .lista, .lista tbody, .lista tr, .lista td { display: block; width: 100%; }
  .lista tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); }
  .lista td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .lista td::before { content: attr(data-et); color: var(--muted); font-size: .82rem; text-align: left; }
  .lista td.cab-movil { font-weight: 600; font-size: 1rem; }
  .lista td.cab-movil::before { content: none; }
  .lista .der { text-align: right; }
}

/* factura comparativa */
.factura-comp .fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.factura-comp .fila > :not(:first-child) { text-align: right; min-width: 92px; }
.factura-comp .fila.total { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.05rem; }
.factura-comp .fila.cab { font-size: .76rem; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.factura-comp .menos { color: var(--good); }
.factura-comp .mas { color: var(--bad); }

/* simulador */
.control { margin-bottom: 18px; }
.control label { font-weight: 600; display: flex; justify-content: space-between; }
.control output { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 500; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 32px; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.interruptor input { width: 46px; height: 26px; accent-color: var(--accent); }

/* formularios */
.campo { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1rem; }
.campo:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
select.campo { appearance: auto; }

.aviso { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: .92rem; }
.aviso.success { background: var(--soft-green); }
.aviso.danger { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.aviso.info { background: var(--soft-sun); }

.pie-pagina { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; color: var(--muted);
  font-size: .76rem; border-top: 1px solid var(--line); padding: 14px 16px; margin-top: 24px; }
@media (min-width: 992px) { .pie-pagina { padding: 14px 32px; } }

/* entrar */
.pantalla-ingreso { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 500px at 85% 110%, rgba(232, 89, 12, .18), transparent 60%), #0b0b0b; }
.pantalla-ingreso .caja { width: 100%; max-width: 400px; background: var(--surface); border-radius: 20px; padding: 28px 22px; }

/* impresión (informe anual) */
@media print {
  .lateral, .barra-sup, .barra-inf, .pie-pagina, .no-imprimir { display: none !important; }
  .principal { margin: 0; padding: 0; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
}

/* medidor semicircular (SolaFlux) */
.medidor { display: block; width: 100%; max-width: 220px; margin: 0 auto; }
.medidor .pista { stroke: var(--grid); }
.medidor .valor { stroke: var(--accent); }
.medidor text { fill: var(--ink); font-family: inherit; }
.tarjeta.oscura .medidor .pista, .tarjeta.negra .medidor .pista { stroke: #3a3a38; }
.tarjeta.oscura .medidor text, .tarjeta.negra .medidor text { fill: #fff; }
.escala { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
.punto-acento { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* suministros (clientes con varios medidores) */
.suministros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 16px; padding: 2px 16px;
  -webkit-overflow-scrolling: touch; }
.suministros::-webkit-scrollbar { display: none; }
.suministros .sum { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: .86rem; white-space: nowrap; min-height: 40px; }
.suministros .sum .n { color: var(--muted); font-size: .76rem; }
.suministros .sum.activo { background: var(--primary); color: var(--primary-ink); }
.suministros .sum.activo .n { color: var(--muted); }
@media (min-width: 992px) { .suministros { margin: -8px 0 20px; padding: 2px 0; flex-wrap: wrap; overflow: visible; } }

/* pie de funky-base (versión, Novedades, pantallas técnicas): discreto, con los tokens del portal */
.pie-funky footer { border-color: var(--line) !important; color: var(--muted) !important; margin-top: 0 !important; }
.pie-funky footer a { color: var(--muted); }
.pie-funky footer a:hover { color: var(--accent); }
@media (max-width: 991.98px) { .pie-funky { padding-bottom: 72px; } }   /* sobre la barra inferior del celular */

/* Pantallas y popup de funky-base (Feedback, Ayuda, Errores, Jobs, Rendimiento…): usan clases de Bootstrap; acá
   Bootstrap toma el acento naranja y los grises del portal, así no quedan en el azul por defecto. */
:root {
  --bs-primary: #e8590c; --bs-primary-rgb: 232, 89, 12;
  --bs-link-color: #c2410c; --bs-link-color-rgb: 194, 65, 12;
  --bs-link-hover-color: #9a3412; --bs-link-hover-color-rgb: 154, 52, 18;
  --bs-body-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-border-radius: 10px; --bs-border-radius-lg: 18px;
}
:root[data-theme="dark"] { --bs-primary: #f26a1b; --bs-primary-rgb: 242, 106, 27;
  --bs-link-color: #f2895a; --bs-link-color-rgb: 242, 137, 90; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bs-primary: #f26a1b; --bs-primary-rgb: 242, 106, 27;
    --bs-link-color: #f2895a; --bs-link-color-rgb: 242, 137, 90; }
}
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-ink);
  --bs-btn-hover-bg: #c2410c; --bs-btn-hover-border-color: #c2410c; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #9a3412; --bs-btn-active-border-color: #9a3412; --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); }
.nav-tabs .nav-link { color: var(--ink-2); }
.nav-tabs .nav-link:hover { color: var(--accent); }
.nav-tabs .nav-link.active { color: var(--ink); background: var(--surface); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(232, 89, 12, .2); }
.modal-content { border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.card { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--accent); --bs-nav-pills-link-active-color: var(--accent-ink); --bs-nav-link-color: var(--ink-2); --bs-nav-link-hover-color: var(--accent); }
.pagination { --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-color: var(--ink-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }