/* ==========================================================================
   Seguimiento de Objetivos — Prohygiene Tucumán
   Estilos de la página, con la paleta de los reportes PDF de siempre:
   azul marino de los encabezados, amarillo de los objetivos, gris de lo real,
   verde de las secciones y celeste de las listas. Así nadie se pierde: los
   mismos colores significan lo mismo que en el PDF.

   Los colores están como variables (tokens). Las hojas de reporte ("papel") se
   ven siempre claras, como un PDF; el modo oscuro solo cambia el marco de la página.
   Los colores de los gráficos están validados con la guía de visualización
   (contraste y daltonismo): no cambiarlos "a ojo".
   ========================================================================== */

:root {
  color-scheme: light;
  /* Colores de los reportes (salen del Excel) */
  --azul-marino: #00008e;     /* encabezado "Item | Objetivo | Actual..." */
  --azul-rotulo: #333399;     /* columna de rótulos */
  --azul-lista: #48a1f2;      /* títulos de las listas */
  --celeste: #91c6f7;         /* tablas celestes */
  --celeste-claro: #beddfa;
  --celeste-fila: #e8f1fc;
  --amarillo: #ffff00;        /* objetivos */
  --gris-real: #d9d9d9;       /* valores reales */
  --verde-seccion: #00b050;   /* VENDER / FACTURAR / COBRAR / OPERAR */
  --texto-azul: #1f497d;

  /* Gráficos de la página (validados: contraste ≥ 3:1 y distinguibles con daltonismo) */
  --serie-1: #2a78d6;         /* real / suma */
  --serie-2: #e34948;         /* resta (bajas) */
  --serie-3: #4a3aa7;         /* modificación de precio */
  --serie-neutra: #898781;    /* referencia: ritmo parejo, diferencias */
  --serie-total: #00008e;     /* total (azul de los reportes) */
  --rampa-1: #86b6ef;         /* rampa ordinal (antigüedad de deuda), de claro a oscuro */
  --rampa-2: #5598e7;
  --rampa-3: #256abf;
  --rampa-4: #184f95;
  --rampa-5: #0d366b;

  /* Estados (siempre con ícono y texto, como los "3 símbolos" del Excel) */
  --bien: #00b050;
  --bien-pista: #d3f1de;
  --riesgo: #ffc000;
  --riesgo-pista: #fff0c4;
  --serio: #f79646;
  --mal: #e0412b;
  --mal-pista: #f9d6d0;
  --texto-bien: #00703c;
  --texto-mal: #c00000;

  /* Marco de la página */
  --pagina: #eceff5;
  --barra: #ffffff;
  --barra-texto: #10123a;
  --barra-texto-2: #5b5e70;
  --borde-marco: #d3d8e3;

  /* Papel (siempre claro) */
  --papel: #ffffff;
  --texto: #14162b;
  --texto-2: #52546a;
  --texto-tenue: #74778a;
  --borde: #d5d9e3;
  --borde-fuerte: #9aa0b2;
  --grilla: #e4e7ee;
  --eje: #b9bdca;
  --foco: #0078d4;
  --radio: 8px;
  --sombra-papel: 0 1px 2px rgba(16, 24, 64, .06), 0 4px 14px rgba(16, 24, 64, .06);
  --lateral: 256px;
  --alto-barra: 64px;
  --letra: "Segoe UI", system-ui, -apple-system, Calibri, Carlito, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pagina: #17181c;
    --barra: #202127;
    --barra-texto: #ffffff;
    --barra-texto-2: #b9bccb;
    --borde-marco: #34363f;
    --sombra-papel: none;
  }
}
:root[data-theme="dark"] {
  --pagina: #17181c;
  --barra: #202127;
  --barra-texto: #ffffff;
  --barra-texto-2: #b9bccb;
  --borde-marco: #34363f;
  --sombra-papel: none;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--pagina);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 14.5px;
  line-height: 1.4;
}
button, input, select { font: inherit; color: inherit; }
a { color: #0563c1; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.oculto, [hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--azul-marino); color: #fff;
  display: flex; flex-direction: column; padding: 18px 12px 14px;
}
.marca {
  display: grid; grid-template-columns: 6px 1fr; column-gap: 10px; align-items: center;
  padding: 0 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .18); margin-bottom: 14px;
}
.marca::before { content: ""; grid-row: span 2; align-self: stretch; background: var(--amarillo); border-radius: 3px; }
.marca-titulo { font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.marca-sub { color: #c9c9ff; font-size: 13px; }

.campo { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; margin-bottom: 12px; }
.campo label { font-size: 12.5px; color: #c9c9ff; }
.campo select, .barra select {
  appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404040' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #000; border: 1px solid var(--borde); border-radius: 6px; padding: 6px 28px 6px 10px; cursor: pointer;
}

/* Tarjeta de la persona que se está viendo */
.persona-actual { display: flex; gap: 10px; align-items: center; padding: 10px; margin: 0 0 6px; background: rgba(255, 255, 255, .08); border-radius: var(--radio); }
.persona-actual .iniciales {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--amarillo); color: var(--azul-marino); font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.persona-actual b { display: block; font-size: 14.5px; line-height: 1.2; }
.persona-actual span { font-size: 12.5px; color: #c9c9ff; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-grupo { font-size: 11.5px; color: #a9a9ef; text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 4px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px;
  color: #e6e6ff; text-decoration: none;
}
.nav a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: var(--amarillo);
}
.nav a .contador {
  margin-left: auto; font-size: 12px; font-weight: 700; color: #000; min-width: 22px; text-align: center;
  background: var(--amarillo); border-radius: 10px; padding: 0 7px;
}
.nav svg { width: 17px; height: 17px; flex: none; }
.nav :focus-visible { outline-color: var(--amarillo); }

.lateral-pie { margin-top: auto; padding: 14px 8px 0; font-size: 12.5px; color: #c9c9ff; border-top: 1px solid rgba(255, 255, 255, .18); }
.lateral-pie strong { color: #fff; font-weight: 600; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 5; min-height: var(--alto-barra);
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--barra); color: var(--barra-texto);
  border-bottom: 3px solid var(--azul-marino);
}
.barra h1 { font-size: 21px; margin: 0; font-weight: 700; line-height: 1.2; }
.barra .rol { color: var(--barra-texto-2); font-size: 13.5px; }
.barra-acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.boton-icono {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--borde); background: #fff; color: #000; cursor: pointer;
}
.boton-icono:hover { background: var(--celeste-fila); }
.boton-icono svg { width: 17px; height: 17px; }

/* Avance del mes en la barra superior */
.mes-mini { display: flex; flex-direction: column; gap: 3px; min-width: 150px; font-size: 12.5px; color: var(--barra-texto-2); }
.mes-mini b { color: var(--barra-texto); font-weight: 600; }
.mes-mini .pista { height: 5px; border-radius: 3px; background: var(--celeste-claro); overflow: hidden; }
.mes-mini .pista i { display: block; height: 100%; background: var(--azul-marino); border-radius: 3px; }
:root[data-theme="dark"] .mes-mini .pista i { background: var(--amarillo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mes-mini .pista i { background: var(--amarillo); } }

/* Buscador de clientes de la barra */
.busqueda { position: relative; }
.busqueda input {
  width: 230px; height: 34px; padding: 5px 10px 5px 30px; border-radius: 6px; border: 1px solid var(--borde);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23595959' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5L13 13'/%3E%3C/svg%3E") no-repeat 10px center;
  color: #000;
}
.busqueda-lista {
  position: absolute; right: 0; top: calc(100% + 4px); width: 360px; max-width: calc(100vw - 32px); z-index: 30;
  background: #fff; color: #000; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 28px rgba(16, 24, 64, .18); padding: 4px; margin: 0; list-style: none;
}
.busqueda-lista li { padding: 6px 10px; border-radius: 6px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.busqueda-lista li[aria-selected="true"], .busqueda-lista li:hover { background: var(--celeste-fila); }
.busqueda-lista .codigo { color: var(--texto-tenue); font-variant-numeric: tabular-nums; min-width: 44px; }
.busqueda-lista .vacio { padding: 10px; cursor: default; }

.contenido { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1560px; }

/* ---------- Tarjetas (papel) ---------- */
.tarjeta {
  background: var(--papel); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-papel); min-width: 0; overflow: hidden;
}
.tarjeta-cabecera {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--azul-marino); color: #fff; padding: 8px 14px;
}
.tarjeta-cabecera.azul { background: var(--azul-lista); color: #000; }
.tarjeta-cabecera h2, .tarjeta-cabecera h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tarjeta-cabecera .sub { font-size: 13px; opacity: .85; }
.tarjeta-cabecera .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tarjeta-cuerpo { padding: 14px 16px 16px; }
.seccion-titulo {
  background: var(--verde-seccion); color: #000; font-weight: 700; font-size: 15px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .04em; padding: 5px 14px; margin: 6px 0 -4px;
}
.grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 18px; }
.nota { color: var(--texto-2); font-size: 13px; }
.vacio { color: var(--texto-tenue); padding: 18px 0; text-align: center; }
.aviso {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 14px; border-radius: var(--radio);
  background: #fff8d6; border: 1px solid #ecd77a; color: #3d3400; font-size: 13.5px;
}

/* ---------- Tablero: indicadores del mes en tarjetas ---------- */
.tablero-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: -6px; }
.tablero-cab h2 { margin: 0; font-size: 16px; color: var(--barra-texto); }
.tablero-cab .nota { color: var(--barra-texto-2); }
.tablero-cab .boton { margin-left: auto; }
.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 12px; }
.kpi {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  background: var(--papel); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-papel); padding: 12px 14px 12px; border-top: 4px solid var(--azul-marino);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kpi:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16, 24, 64, .08), 0 8px 22px rgba(16, 24, 64, .10); }
.kpi-etq { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.kpi-valor { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.kpi-obj { font-size: 13px; color: var(--texto-2); }
.kpi-obj b { color: var(--texto); font-weight: 600; background: var(--amarillo); padding: 0 4px; border-radius: 3px; }
.kpi-pie { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-tenue); }
.kpi-pie b { color: var(--texto-2); font-weight: 600; }

/* Medidor: lo logrado contra el objetivo, con la marca de "dónde debería estar hoy" */
.medidor { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--bien-pista); }
.medidor .relleno { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--bien); max-width: 100%; }
.medidor.riesgo { background: var(--riesgo-pista); }
.medidor.riesgo .relleno { background: var(--riesgo); }
.medidor.mal { background: var(--mal-pista); }
.medidor.mal .relleno { background: var(--mal); }
.medidor.neutro { background: #e3e9f5; }
.medidor.neutro .relleno { background: var(--serie-1); }
.medidor .marca-hoy { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--azul-marino); border-radius: 1px; }
.medidor-leyenda { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--texto-tenue); margin-top: 4px; }

/* ---------- Avance del mes (días hábiles) ---------- */
.mes-avance { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mes-avance-cab { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; font-size: 13.5px; color: var(--texto-2); }
.mes-avance-cab b { color: var(--texto); font-size: 15px; }
.dias { display: flex; gap: 3px; }
.dias i { flex: 1; height: 10px; border-radius: 3px; background: #e3e9f5; }
.dias i.hecho { background: var(--azul-marino); }
.dias i.hoy { background: var(--amarillo); box-shadow: inset 0 0 0 1px #b8a800; }

/* ---------- Tablas de la página (con el estilo de las listas del PDF) ---------- */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: 6px; }
table.tabla { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabla th, .tabla td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--grilla); vertical-align: top; }
.tabla td + td, .tabla th + th, .tabla th + td { border-left: 1px solid var(--grilla); }
.tabla thead th {
  background: var(--celeste); color: #000; font-weight: 700; border-bottom: 1px solid #6f9fd0;
  position: sticky; top: 0; z-index: 1; vertical-align: bottom; min-width: 64px;
}
.tabla tbody tr:hover td, .tabla tbody tr:hover th { background: var(--celeste-fila); }
.tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: 0; }
.tabla tbody th { font-weight: 400; min-width: 150px; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.num { white-space: nowrap; }
.tabla td.vacia { color: var(--texto-tenue); }
.tabla tfoot td, .tabla tfoot th { background: var(--celeste-claro); font-weight: 700; border-top: 1px solid #6f9fd0; }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable::after { content: ""; display: inline-block; width: 8px; margin-left: 4px; }
.tabla th.orden-asc::after { content: "▲"; font-size: 9px; }
.tabla th.orden-desc::after { content: "▼"; font-size: 9px; }
.leyenda-tabla { font-size: 12px; color: var(--texto-tenue); }
.enlace-cliente { color: #0563c1; cursor: pointer; text-decoration: underline; border: 0; background: none; padding: 0; text-align: left; }

.lista-herramientas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.buscador {
  flex: 1; min-width: 200px; max-width: 360px; padding: 6px 10px 6px 30px; border-radius: 6px;
  border: 1px solid var(--borde-fuerte); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23595959' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5L13 13'/%3E%3C/svg%3E") no-repeat 10px center;
}
.lista-herramientas .boton-descarga { margin-left: auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 6px;
  background: var(--celeste-fila); border: 1px solid var(--celeste); font-size: 13px;
}
.chip b { font-variant-numeric: tabular-nums; }
.boton {
  border: 1px solid var(--borde-fuerte); background: #fff; color: #000; border-radius: 6px; padding: 5px 12px;
  cursor: pointer; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px;
}
.boton:hover { background: var(--celeste-fila); }
.boton svg { width: 15px; height: 15px; }
.boton[aria-pressed="true"] { background: var(--celeste); font-weight: 700; }
.tarjeta-cabecera .boton { padding: 2px 10px; font-size: 13px; }
.segmentado { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 6px; overflow: hidden; }
.segmentado button { border: 0; background: #fff; color: #000; padding: 3px 12px; cursor: pointer; font-size: 13px; }
.segmentado button + button { border-left: 1px solid var(--borde-fuerte); }
.segmentado button[aria-pressed="true"] { background: var(--amarillo); font-weight: 700; }

/* ---------- Réplica de los reportes (hojas del Excel) ---------- */
.xl-herramientas {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-radius: var(--radio);
  background: var(--barra); color: var(--barra-texto); border: 1px solid var(--borde-marco); padding: 6px 10px;
  position: sticky; top: calc(var(--alto-barra) + 3px); z-index: 4;
}
.xl-herramientas .boton { min-width: 34px; justify-content: center; }
.xl-herramientas .zoom-valor { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.xl-herramientas .nota { color: var(--barra-texto-2); }
.xl-indice { display: flex; gap: 6px; flex-wrap: wrap; }
.xl-indice a {
  font-size: 12.5px; text-decoration: none; color: #000; background: #fff; border-radius: 6px;
  border: 1px solid var(--borde-fuerte); padding: 2px 9px;
}
.xl-indice a:hover { background: var(--celeste-fila); }
.xl-pagina {
  background: #fff; box-shadow: var(--sombra-papel); border: 1px solid var(--borde);
  padding: 22px 18px 10px; margin: 0 auto; width: fit-content; max-width: 100%; overflow-x: auto;
  scroll-margin-top: 130px;
}
.xl-zoom { width: fit-content; }
.xl-pie { text-align: right; font-size: 12px; color: #7f7f7f; padding-top: 6px; }

table.xl { border-collapse: collapse; table-layout: fixed; color: #000; background: #fff; font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; }
table.xl td { padding: 0 2px; line-height: 1.2; white-space: nowrap; }
table.xl td.rel { position: relative; }
table.xl .x { position: relative; z-index: 1; overflow: hidden; white-space: nowrap; }
table.xl .x.contable { display: flex; }
table.xl .x.contable > span { flex: none; white-space: pre; }
table.xl .x.contable > .relleno { flex: 1 1 auto; }
table.xl .x span { white-space: pre; }
table.xl .oc { visibility: hidden; }
table.xl .xl-barra { position: absolute; top: 2px; bottom: 2px; z-index: 0; }
table.xl .xl-icono { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 1.15em; height: 1.15em; z-index: 2; }
table.xl td.xl-cliente { cursor: pointer; }
table.xl td.xl-cliente:hover .x, table.xl td.xl-cliente:focus-visible .x { color: #0563c1; text-decoration: underline; }

/* ---------- Gráficos de Excel (hoja Graficos) ---------- */
.xl-grafico { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-papel); padding: 14px 16px; }
.xl-grafico-titulo { text-align: center; font-weight: 700; font-size: 18px; margin: 0 0 6px; font-family: Calibri, Carlito, var(--letra); }
.xl-grafico svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Calibri, Carlito, var(--letra); }
.xl-grafico svg text { fill: #000; font-size: 12px; }
.xl-grafico .grilla-linea { stroke: #d9d9d9; }
.xl-grafico .eje-linea { stroke: #868686; }
.xl-tabla-datos { border-collapse: collapse; table-layout: fixed; font-size: 12px; margin-top: -1px; font-family: Calibri, Carlito, var(--letra); }
.xl-tabla-datos td { border: 1px solid #868686; text-align: center; padding: 2px 2px; vertical-align: middle; overflow-wrap: anywhere; }
.xl-tabla-datos td.serie { text-align: left; white-space: nowrap; border-left: 0; }
.xl-tabla-datos tr:first-child td.serie { border: 0; }
.llave { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: 0; }
.xl-leyenda { display: flex; flex-direction: column; gap: 10px; justify-content: center; font-size: 12px; }
.xl-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.xl-torta { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; align-items: center; }

/* ---------- Gráficos de la página ---------- */
.grafico { width: 100%; position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--letra); }
.grafico .grilla-linea { stroke: var(--grilla); stroke-width: 1; }
.grafico .eje-linea { stroke: var(--eje); stroke-width: 1; }
.grafico text { fill: var(--texto-tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico text.etq { fill: var(--texto-2); font-size: 13px; }
.grafico text.fuerte { fill: var(--texto); font-weight: 600; font-size: 13px; }
.grafico .marca-real { fill: var(--serie-1); }
.grafico .marca-neg { fill: var(--serie-2); }
.grafico .marca-precio { fill: var(--serie-3); }
.grafico .marca-otros { fill: var(--serie-neutra); }
.grafico .marca-total { fill: var(--serie-total); }
.grafico .barra:hover path, .grafico .barra:focus path { filter: brightness(1.12); }
.grafico .barra:focus { outline: none; }
.grafico .barra:focus .barra-hit { fill: var(--celeste-fila); }
.grafico .linea-real { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linea-proy { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.grafico .area-real { fill: var(--serie-1); opacity: .10; }
.grafico .linea-obj { fill: none; stroke: var(--serie-neutra); stroke-width: 2; stroke-dasharray: 6 4; }
.grafico .punto { fill: var(--serie-1); stroke: #fff; stroke-width: 2; }
.grafico .cursor { stroke: var(--texto-2); stroke-width: 1; }
.grafico .zona-hit { fill: transparent; cursor: crosshair; }
.grafico .barra-hit { fill: transparent; }
.leyenda-grafico { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); margin-bottom: 8px; }
.leyenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.llave-linea { width: 18px; height: 2px; display: inline-block; border-radius: 1px; }
.llave-linea.punteada { background: repeating-linear-gradient(90deg, var(--serie-neutra) 0 6px, transparent 6px 10px) !important; }
.llave-linea.puntos { background: repeating-linear-gradient(90deg, var(--serie-1) 0 2px, transparent 2px 6px) !important; }
.llave-caja { width: 11px; height: 11px; display: inline-block; border-radius: 3px; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 40; min-width: 150px; border-radius: 6px;
  background: #fff; color: #000; border: 1px solid var(--borde);
  box-shadow: 0 6px 20px rgba(16, 24, 64, .18); padding: 7px 10px; font-size: 13px;
}
.tooltip .t-tit { color: var(--texto-2); margin-bottom: 3px; }
.tooltip .t-fila { display: flex; align-items: center; gap: 8px; }
.tooltip .t-fila b { font-variant-numeric: tabular-nums; }
.tooltip .t-fila span { color: var(--texto-2); }
.tooltip .llave-linea, .tooltip .llave-caja { width: 12px; height: 3px; border-radius: 2px; }

/* Barra apilada: antigüedad de la deuda */
.apilada { display: flex; gap: 2px; height: 22px; margin: 4px 0 8px; }
.apilada i { display: block; height: 100%; min-width: 3px; }
.apilada i:first-child { border-radius: 4px 0 0 4px; }
.apilada i:last-child { border-radius: 0 4px 4px 0; }
.apilada i:only-child { border-radius: 4px; }

/* ---------- Resumen: tabla de objetivos al estilo del PDF ---------- */
.tabla-envoltura.pdf { border: 0; border-radius: 0; }
table.objetivos { border-collapse: collapse; width: 100%; font-size: 15px; }
.objetivos th, .objetivos td { border: 1px solid #1d1d4f; padding: 4px 9px; }
.objetivos thead th { background: var(--azul-marino); color: #fff; font-size: 15.5px; text-align: center; }
.objetivos tbody th { background: var(--azul-rotulo); color: #fff; font-weight: 400; text-align: left; min-width: 150px; }
.objetivos td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.objetivos td.obj { background: var(--amarillo); font-weight: 700; }
.objetivos td.real { background: var(--gris-real); }
.objetivos td.texto { text-align: left; white-space: nowrap; font-size: 13.5px; }
.objetivos td.avance { min-width: 130px; text-align: left; }
.objetivos td.avance .medidor { flex: 1; }
.avance-celda { display: flex; align-items: center; gap: 8px; }
.avance-celda .avance-pct { min-width: 40px; text-align: right; font-weight: 600; }
.objetivos tr.sub td, .objetivos tr.sub th { font-size: 13px; }

/* ---------- Estado ---------- */
.estado { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: 700; font-size: 13.5px; }
.estado svg { width: 15px; height: 15px; flex: none; }
.estado.bien svg, .punto-estado.bien svg { color: var(--bien); }
.estado.riesgo svg, .punto-estado.riesgo svg { color: var(--riesgo); }
.estado.mal svg, .punto-estado.mal svg { color: var(--mal); }
.punto-estado { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.punto-estado svg { width: 14px; height: 14px; }
.kpi-etq .estado { font-size: 12.5px; font-weight: 600; }

/* ---------- Puente de la base ---------- */
.puente-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--texto-2); margin-bottom: 8px; }
.puente-cab b { color: var(--texto); font-size: 18px; }
.puente-cab .flecha { color: var(--texto-tenue); }
.delta-pos { color: var(--texto-bien); font-weight: 700; }
.delta-neg { color: var(--texto-mal); font-weight: 700; }

/* ---------- Plan de ventas ---------- */
.embudo { display: flex; flex-direction: column; gap: 16px; }
.embudo-fila .embudo-etq { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.embudo-fila .embudo-etq b { font-variant-numeric: tabular-nums; }

/* ---------- Equipo ---------- */
.equipo td { min-width: 120px; }
.equipo td .medidor { height: 6px; margin-top: 5px; }
.equipo .conteo { display: flex; gap: 8px; white-space: nowrap; font-weight: 600; }
.equipo .conteo span { display: inline-flex; align-items: center; gap: 3px; }
.equipo .conteo svg { width: 14px; height: 14px; }
.equipo .conteo .bien svg { color: var(--bien); }
.equipo .conteo .riesgo svg { color: var(--riesgo); }
.equipo .conteo .mal svg { color: var(--mal); }

/* ---------- Alertas ---------- */
.alertas-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.alerta-tile {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer;
  background: var(--papel); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-papel); padding: 12px 14px; border-left: 5px solid var(--riesgo);
}
.alerta-tile.mal { border-left-color: var(--mal); }
.alerta-tile.serio { border-left-color: var(--serio); }
.alerta-tile:hover { background: var(--celeste-fila); }
.alerta-tile b { display: block; font-size: 24px; line-height: 1.1; }
.alerta-tile span { font-size: 13px; color: var(--texto-2); }
.alerta-tile .alerta-icono { margin-top: 2px; }
.alerta-cab { display: flex; gap: 10px; align-items: center; }
.alerta-icono { width: 26px; height: 26px; display: grid; place-items: center; background: #fff; flex: none; border-radius: 6px; }
.alerta-icono svg { width: 17px; height: 17px; }
.alerta-icono.serio svg { color: var(--serio); }
.alerta-icono.riesgo svg { color: var(--riesgo); }
.alerta-icono.mal svg { color: var(--mal); }
.alerta-cab h3 { margin: 0; font-size: 16px; font-weight: 700; }
.alerta-texto { margin: 0 0 10px; color: var(--texto-2); font-size: 13.5px; }
.alerta-num { margin-left: auto; text-align: right; white-space: nowrap; }
.alerta-num b { font-size: 18px; }
.alerta-num span { font-size: 13px; margin-left: 4px; }

/* ---------- Clientes ---------- */
.ficha-cab { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ficha-cab h2 { margin: 0; font-size: 20px; }
.ficha-cab .sub { opacity: .85; }
.datos-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--grilla); border: 1px solid var(--grilla); border-radius: 6px; overflow: hidden; }
.datos-grilla div { display: flex; flex-direction: column; background: #fff; padding: 6px 10px; }
.datos-grilla span { font-size: 12px; color: var(--texto-tenue); }
.datos-grilla b { font-weight: 500; font-size: 14px; }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mini-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 6px; background: #f4f6fa; border-left: 4px solid var(--azul-rotulo); }
.mini-kpi span { font-size: 12.5px; color: var(--texto-2); }
.mini-kpi b { font-size: 19px; font-weight: 700; }
.mini-kpi.alerta { border-left-color: var(--mal); }
.etiqueta-estado { font-size: 12.5px; font-weight: 700; padding: 2px 10px; background: var(--amarillo); color: #000; white-space: nowrap; border-radius: 10px; }
.deuda-edad { margin-bottom: 14px; }
.deuda-edad h3 { margin: 0 0 2px; font-size: 14px; }

/* ---------- Ingreso, cuenta y contraseña (versión publicada) ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-tarjeta {
  width: min(380px, 100%); background: var(--papel); color: var(--texto); border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde-marco); box-shadow: var(--sombra-papel);
}
.acceso-cabecera { background: var(--azul-marino); color: #fff; padding: 16px 20px; border-bottom: 3px solid var(--amarillo); }
.acceso-cuerpo, .dialogo-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.acceso-cuerpo label, .dialogo-cuerpo label { font-size: 13px; color: var(--texto-2); margin-top: 6px; }
.acceso-cuerpo input, .dialogo-cuerpo input {
  border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: 8px 10px; background: #fff; color: #000;
}
.acceso-cuerpo .nota { margin: 8px 0 0; }
.acceso-error { min-height: 1.35em; margin: 4px 0 0; color: var(--texto-mal); font-size: 13px; }
.boton-primario, .boton-secundario {
  border-radius: 6px; padding: 8px 16px; font-weight: 700; cursor: pointer; border: 1px solid var(--azul-marino);
}
.boton-primario { background: var(--azul-marino); color: #fff; }
.boton-primario:hover { background: var(--azul-rotulo); }
.boton-secundario { background: #fff; color: var(--azul-marino); }
.boton-secundario:hover { background: var(--celeste-fila); }
.boton-primario:disabled { opacity: .6; cursor: progress; }
.acceso-cuerpo .boton-primario { margin-top: 6px; }
.boton-usuario {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--borde); background: #fff; color: #000; cursor: pointer; max-width: 220px;
}
.boton-usuario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-usuario:hover { background: var(--celeste-fila); }
.boton-usuario svg { width: 17px; height: 17px; flex: none; }
.dialogo {
  padding: 0; border: 1px solid var(--borde-marco); width: min(400px, calc(100vw - 32px)); border-radius: var(--radio);
  background: var(--papel); color: var(--texto); box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.dialogo::backdrop { background: rgba(0, 0, 40, .35); }
.dialogo h2 { margin: 0; font-size: 16px; background: var(--azul-marino); color: #fff; padding: 10px 20px; }
.dialogo p { margin: 0; }
.dialogo .acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 1100px) {
  .mes-mini { display: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-grupo { display: none; }
  .nav a[aria-current="page"]::before { display: none; }
  .lateral-pie { display: none; }
  .barra { padding: 10px 16px; position: static; }
  .barra-acciones { margin-left: 0; width: 100%; }
  .busqueda { flex: 1; }
  .busqueda input { width: 100%; }
  .xl-herramientas { top: 0; }
  .contenido { padding: 14px 16px 40px; }
  .grilla-2 { grid-template-columns: 1fr; }
  .xl-torta { grid-template-columns: 1fr; }
  .tablero { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .kpi-valor { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .kpi { transition: none; }
  .kpi:hover { transform: none; }
}

@media print {
  .lateral, .barra-acciones, .lista-herramientas, .xl-herramientas, .tablero-cab .boton { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .tarjeta, .xl-pagina, .xl-grafico, .kpi { box-shadow: none; break-inside: avoid; }
  .xl-pagina { break-after: page; border: 0; }
}