/* CIOS PATFOOD - web de gerencia (sin build)

   CONTRATO DE DIRECCION - "El Libro Mayor Vivo"
   THESIS: el libro mayor impecable de la casa: la verdad comercial escrita
     con tinta sobre papel de dia, sobre pizarra de noche.
   OWN-WORLD: una sola identidad en dos luces; superficies neutras, filetes
     de 1px que ordenan sin encajonar, numeros tabulares; el rojo PATFOOD es
     TINTA (identidad y decision), nunca pintura de regiones.
   STORY: se entra por el estado del negocio y se baja en drill hasta el
     cliente accionable; lo ACTIVO se marca con la regla de margen roja.
   FIRST VIEWPORT: barra y nav en la capa neutra fria con tinta oscura; el
     hero de gestion protagonista; un solo acento rojo a la vista.
   FORM: paneles 10px con filete y sombra ambiental minima; overlays 14px
     con sombra estructural; controles 6px / 34px; Public Sans 400-700.

   SISTEMA DE TEMAS: todos los componentes consumen tokens (variables CSS)
   definidos aca. Las claves data-tema se conservan: 'clasico' y 'patfood'
   rinden la MISMA luz clara (papel); 'dark' es la pizarra. NUNCA hardcodear
   colores en los componentes: todo color nuevo sale de un token. */

/* ---------- TIPOGRAFIA: Public Sans self-hosted (variable 400-700) ----------
   Fallback Segoe UI / system-ui: el mundo no se cae si la fuente no carga. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---------- TOKENS: luz clara "papel" (claves 'clasico' y 'patfood') ---------- */
:root {
  /* superficie: papel + panel blanco + capa FRIA (chrome: nav, toolbars, th) */
  --fondo: #f6f6f4;            /* papel: fondo general de la app */
  --panel: #ffffff;            /* tarjetas, tablas, paneles */
  --campo-bg: #ffffff;         /* inputs y selects */
  --hover-fila: #f4f5f6;       /* hover de filas planas */
  --fondo-suave: #eef0f2;      /* papel frio: filas de grupo, cajas en panel */
  --th-bg: #eef0f2;            /* encabezados de tabla (capa fria) */
  --neutro-bg: #e8eaed;        /* tags neutros */
  /* texto */
  --tinta: #1a1d21;            /* texto principal (16.9:1 sobre panel) */
  --tinta-suave: #5f6672;      /* secundario (5.8:1 panel / 5.1:1 capa fria) */
  --tinta-contraste: #ffffff;  /* texto SOBRE primario/acento (5.9:1) */
  --borde: #e3e4e1;            /* filete: la estructura de la casa */
  --borde-fuerte: #cfd2d0;     /* separador de grupo de tabla, mas marcado */
  /* marca / acciones: el rojo PATFOOD como tinta (Red Ink Rule: <10% de la
     pantalla; acciones primarias, regla de margen, decision; jamas regiones) */
  --primario: #c8102e;         /* rojo PATFOOD */
  --primario-osc: #9d0b23;     /* rojo profundo (hover) */
  --primario-tenue: #fdeef0;   /* tinte: chips y selecciones, nunca regiones */
  --primario-tenue-borde: #f5d3d9;
  --primario-tenue-hover: #fbdfe3;
  --acento: #c8102e;           /* branding: logo, badge, insights = el rojo */
  /* estados (semaforo del negocio; el rojo comparte familia con la marca) */
  --verde: #217a4b;  --verde-bg: #e5f2ea;  --verde-tinta: #1d6b42;
  --ambar: #d9962b;  --ambar-bg: #f9f0de;  --ambar-tinta: #96590a;
  --rojo: #c8102e;   --rojo-bg: #fbe9ec;   --rojo-bg-suave: #fdf4f5;
  /* ORO: compromiso comercial (compra obligatoria con premio), NO un estado
     del semaforo. Se separa del ambar a proposito: el ambar avisa de un
     riesgo, el oro marca algo que hay que hacer. */
  --oro: #8a6100;    --oro-bg: rgba(138, 97, 0, .09);
  /* informativo (tercer estado, ni bien ni mal: simulado, incorporar) */
  --azul: #1e5fa8;   --azul-bg: #e7eefa;
  /* avisos (footer metodologia, sin catalogar) */
  --aviso-bg: #faf8f2; --aviso-borde: #ece7d8;
  /* graficos: el dato se escribe con tinta, no con el rojo de marca */
  --grafico-ref: #667082;      /* lineas de referencia */
  --grafico-neutro: #99a1ad;   /* barras grises (esperado / mes base) */
  --grafico-dato: #2e3540;     /* serie protagonista: tinta del dato */
  --grafico-ml: #7c53c9;       /* serie del objetivo ML (linea punteada) */
  /* barra superior y nav: capa neutra fria con tinta oscura */
  --barra-fondo: #eef0f2;
  --barra-tinta: #1a1d21;
  --barra-tinta-suave: #5f6672;
  --barra-activa: #ffffff;
  /* elevacion: ambiental minima en paneles; estructural SOLO en overlays */
  --sombra: 0 1px 2px rgba(26, 29, 33, .05), 0 2px 6px rgba(26, 29, 33, .05);
  --sombra-alta: 0 2px 8px rgba(26, 29, 33, .10), 0 14px 38px rgba(26, 29, 33, .18);
  /* scrim: el UNICO velo bajo overlays (modales, drawer, backdrop) */
  --scrim: rgba(20, 23, 26, .45);
}

/* Clave 'patfood': rinde la MISMA luz clara que el default (One Brand Rule).
   Se conserva como clave valida de data-tema; no hay overrides. */

/* ---------- TOKENS: pizarra (clave 'dark') ----------
   Mismos roles, misma gramatica; el rojo sube de luminosidad para AA sobre
   oscuro y por eso lleva texto OSCURO encima (--tinta-contraste). */
:root[data-tema="dark"] {
  --fondo: #15181d;
  --panel: #1d2127;
  --campo-bg: #171a1f;
  --hover-fila: #232830;
  --fondo-suave: #22262d;
  --th-bg: #22262d;
  --neutro-bg: #2a2f37;
  --tinta: #e8eaed;            /* 13.4:1 sobre panel */
  --tinta-suave: #9aa3b0;      /* 6.3:1 sobre panel */
  --tinta-contraste: #1a1d21;  /* texto sobre el rojo claro (5.7:1) */
  --borde: #2c313a;
  --borde-fuerte: #3a404b;
  --primario: #e8707b;         /* rojo PATFOOD subido para AA (5.4:1 panel) */
  --primario-osc: #ee8790;     /* hover: en oscuro el rojo se ACLARA */
  --primario-tenue: #3a2227;
  --primario-tenue-borde: #5c2e35;
  --primario-tenue-hover: #46282e;
  --acento: #e8707b;
  --verde: #57bd85;  --verde-bg: #1d3529;  --verde-tinta: #7fd0a2;
  --ambar: #d9a13e;  --ambar-bg: #37301c;  --ambar-tinta: #e3b866;
  --oro: #d9b65a;    --oro-bg: rgba(217, 182, 90, .12);
  --rojo: #e8707b;   --rojo-bg: #3a2227;   --rojo-bg-suave: #2b1e21;
  --azul: #6ea8e8;   --azul-bg: #1e2c42;
  --aviso-bg: #22252a; --aviso-borde: #383d45;
  --grafico-ref: #7e8898;
  --grafico-neutro: #545e6b;
  --grafico-dato: #c6ccd4;
  --grafico-ml: #a586f0;
  --barra-fondo: #121519;      /* apenas mas honda que el fondo */
  --barra-tinta: #e8eaed;
  --barra-tinta-suave: #9aa3b0;
  --barra-activa: #1d2127;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .28);
  --sombra-alta: 0 2px 10px rgba(0, 0, 0, .40), 0 16px 44px rgba(0, 0, 0, .50);
  --scrim: rgba(9, 11, 14, .60);   /* pizarra: velo mas denso */
}


/* ---------- TOKENS: torre (claves 'torre' y 'torreclaro') ----------
   CUARTA Y QUINTA LUZ (2026-08-07, pedido de gerencia sobre la maqueta del
   tablero HOY). Mismos tokens que las otras: cambia la paleta, no la
   estructura -- por eso se AGREGAN al gestor de temas y no reemplazan a
   ninguna. Cualquier vista del CIOS sigue funcionando con estas dos.

   TORRE (oscuro): fondo azul marino casi negro, paneles apenas mas claros,
   bordes sutiles. El ROJO PATFOOD queda para marca y alerta -- no se pinta la
   interfaz de rojo --, el verde para desempeno bueno, el ambar para atencion y
   el azul para lo informativo e interactivo.

   Contraste: los tonos de la maqueta se ajustaron donde no llegaban a AA como
   TEXTO. Se conserva el tono para MARCA (puntos, barras, arcos: basta 3:1) y
   se oscurece/aclara la TINTA, el mismo par -marca/-tinta que el sistema ya
   usa para el ambar. */
:root[data-tema="torre"] {
  --fondo: #0d1117;            /* azul marino casi negro */
  --panel: #161b24;            /* tarjeta: apenas mas clara que el fondo */
  --campo-bg: #10151d;
  --hover-fila: #1c222c;
  --fondo-suave: #1b212b;
  --th-bg: #1b212b;
  --neutro-bg: #232a36;
  --tinta: #e6edf3;            /* 13,1:1 sobre panel */
  --tinta-suave: #8b949e;      /* 5,3:1 sobre panel */
  --tinta-contraste: #0d1117;
  --borde: #232a36;            /* filete sutil, como la maqueta */
  --borde-fuerte: #303a48;
  --primario: #f0616d;         /* rojo PATFOOD subido para AA (5,2:1) */
  --primario-osc: #f47a84;
  --primario-tenue: #33191d;
  --primario-tenue-borde: #55262c;
  --primario-tenue-hover: #3d1d22;
  --acento: #f0616d;
  --verde: #3fb950;  --verde-bg: #12261a;  --verde-tinta: #56d364;
  --ambar: #d29922;  --ambar-bg: #2b2312;  --ambar-tinta: #e3b341;
  --oro: #d9b65a;    --oro-bg: rgba(217, 182, 90, .12);
  --rojo: #f85149;   --rojo-bg: #2d1618;   --rojo-bg-suave: #1f1214;
  --azul: #58a6ff;   --azul-bg: #16243b;
  --aviso-bg: #1b212b; --aviso-borde: #2c3542;
  --grafico-ref: #7d8794;
  --grafico-neutro: #4d5766;
  --grafico-dato: #58a6ff;     /* el dato del dia se escribe con el azul */
  --grafico-ml: #a371f7;
  --barra-fondo: #0a0e14;
  --barra-tinta: #e6edf3;
  --barra-tinta-suave: #8b949e;
  --barra-activa: #161b24;
  --sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .32);
  --sombra-alta: 0 2px 10px rgba(0, 0, 0, .45), 0 16px 44px rgba(0, 0, 0, .55);
  --scrim: rgba(5, 8, 12, .65);
}

/* TORRE CLARO: la MISMA pantalla en luz de papel. No es el oscuro invertido:
   los grises se eligen para que el blanco de la tarjeta destaque sobre un
   fondo apenas frio, y las tintas se oscurecen hasta pasar AA. */
:root[data-tema="torreclaro"] {
  --fondo: #f6f8fa;
  --panel: #ffffff;
  --campo-bg: #ffffff;
  --hover-fila: #f6f8fa;
  --fondo-suave: #eef1f4;
  --th-bg: #f2f4f7;
  --neutro-bg: #e6e9ee;
  --tinta: #1f2933;            /* azul marino casi negro, 14,1:1 */
  --tinta-suave: #5b6673;      /* 6,1:1 sobre panel */
  --tinta-contraste: #ffffff;
  --borde: #e2e6eb;            /* gris muy suave */
  --borde-fuerte: #cbd2da;
  --primario: #c8102e;         /* rojo PATFOOD pleno */
  --primario-osc: #a30d26;
  --primario-tenue: #fdeef0;
  --primario-tenue-borde: #f6ccd3;
  --primario-tenue-hover: #fbe2e6;
  --acento: #c8102e;
  --verde: #1a7f37;  --verde-bg: #e8f5ec;  --verde-tinta: #146c2e;
  --ambar: #bf8700;  --ambar-bg: #fdf3e0;  --ambar-tinta: #92670a;
  --oro: #96700c;    --oro-bg: rgba(150, 112, 12, .10);
  --rojo: #cf222e;   --rojo-bg: #fdecee;   --rojo-bg-suave: #fdf6f7;
  --azul: #0969da;   --azul-bg: #e7f0fc;
  --aviso-bg: #f6f8fa; --aviso-borde: #e2e6eb;
  --grafico-ref: #6b7684;
  --grafico-neutro: #b6bec8;
  --grafico-dato: #0969da;
  --grafico-ml: #8250df;
  --barra-fondo: #ffffff;
  --barra-tinta: #1f2933;
  --barra-tinta-suave: #5b6673;
  --barra-activa: #f2f4f7;
  --sombra: 0 1px 2px rgba(31, 41, 51, .06), 0 2px 6px rgba(31, 41, 51, .05);
  --sombra-alta: 0 2px 8px rgba(31, 41, 51, .10), 0 14px 38px rgba(31, 41, 51, .16);
  --scrim: rgba(31, 41, 51, .45);
}

/* ---------- TOKENS: tablero (clave 'tablero') ----------
   TERCERA LUZ, elegida por direccion (2026-07-30). Misma gramatica y los
   MISMOS 42 tokens que las otras dos: cambia la tinta de marca, no la
   estructura. Donde el papel escribe con rojo PATFOOD, el tablero escribe
   con AZUL MARINO, y el rojo queda reservado entero para la DECISION
   (deficit, alerta, seleccion que exige mirar). Por eso aca no rige la Red
   Ink Rule sino su equivalente: el azul es la tinta y el rojo es el grito.

   AJUSTES DE CONTRASTE sobre la paleta de referencia: los grises y verdes
   del comp original no llegaban a AA como TEXTO (#7c8798 daba 3,6:1 y
   #2f9e52 3,4:1, contra el 4,5:1 que exige texto normal). Se conserva el
   tono para MARCA (puntos, barras, arcos, donde basta 3:1) y se oscurece la
   TINTA, el mismo par -marca/-tinta que el sistema ya usa para el ambar. */
:root[data-tema="tablero"] {
  --fondo: #f4f6f9;            /* papel apenas mas frio que el default */
  --panel: #ffffff;
  --campo-bg: #ffffff;
  --hover-fila: #f7f9fc;
  --fondo-suave: #eef1f5;
  --th-bg: #eef1f5;
  --neutro-bg: #e4e9f0;
  --tinta: #243244;            /* 12,2:1 sobre panel */
  --tinta-suave: #5c6779;      /* 5,7:1 sobre panel (el #7c8798 del comp da 3,6) */
  --tinta-contraste: #ffffff;  /* texto sobre el azul: 10,8:1 */
  --borde: #e4e8ee;
  --borde-fuerte: #cdd5df;
  --primario: #1c3d6e;         /* azul marino: la tinta de este tema */
  --primario-osc: #142c50;     /* hover: en luz clara el azul se PROFUNDIZA */
  --primario-tenue: #eef4fb;
  --primario-tenue-borde: #d6e3f3;
  --primario-tenue-hover: #e3edf8;
  --acento: #1c3d6e;
  /* semaforo: -marca conserva el tono del comp, -tinta pasa AA como texto */
  --verde: #2f9e52;  --verde-bg: #e9f5ed;  --verde-tinta: #1f7a41;
  --ambar: #f2892a;  --ambar-bg: #fdf1e5;  --ambar-tinta: #9a5205;
  --oro: #96700c;    --oro-bg: rgba(150, 112, 12, .10);
  --rojo: #e3122d;   --rojo-bg: #fdeaed;   --rojo-bg-suave: #fdf5f6;
  --azul: #16a3ad;   --azul-bg: #e6f6f7;   /* el informativo es el teal */
  --aviso-bg: #f7f9fc; --aviso-borde: #e4e8ee;
  --grafico-ref: #6b7688;
  --grafico-neutro: #b8bec7;
  --grafico-dato: #1c3d6e;     /* el dato se escribe con el azul de la casa */
  --grafico-ml: #8a6fc0;
  --barra-fondo: #ffffff;      /* la barra superior es panel, no capa fria */
  --barra-tinta: #243244;
  --barra-tinta-suave: #5c6779;
  --barra-activa: #eef4fb;
  --sombra: 0 1px 3px rgba(28, 61, 110, .07), 0 2px 6px rgba(28, 61, 110, .05);
  --sombra-alta: 0 2px 8px rgba(28, 61, 110, .12), 0 14px 38px rgba(28, 61, 110, .20);
  --scrim: rgba(20, 30, 45, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
}

.oculto { display: none !important; }
.oculto-bloque { display: none !important; }  /* bloque desactivado en Personalizar */

/* ---------- login ---------- */
/* papel llano con la marca en tinta roja: la identidad esta en el detalle,
   no en teñir la pantalla (Red Ink Rule) */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo);
}
.login-caja {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 36px; width: 360px; box-shadow: var(--sombra-alta);
}
.marca { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.marca-logo {
  width: 48px; height: 48px; border-radius: 10px; background: var(--acento);
  color: var(--tinta-contraste); font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.marca h1 { font-size: 20px; letter-spacing: 1px; }
.marca p { color: var(--tinta-suave); font-size: 13px; }

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--tinta-suave); }
input, select {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid var(--borde); border-radius: 6px; font-size: 15px;
  background: var(--campo-bg); color: var(--tinta);
}
/* foco: mismo lenguaje en inputs y botones (borde rojo + anillo tenue) */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tenue);
}
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario {
  background: var(--primario); color: var(--tinta-contraste); border: 0; border-radius: 6px;
  min-height: 34px; padding: 7px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; width: auto;
}
.btn-primario:hover { background: var(--primario-osc); }
.btn-primario:active { background: var(--primario-osc); transform: translateY(1px); }
.btn-primario:disabled, .btn-secundario:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
#form-login .btn-primario { width: 100%; margin-top: 6px; }
.btn-secundario {
  background: transparent; color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--tinta) 24%, transparent);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.btn-secundario:hover { background: var(--fondo-suave); }
.error { color: var(--rojo); margin-top: 12px; font-size: 13px; }

/* ---------- app shell: nav lateral + barra + contenido ----------
   El chrome es la capa neutra fria y desaparece detras del dato: una columna
   de nav a la izquierda (quieta, con scroll propio) y la barra superior sobre
   la columna del contenido. Comparten fondo: el chrome se lee como UNA pieza.
   En <=720px la columna no existe y el burger abre el nav como drawer bajo la
   barra (mismo mecanismo JS de siempre: .nav-abierto). */
#pantalla-app {
  position: relative;              /* ancla del drawer movil */
  /* Ancho del nav como TOKEN: lo leen la grilla, la pestañita y el boton del
     asistente, que tiene que centrarse sobre la COLUMNA DE CONTENIDO y no
     sobre el viewport (con el nav a la izquierda, centrar en viewport se ve
     corrido). Antes estaba escrito a mano en cuatro lugares. */
  --nav-w: 200px;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
#pantalla-app > .barra { grid-column: 2; grid-row: 1; }
#pantalla-app > main { grid-column: 2; grid-row: 2; min-width: 0; }
#pantalla-app > .pie-app { grid-column: 2; grid-row: 3; }

/* ---------- barra superior: chrome del contenido ---------- */
.barra {
  background: var(--barra-fondo); color: var(--barra-tinta);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; padding: 10px 22px; min-height: 55px;
  position: relative; /* ancla de los paneles colgantes (buscador movil) */
}
/* la marca vive arriba del nav lateral; en la barra solo aparece en pantalla
   chica, cuando la columna no existe */
.marca-mini { display: none; font-weight: 700; letter-spacing: 1px; flex: none; }
.marca-mini span { color: var(--acento); font-weight: 400; margin-left: 4px; }
.usuario {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  font-size: 13px; color: var(--barra-tinta-suave); flex: none;
}
.usuario .btn-secundario { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- nav lateral: el indice del libro mayor ----------
   Chrome puro: capa fria, sin separadores duros (el aire y los titulos de
   grupo separan solos). Lo ACTIVO lo marca UNA sola cosa: la regla de margen
   roja de 3px en el borde izquierdo -la firma de la casa- sobre fila de
   panel con tinta plena. El hover es apenas una capa mas clara, nunca roja. */
#nav {
  grid-column: 1; grid-row: 1 / 4;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--barra-fondo); color: var(--barra-tinta);
  border-right: 1px solid var(--borde);
  padding: 0;                      /* el pie lo pone la pestañita (sticky) */
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;           /* scroll interno sutil si excede el alto */
  scrollbar-color: var(--borde-fuerte) transparent;
}
.nav-marca {
  display: flex; align-items: baseline; gap: 8px; flex: none;
  padding: 20px 16px 0; margin-bottom: 10px; white-space: nowrap;
}
.nav-marca-nom { font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.nav-marca-punto {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acento); margin-left: 3px;
}
.nav-marca-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  color: var(--barra-tinta-suave);
}
#nav button {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; margin: 0 12px 0 0; padding: 8px 12px 8px 13px;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--barra-tinta-suave);
  font-size: 13px; font-weight: 500; line-height: 1.3; text-align: left;
  cursor: pointer;
}
#nav > button + button { margin-top: 2px; }
#nav button:hover { color: var(--barra-tinta); background: var(--hover-fila); }
#nav button:focus-visible { outline-offset: -2px; }
#nav button.activa {
  background: var(--barra-activa); color: var(--barra-tinta);
  border-left-color: var(--primario); font-weight: 600;
}
#nav .ico { width: 18px; height: 18px; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* grupos: titulo Label chico en mayusculas, respiro asimetrico (mas aire
   arriba que abajo); alineado con los iconos de sus items */
.nav-grupo { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: none; }
.nav-grupo-tit {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--barra-tinta-suave);
  margin: 22px 0 6px; padding: 0 12px 0 16px; white-space: nowrap;
}
/* ---------- la "pestañita": conmuta riel <-> expandido ----------
   Manija SIEMPRE a mitad del alto visible (pedido de gerencia 2026-07-25:
   al pie habia que scrollear para encontrarla). position:fixed sobre el
   borde derecho del nav, centrada a 50% del viewport: se abre/cierra desde
   cualquier punto del scroll. Estado en localStorage cios_nav_colapsado
   (app.js). */
.nav-riel-toggle {
  position: fixed; top: 50%; transform: translateY(-50%);
  left: var(--nav-w); z-index: 40;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 56px; padding: 0;
  background: var(--barra-fondo);
  border: 1px solid var(--borde); border-left: 0;
  border-radius: 0 6px 6px 0;
  color: var(--barra-tinta-suave); cursor: pointer;
  box-shadow: var(--sombra);
}
.nav-riel-toggle:hover { color: var(--barra-tinta); background: var(--hover-fila); }
.nav-riel-toggle:focus-visible { outline-offset: -2px; }
.nav-riel-toggle .ico { width: 16px; height: 16px; }

/* ---------- riel (colapsado, DEFAULT en escritorio): 60px solo iconos ----------
   La clase .nav-riel vive en #pantalla-app. El swap de columna es INSTANTANEO:
   no se anima width ni grid (layout thrash); lo unico animado es el fade de
   150ms de los TEXTOS al expandir (.nav-expandiendo, mas abajo). Solo
   escritorio: en <=720px el nav es el drawer del burger y la clase no pinta. */
#pantalla-app.nav-riel { --nav-w: 60px; }
@media (min-width: 721px) {
  /* marca como monograma: queda solo el punto rojo de la casa */
  .nav-riel .nav-marca { justify-content: center; padding: 20px 0 0; margin-bottom: 4px; }
  .nav-riel .nav-marca-nom { font-size: 0; letter-spacing: 0; }
  .nav-riel .nav-marca-punto { width: 8px; height: 8px; margin: 0; }
  .nav-riel .nav-marca-sub { display: none; }
  /* items: icono centrado; el nombre pasa al tooltip nativo (title, app.js).
     Lo activo conserva la firma: regla roja de 3px + fila panel. */
  .nav-riel .nav-txt { display: none; }
  .nav-riel #nav button {
    position: relative; justify-content: center; gap: 0;
    margin-right: 6px; padding: 8px 0;
  }
  .nav-riel #nav .ico { width: 20px; height: 20px; }
  /* titulo de grupo -> separador minimo: respiro + filete corto centrado */
  .nav-riel .nav-grupo-tit { display: none; }
  .nav-riel .nav-grupo::before {
    content: ""; width: 16px; height: 1px; flex: none;
    margin: 16px auto 8px; background: var(--borde-fuerte);
  }
  /* badge de alertas: pildora mini superpuesta al icono, legible sin gritar */
  .nav-riel #nav .badge {
    position: absolute; top: 2px; right: 8px; margin: 0;
    padding: 0 4px; min-width: 16px; line-height: 16px; text-align: center;
  }
  /* pestañita en riel: la manija sigue sola al borde (--nav-w ya vale
     60px) y el chevron se invierte (apunta a expandir) */
  .nav-riel .nav-riel-toggle .ico { transform: rotate(180deg); }
}
/* fade de LECTURA al expandir: SOLO los textos aparecen en 150ms; la clase
   la pone navToggleRiel (app.js) un instante y la saca sola */
#nav.nav-expandiendo .nav-txt,
#nav.nav-expandiendo .nav-grupo-tit,
#nav.nav-expandiendo .nav-marca-nom,
#nav.nav-expandiendo .nav-marca-sub { animation: nav-txt-entra .15s ease-out; }
@keyframes nav-txt-entra { from { opacity: 0; } to { opacity: 1; } }

/* ---------- burger (solo pantalla chica): abre el drawer del nav ---------- */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--barra-tinta-suave);
  color: var(--barra-tinta); border-radius: 6px;
  width: 44px; height: 44px; padding: 0; cursor: pointer; flex: none;
}
.nav-burger .ico { width: 20px; height: 20px; }
.nav-burger[aria-expanded="true"] { background: var(--barra-activa); }
/* ---------- frescura del dato (barra superior) ----------
   Cualquier perfil tiene que poder leer a que corte corresponden los numeros,
   sin importar quien los actualizo ni desde donde. El punto: verde = al dia,
   ambar = falta recalcular o paso un dia habil, rojo = dos dias habiles o mas,
   gris = no se pudo determinar. Es un popover clickeable (no solo title de
   hover, que en touch no se ve): el trigger es el boton, el panel se abre
   debajo con el mismo detalle. */
.estado-datos {
  position: relative; display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--barra-tinta-suave); border-radius: 999px;
  padding: 4px 11px; font-size: 12px; white-space: nowrap;
}
.estado-datos-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.estado-punto { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--verde); }
.estado-datos.atencion .estado-punto { background: var(--ambar); }
.estado-datos.viejo .estado-punto { background: var(--rojo); }
.estado-datos.desconocido .estado-punto { background: var(--grafico-neutro); }
.estado-datos-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 240px; max-width: min(320px, calc(100vw - 24px));
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: var(--sombra-alta); padding: 10px 12px;
  font-size: 12px; line-height: 1.5; white-space: normal; cursor: auto;
  animation: aviso-entra .12s ease-out;
}
.estado-datos-pop p { margin: 0 0 4px; }
.estado-datos-pop p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  /* la columna no existe: barra arriba y el nav como drawer debajo, con el
     mismo lenguaje del lateral y tap targets de 44px. --nav-w a 0 para que el
     boton del asistente se centre en la pantalla y no quede corrido. */
  #pantalla-app { display: block; --nav-w: 0px; }
  .nav-burger { display: inline-flex; }
  .marca-mini { display: block; }
  #nav {
    display: none; position: absolute; top: auto; left: 0; right: 0; z-index: 70;
    height: auto; max-height: min(76vh, 560px);
    border-right: 0; border-bottom: 1px solid var(--borde);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--sombra-alta);
    padding: 4px 10px 18px;
  }
  #nav.nav-abierto { display: flex; }
  .nav-marca { display: none; }
  #nav button { min-height: 44px; font-size: 14px; margin-right: 0; }
  .nav-grupo-tit { margin: 16px 0 4px; }
  /* la pestañita es solo escritorio: el drawer ya tiene el burger */
  .nav-riel-toggle { display: none; }
}

.tema-select {
  width: auto; margin: 0; padding: 5px 8px; font-size: 12px;
  background: transparent; color: var(--barra-tinta-suave);
  border: 1px solid var(--barra-tinta-suave); border-radius: 6px; cursor: pointer;
}
.tema-select option { background: var(--panel); color: var(--tinta); }

/* ---------- selector de perspectiva (perfil + donde estoy parado) ----------
   Cerrado se lee sin abrir nada: arriba el PERFIL (chico), abajo la mirada
   actual. Abierto, los equipos vienen PLEGADOS: con 36 vendedores la lista
   corrida no se podia leer. */
.persp { position: relative; flex: none; }
.persp-trigger {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; color: var(--barra-tinta);
  border: 1px solid var(--barra-tinta-suave); border-radius: 6px;
  padding: 4px 8px; max-width: 230px; text-align: left;
}
.persp-trigger:hover { background: var(--barra-activa); }
.persp-lineas { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.persp-perfil {
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--barra-tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.persp-valor {
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.persp-caret { width: 14px; height: 14px; opacity: .8; }
.persp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 270px; max-height: 66vh; overflow: auto;
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: var(--sombra-alta); padding: 6px;
}
.persp-cab {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-suave); padding: 6px 8px 4px;
}
.persp-opcion, .persp-grupo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  padding: 7px 9px; font-size: 13px; color: var(--tinta); text-align: left;
}
.persp-opcion:hover, .persp-grupo:hover { background: var(--hover-fila); }
.persp-opcion.activa { background: var(--primario-tenue); font-weight: 600; }
.persp-grupo { font-weight: 600; color: var(--tinta-suave); }
.persp-grupo.dentro { color: var(--primario); }
.persp-grupo .persp-caret { transition: transform .12s ease; }
.persp-grupo.abierto .persp-caret { transform: rotate(90deg); }
.persp-grupo-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persp-grupo-n {
  font-size: 11px; font-weight: 600; color: var(--tinta-suave);
  background: var(--neutro-bg); border-radius: 10px; padding: 1px 7px;
}
.persp-hijos { padding-left: 14px; border-left: 2px solid var(--borde); margin: 2px 0 6px 12px; }
.persp-id { margin-left: auto; font-size: 11px; color: var(--tinta-suave); }

/* ---------- dashboard comercial ---------- */
.dash-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.dash-titulo { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.dash-periodos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card-ritmo { display: block; margin-top: 3px; color: var(--tinta); font-weight: 600; }

/* mini-grafico diario: barras por dia habil + promedio del mes base */
.spark { width: 100%; height: 44px; margin-top: 10px; display: block; }
.spark .sd-bar { fill: var(--grafico-dato); opacity: .55; }
.spark .sd-bar-alta { fill: var(--verde); }
.spark .sd-ref { stroke: var(--grafico-ref); stroke-width: 1.5; stroke-dasharray: 4 3; }
.evo-grafico .spark { height: 120px; margin: 4px 0 6px; }

/* ritmo esperado (pacing) vs ritmo actual (avance/objetivo) */
.ritmos { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.ritmo-fila { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 8px;
  font-size: 11px; color: var(--tinta-suave); }
.ritmo-fila b { text-align: right; color: var(--tinta); }
.barra-progreso.fina { height: 6px; }
.barra-progreso div.gris { background: var(--grafico-neutro); }

.hero-ritmos { font-size: 12px; color: var(--tinta-suave); margin-top: 8px; }
.hero-secundarios .sube { color: var(--verde); font-weight: 600; }
.hero-secundarios .baja { color: var(--rojo); font-weight: 600; }
td.sube { color: var(--verde); } td.baja { color: var(--rojo); }
.evolucion { margin-bottom: 18px; }
.exportables { margin-top: 26px; }
.exportables h3.primera { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.aviso-catalogar { background: var(--aviso-bg); border: 1px solid var(--aviso-borde); border-radius: 8px; padding: 10px 14px; }

/* donde actuar: equipos con drill-down + subcanales */
.actuar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 960px) { .actuar-grid { grid-template-columns: 1fr; } }
.actuar-panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; }
.actuar-panel h4 { font-size: 14px; margin: 0 0 10px; }
.actuar-panel h4 small { color: var(--tinta-suave); font-weight: 400; }
.fila-equipo { cursor: pointer; }
.fila-equipo:hover td { background: var(--hover-fila); }
.chev { display: inline-block; transition: transform .15s; color: var(--tinta-suave); }
.chev.abierto { transform: rotate(90deg); }
.tag-bajo {
  background: var(--rojo-bg); color: var(--rojo); border-radius: 10px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .4px;
}
.fila-detalle > td { padding: 0 0 10px 22px; background: var(--panel); }
.tabla-anidada { width: 100%; }
.tabla-anidada th { font-size: 11px; }
.vend-bajo td { background: var(--rojo-bg-suave); }

/* ---------- dashboard de decisiones ---------- */
/* senales automaticas */
.senales-panel {
  background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--ambar);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
}
.senales-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.senal { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 3px 0; color: var(--tinta); }
.senal-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.senal.rojo .senal-punto { background: var(--rojo); }
.senal.ambar .senal-punto { background: var(--ambar); }

/* grafico grande de evolucion */
.panel-grafico {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px 18px 10px; margin-bottom: 20px;
}
.grafico-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grafico-cab h3 { margin: 0; }
.chips-metrica { margin: 0; }
.chips-metrica button { padding: 4px 12px; font-size: 12px; }
.grafico-lineas { width: 100%; height: auto; margin-top: 8px; }
.grafico-lineas .grid { stroke: var(--borde); stroke-width: 1; }
.grafico-lineas .eje { fill: var(--tinta-suave); font-size: 11px; text-anchor: end; }
.grafico-lineas .eje.ejex { text-anchor: middle; }
.grafico-lineas .linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-lineas .linea.actual { stroke: var(--grafico-dato); }
.grafico-lineas .linea.base { stroke: var(--grafico-neutro); }
.grafico-lineas .linea.objetivo { stroke: var(--acento); stroke-width: 1.8; stroke-dasharray: 6 4; }
.grafico-lineas .linea.objetivo-ml { stroke: var(--grafico-ml); stroke-width: 1.6; stroke-dasharray: 2 4; }
.grafico-lineas .pto { fill: var(--panel); stroke-width: 2; }
.grafico-lineas .pto.actual { stroke: var(--grafico-dato); }
.grafico-lineas .pto.base { stroke: var(--grafico-neutro); r: 2.5px; }
.grafico-lineas .etq { font-size: 11px; font-weight: 700; }
.grafico-lineas .etq.actual { fill: var(--grafico-dato); }
.grafico-lineas .etq.base { fill: var(--grafico-ref); }
.grafico-lineas .etq.objetivo { fill: var(--acento); font-weight: 600; }
.grafico-lineas .etq.objetivo-ml { fill: var(--grafico-ml); font-weight: 600; }

/* dispersiones (scatter de vendedores y de clientes) */
.sct { width: 100%; height: auto; margin-top: 8px; }
.sct .grid { stroke: var(--borde); stroke-width: 1; }
.sct .eje { fill: var(--tinta-suave); font-size: 11px; text-anchor: end; }
.sct .eje.ejex { text-anchor: middle; }
.sct .umbral { stroke: var(--grafico-ref); stroke-width: 1.4; stroke-dasharray: 6 4; }
.sct .etq-umbral { fill: var(--grafico-ref); font-size: 11px; font-weight: 600; }
.sct .sct-cuad { fill: var(--tinta-suave); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.sct-pto { stroke: var(--panel); stroke-width: 1; }
.sct-pto[data-vid], .sct-pto[data-ficha-cliente] { cursor: pointer; }
.sct-pto.verde, .sct-pto.cuidar { fill: var(--verde); }
.sct-pto.ambar, .sct-pto.amarillo, .sct-pto.depurar { fill: var(--ambar); }
.sct-pto.rojo, .sct-pto.defender { fill: var(--rojo); }
.sct-pto.mantener { fill: var(--grafico-neutro); opacity: .6; }
.sct-pto.ajeno { opacity: .18; }
.sct-panel .nota { margin-top: 6px; }
.grafico-leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-suave); padding: 6px 2px 4px; }
.grafico-leyenda .lg { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.grafico-leyenda .lg.actual { background: var(--grafico-dato); }
.grafico-leyenda .lg.base { background: var(--grafico-neutro); }
.grafico-leyenda .lg.objetivo { background: var(--acento); }
.grafico-leyenda .lg.objetivo-ml { background: var(--grafico-ml); }

/* tiles de flujo de clientes y oportunidades */
.flujo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: stretch; }
.tile {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px; text-align: left;
}
.tile-num { font-size: 26px; font-weight: 700; }
.tile-etq { font-size: 13px; font-weight: 600; margin-top: 2px; }
.tile-pie { font-size: 11px; color: var(--tinta-suave); margin-top: 3px; }
.tile.verde { border-top: 3px solid var(--verde); } .tile.verde .tile-num { color: var(--verde); }
.tile.rojo { border-top: 3px solid var(--rojo); } .tile.rojo .tile-num { color: var(--rojo); }
.tile.azul { border-top: 3px solid var(--azul); } .tile.azul .tile-num { color: var(--azul); }
.tile.ambar { border-top: 3px solid var(--ambar); } .tile.ambar .tile-num { color: var(--ambar-tinta); }
.tile.oportunidad { cursor: pointer; font: inherit; color: inherit; border-top: 3px solid var(--primario); }
.tile.oportunidad:hover { border-color: var(--primario); background: var(--primario-tenue); }
.tile.oportunidad .tile-num { color: var(--primario); }
/* tiles chicos de conteo (nuevos/perdidos/recuperados/compran menos): el
   puente es el protagonista del bloque, estos quedan de detalle secundario */
.tile.mini { padding: 10px 14px; }
.tile.mini .tile-num { font-size: 20px; }
.flujo-conteos { margin-top: 14px; }
.puente-fila { display: grid; grid-template-columns: 130px 1fr 70px; gap: 8px; align-items: center; font-size: 11px; color: var(--tinta-suave); margin-top: 6px; }
.puente-fila b { text-align: right; }
.puente-track { background: var(--fondo); border-radius: 2px; height: 10px; overflow: hidden; }
.puente-bar { height: 100%; border-radius: 2px; }
.puente-bar.pos { background: var(--verde); }
.puente-bar.neg { background: var(--rojo); }
.puente-total { font-size: 12px; font-weight: 700; margin-top: 8px; text-align: right; color: var(--tinta); }

/* puente destacado: protagonista visual de "Por que cambio el volumen?"
   (PROPUESTA_DASHBOARD_OBJETIVO 5.6) */
.puente-destacado {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 18px 20px; box-shadow: var(--sombra);
}
.puente-destacado-tit { font-size: 14px; font-weight: 700; color: var(--tinta); }

/* estado vacio util: nunca un panel en blanco */
.vacio-util {
  background: var(--panel); border: 1px dashed var(--borde); border-radius: 10px;
  padding: 18px 20px; color: var(--tinta-suave); font-size: 13px;
}

/* toggle "ver comparativo" del grafico grande */
.chip-toggle-comparativo { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.chips-dim { margin-bottom: 10px; }
.dash-controles-der { display: flex; align-items: center; gap: 10px; }
.config-casillas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 18px; margin-bottom: 10px;
}
.config-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-suave); margin: 6px 0 8px; }

/* tiles clickeables del flujo + lista desplegable */
button.tile { cursor: pointer; font: inherit; color: inherit; text-align: left; }
button.tile:hover { background: var(--hover-fila); }
.tile-abierto { outline: 2px solid var(--primario); }
.lista-flujo { margin-top: 14px; }

/* heatmap equipo x dia de la semana */
.hm-tabla td, .hm-tabla th { text-align: center; }
.hm-tabla td:first-child, .hm-tabla th:first-child { text-align: left; }
.hm-celda { font-size: 12px; font-weight: 600; }
.hm-celda.hm-ok { background: var(--verde-bg); color: var(--verde-tinta); }
.hm-celda.hm-medio { background: var(--ambar-bg); color: var(--ambar-tinta); }
.hm-celda.hm-mal { background: var(--rojo-bg); color: var(--rojo); }
.hm-celda.hm-nd { background: var(--neutro-bg); color: var(--tinta-suave); }
.hm-celda.hm-clic { cursor: pointer; }
.hm-celda.hm-clic:hover { outline: 2px solid var(--primario); outline-offset: -2px; }
.hm-celda.hm-abierta { outline: 2px solid var(--primario); outline-offset: -2px; }
.hm-drill-cab { margin: 12px 0 8px; font-size: 13px; }
.hm-drill-cab .chip { margin-left: 6px; }

/* ---------- TABLA VIVA (tablas.js): lo que trae toda tabla del CIOS ----------
   Orden por columna, ancho arrastrable y buscador. El encabezado pegajoso ya
   lo da la regla `th { position: sticky }` de mas abajo. */

/* orden por columna (click en el encabezado) */
.th-ordenable { cursor: pointer; user-select: none; position: relative; }
.th-ordenable:hover { text-decoration: underline; }
.th-ordenable.orden-desc::after { content: " \25BE"; }
.th-ordenable.orden-asc::after { content: " \25B4"; }

/* asa de ancho: franja invisible sobre el borde derecho del encabezado. Se
   revela al pasar por la fila de encabezados para no ensuciar la tabla. */
.tv-asa {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 2;
}
.tv-asa::after {
  content: ""; position: absolute; top: 20%; right: 3px; width: 1px; height: 60%;
  background: var(--borde-fuerte); opacity: 0; transition: opacity .12s;
}
thead:hover .tv-asa::after { opacity: .7; }
.tv-asa:hover::after { opacity: 1; background: var(--primario); width: 2px; }
/* mientras se arrastra, el cursor manda en toda la pagina y no se selecciona
   texto por accidente */
body.tv-redimensionando { cursor: col-resize; user-select: none; }

/* barra de busqueda de la tabla */
.tv-barra {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 8px; flex-wrap: wrap;
}
.tv-buscador {
  flex: 0 1 340px; min-width: 180px; margin: 0;
  padding: 7px 11px; font: inherit; font-size: 13px;
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px;
}
.tv-buscador:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
.tv-contador { font-size: 12px; color: var(--tinta-suave); }
tr.tv-oculta { display: none; }

/* drill-down generico: subcanal/rubro -> vendedores/productos -> clientes */
.actuar-panel.ancho { grid-column: 1 / -1; }
.fila-vend, .fila-drill { cursor: pointer; }
.fila-vend:hover td, .fila-drill:hover td { background: var(--hover-fila); }
.celda-chev { width: 18px; }
.cli-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
.cli-tabs button {
  border: 1px solid var(--borde); background: var(--panel); color: var(--tinta);
  border-radius: 14px; padding: 4px 12px; font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.cli-tabs button.activa {
  background: var(--primario-tenue); color: var(--primario-osc);
  border-color: var(--primario-tenue-borde);
  box-shadow: inset 0 -2px 0 var(--primario);
}
.det-eq-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 4px 6px; color: var(--tinta-suave); font-size: 11px;
}
.btn-mini { padding: 3px 10px; font-size: 11px; }
.cli-panel { padding: 4px 2px 8px; }
.cli-panel h5 { font-size: 12px; margin: 10px 0 6px; }
.cli-resumen {
  background: var(--hover-fila); border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; margin: 4px 0 8px;
}
.cli-resumen .sube { color: var(--verde); }
.cli-resumen .baja { color: var(--rojo); }
.tag-estado {
  border-radius: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--neutro-bg); color: var(--tinta-suave); white-space: nowrap;
}
.tag-estado.rojo { background: var(--rojo-bg); color: var(--rojo); }
.tag-estado.ambar { background: var(--ambar-bg); color: var(--ambar-tinta); }
.tag-estado.verde { background: var(--verde-bg); color: var(--verde-tinta); }

/* card que baja al detalle accionable */
.card-link { cursor: pointer; }
.card-link:hover { border-color: var(--primario); }
.card-cta { margin-top: 8px; font-size: 11px; color: var(--primario); font-weight: 600; }
/* el periodo se lee como chip de tinta roja, no como boton (Red Ink Rule) */
.pill-select {
  width: auto; margin: 0; border-radius: 999px; padding: 7px 16px;
  font-weight: 600; color: var(--primario-osc); background: var(--primario-tenue);
  border: 1px solid var(--primario-tenue-borde);
  cursor: pointer; font-size: 14px;
}
.pill-select.suave { background: var(--panel); color: var(--tinta); border: 1px solid var(--borde); font-weight: 500; }
/* selector "Objetivo" (kgs) del modo manual: mismo lenguaje visual que los
   pill-select, pero editable */
.pill-input {
  width: 120px; margin: 0; border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 500; color: var(--tinta); background: var(--panel);
  border: 1px solid var(--borde);
}
.dash-select-label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; color: var(--tinta-suave); font-weight: 500;
}
.dash-cabecera-der { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.datos-jobs {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px;
}
.datos-jobs button { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.datos-jobs button:disabled { opacity: .55; cursor: wait; }
.datos-jobs .ico { width: 14px; height: 14px; }
.datos-jobs .nota { margin: 0; font-size: 11px; max-width: 220px; }

/* ---- dos secciones fijas del dashboard (PROPUESTA_DASHBOARD_OBJETIVO):
   GESTION "voy a cumplir?" arriba, DIAGNOSTICO "que explica el resultado?"
   abajo. El encabezado se oculta solo (JS) si sus bloques quedan todos
   apagados en Personalizar. ---- */
.dash-seccion { margin-bottom: 8px; }
/* Titulo de SECCION: un escalon arriba de los h3 (16px) de los bloques que
   agrupa, para que la jerarquia seccion > bloque se lea de un golpe. */
.dash-seccion-titulo {
  font-size: 18px; font-weight: 600; color: var(--tinta);
  display: flex; align-items: center; gap: 10px; margin: 28px 0 14px;
}
.dash-seccion:first-of-type .dash-seccion-titulo { margin-top: 0; }

/* ---- MODO MAQUETA: reordenar / plegar / ancho de los bloques en vivo ----
   Solo gerencia y admin (ver maqIniciar en app.js). La seccion pasa a
   GRILLA de 6 columnas unicamente cuando hace falta (modo activo o algun
   bloque con ancho parcial); si no, conserva el flujo vertical de siempre
   con sus margenes exactos. El alto de fila no se iguala entre vecinos
   (align-items: start) para que un bloque corto no se estire. ---- */
.dash-seccion.dash-grilla {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 16px; align-items: start;
}
.dash-seccion.dash-grilla > * { grid-column: span 6; min-width: 0; }
.dash-grilla > .maq-ancho-4 { grid-column: span 4; }
.dash-grilla > .maq-ancho-3 { grid-column: span 3; }
.dash-grilla > .maq-ancho-2 { grid-column: span 2; }
@media (max-width: 900px) {           /* en pantalla chica todo vuelve a 1/1 */
  .dash-seccion.dash-grilla > * { grid-column: span 6; }
}

/* Red Ink Rule: la barra no se tiñe de rojo; lo activo lo marca la regla
   de margen (la firma de la casa) sobre la capa neutra fria */
.maq-modo .maq-barra {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  padding: 4px 8px; border: 1px dashed var(--borde); border-radius: 8px;
  border-left: 3px solid var(--primario);
  background: var(--fondo-suave); font-size: 12px;
}
.maq-modo .maq-asa { cursor: grab; display: flex; color: var(--primario); }
.maq-modo .maq-asa .ico { width: 16px; height: 16px; }
.maq-modo .maq-nombre {
  font-weight: 600; color: var(--primario); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maq-modo .maq-btn {
  border: 1px solid var(--borde); background: var(--panel); color: inherit;
  border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.maq-modo .maq-btn:hover { border-color: var(--primario); color: var(--primario); }

/* el bloque en si, mientras dura la maqueta */
.maq-modo .dash-seccion > [id^="dash-"]:not(.oculto-bloque) {
  outline: 1px dashed var(--borde); outline-offset: 4px; border-radius: 8px;
}
.maq-modo .maq-arrastrando { opacity: .45; }
/* plegado: se ve solo el asa, para poder mirar el resto del layout */
.maq-modo .maq-plegado > *:not(.maq-barra) { display: none; }

/* tarjetas de KPI dentro de la maqueta: se arrastran para reordenar y se
   quitan con el boton (vuelven desde Personalizar) */
.maq-modo #dash-cards > .card { position: relative; cursor: grab; }
.maq-modo #dash-cards > .card.maq-arrastrando { opacity: .45; }
.maq-card-borrar {
  position: absolute; top: 6px; right: 6px;
  border: 1px solid var(--borde); background: var(--panel); color: inherit;
  border-radius: 6px; padding: 1px 7px; font-size: 11px; cursor: pointer;
}
.maq-card-borrar:hover { border-color: var(--rojo); color: var(--rojo); }

/* panel de datos (Chess / CIOS / calendario): plegable siempre, reubicable
   dentro de la maqueta */
.jobs-plegar {
  border: 1px solid var(--borde); background: var(--panel); color: inherit;
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.jobs-plegar:hover { border-color: var(--primario); color: var(--primario); }
.datos-jobs.jobs-plegado > *:not(.jobs-plegar) { display: none; }
.jobs-dock { display: flex; justify-content: flex-end; margin: 0 0 12px; }

.maq-barra-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-left: 3px solid var(--primario);   /* la regla de margen */
}
.maq-top-tit { font-weight: 700; color: var(--primario); font-size: 13px; }
.maq-top-ayuda { flex: 1; font-size: 12px; opacity: .85; min-width: 220px; }
.maq-top-acciones { display: flex; gap: 8px; }
#dash-maqueta.activo { border-color: var(--primario); color: var(--primario); }

.dash-hero {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 18px 22px;
}
.panel-objetivo { margin-bottom: 18px; }

/* bloque "Medidor de cumplimiento" (gauge graduado de Dashboard 2): medidor
   semicircular de la proyeccion de cierre, junto a un texto de contexto. */
#dash-gauge { margin-bottom: 18px; }
#dash-gauge:empty { display: none; }
.gauge-panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px 22px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  box-shadow: var(--sombra);
}
.gauge-fig { flex: none; }
.gauge-svg { width: 170px; height: 98px; display: block; }
.gauge-valor { font-size: 26px; font-weight: 700; fill: var(--tinta); }
.gauge-info { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.gauge-etq {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.gauge-sub { font-size: 14px; color: var(--tinta); }
.gauge-sub .sube { color: var(--verde-tinta); font-weight: 600; }
.gauge-sub .baja { color: var(--rojo); font-weight: 600; }
.gauge-ritmos { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-suave); }
.gauge-ritmos b { color: var(--tinta); }
.hero-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hero-tit { font-size: 13px; color: var(--tinta-suave); }
.hero-pct { font-size: 34px; font-weight: 700; }
.hero-pct.verde { color: var(--verde); } .hero-pct.ambar { color: var(--ambar-tinta); } .hero-pct.rojo { color: var(--rojo); }
.hero-vacio { color: var(--tinta-suave); font-size: 13px; padding: 16px 0; }

/* secundarios del hero: Objetivo | Actual | Faltan | Proyeccion */
.hero-secundarios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-top: 16px;
}
.hero-sec { display: flex; flex-direction: column; gap: 2px; }
.hero-sec span { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .4px; }
.hero-sec b { font-size: 16px; color: var(--tinta); font-weight: 700; }
.hero-sec b small { font-size: 12px; font-weight: 500; color: var(--tinta-suave); }

/* chips debajo del hero: Actualizado | Pacing | Riesgo | Vara | MRF-DAN.
   chip-pacing reusa el estilo de Analisis (.chip.chip-pacing); aca ademas
   es clickeable (abre "evolucion dia a dia"). */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-chips .chip-pacing { cursor: pointer; }
.hero-chips .chip-pacing:hover { background: var(--primario-tenue-hover); }

.barra-progreso.alta { height: 12px; }
.barra-progreso div.verde { background: var(--verde); }
.barra-progreso div.ambar { background: var(--ambar); }
.barra-progreso div.rojo { background: var(--rojo); }

.dash-resumen {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 22px;
}
.resumen-titulo { font-size: 15px; color: var(--tinta); margin: 0 0 14px; font-weight: 700; }

.dash-controles { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-controles .chips { margin: 0; }
.dash-controles-izq { display: flex; flex-direction: column; gap: 8px; }
.chips-prov button { padding: 4px 12px; font-size: 12px; }
.canal-select { width: auto; margin: 0; border-radius: 8px; }

.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primario-tenue); color: var(--primario);
  display: flex; align-items: center; justify-content: center; flex: none; }
.card-ico .ico { width: 20px; height: 20px; }
.card-nombre { font-size: 14px; color: var(--tinta-suave); }
.card-valor { font-size: 26px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-valor .u { font-size: 15px; font-weight: 600; color: var(--tinta-suave); margin-left: -4px; }
.card-valor .tendencia { font-size: 15px; margin-left: auto; }
.card-pie { font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }
/* detalle discreto de la card: variacion diaria vs la referencia, o el
   ritmo diario cuando no hay variacion (conteos). NO es el protagonista de
   la card (PROPUESTA_DASHBOARD_OBJETIVO 5.2: sin mes base a la vista). */
.card-vs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-suave); margin-top: 4px; }
.card-objetivo { margin-top: 14px; }
.card-obj-fila { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-suave); margin-bottom: 5px; }
.card-obj-fila b { color: var(--tinta); }
.card-obj-fila.sub { opacity: .8; }
.card-obj-fila.sub b { color: var(--tinta); font-weight: 600; }
/* card sin objetivo APLICABLE al recorte: en vez de una barra que mentiria,
   la card dice por que no hay vara propia (el objetivo publicado es de la
   distribuidora entera). */
.card-objetivo.sin-objetivo { border-top: 1px dashed var(--borde); padding-top: 8px; }
.card-obj-nota { font-size: 11px; line-height: 1.35; color: var(--tinta-suave); }
.dash-footer { font-size: 12px; color: var(--tinta-suave); background: var(--aviso-bg);
  border: 1px solid var(--aviso-borde); border-radius: 8px; padding: 12px 16px; margin: 18px 0 0; }

@media (max-width: 720px) {
  .dash-cabecera-der { width: 100%; }
}

/* ---------- contenido ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 26px 22px 60px; }

/* Pie de autoria y propiedad de los datos (config/autoria.json via /acerca).
   Discreto a proposito: es una constancia permanente, no un aviso. */
.pie-app {
  /* el padding inferior deja lugar al boton flotante del asistente: el aviso
     de autoria es lo ultimo del documento y quedaba tapado al llegar al fondo */
  max-width: 1200px; margin: 0 auto; padding: 18px 22px 90px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 12px; line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.pie-app .pie-datos { opacity: .85; }
@media (max-width: 760px) { .pie-app { padding: 16px 12px 26px; } }
/* jerarquia fija: Headline 24/700 (titulo de vista), Title 18/600 (bloque) */
.vista h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.vista h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 26px 0 10px; }
/* el titulo DENTRO de la cabecera de un panel no lleva el margen de seccion:
   `.grafico-cab h3 { margin: 0 }` empataba en especificidad con `.vista h3` y
   perdia por orden de archivo, y el encabezado de cada panel arrancaba con 26px
   de aire muerto arriba (se ve en todo bloque con .grafico-cab, no solo aca) */
.vista .grafico-cab h3 { margin: 0; }
.chip {
  background: var(--panel); border: 1px solid var(--borde); color: var(--tinta-suave);
  font-size: 12px; font-weight: 400; border-radius: 999px; padding: 3px 12px;
}
.cargando { color: var(--tinta-suave); padding: 30px 0; }
.nota { color: var(--tinta-suave); font-size: 13px; margin-bottom: 14px; }

.kpi-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.kpi-tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px 18px;
}
.kpi-tarjeta .fuente { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .5px; }
.kpi-tarjeta .nombre { font-size: 13px; color: var(--tinta-suave); margin-top: 8px; }
.kpi-tarjeta .valor { font-size: 26px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 10px; }

/* comparativo vs mes anterior */
.vista h3.primera { margin-top: 0; }
.kpi-anterior { font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }
.tendencia { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; }
.tendencia.sube { color: var(--verde); }
.tendencia.baja { color: var(--rojo); }
.flecha { width: 0; height: 0; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.flecha.sube { border-bottom: 9px solid var(--verde); }
.flecha.baja { border-top: 9px solid var(--rojo); }

.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.punto.verde { background: var(--verde); }
.punto.ambar { background: var(--ambar); }
.punto.rojo  { background: var(--rojo); }

/* Semantica base sube/baja: el color acompaña siempre a un signo o texto
   (nunca es la unica señal). Las reglas mas especificas (hero, gauge,
   tendencia) la refinan sin cambiar el significado. */
.sube { color: var(--verde); }
.baja { color: var(--rojo); }

.mini-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--borde); background: var(--panel); }
.mini-badge.b-mal { color: var(--rojo); border-color: var(--rojo); }

/* Mi cartera (perfil vendedor analitico) */
.mc-barra { width: 120px; height: 10px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; }
.mc-barra div { height: 100%; background: var(--grafico-dato); }
#mc-evolucion, #mc-oportunidades { margin-top: 18px; }

/* Mi proveedor (perfil ejecutivo comercial) */
#mp-rubros, #mp-penetracion, #mp-candidatos { margin-top: 18px; }
.mp-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .mp-grilla { grid-template-columns: 1fr; } }
td.neg { color: var(--rojo); }
td.pos { color: var(--verde); }

.insights { list-style: none; }
.insights li {
  background: var(--panel); border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px;
}

.fila-control { display: flex; gap: 10px; margin-bottom: 18px; max-width: 640px; }
.fila-control input, .fila-control select { flex: 1; margin-top: 0; }

.tabla-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--borde); }
/* encabezado = Label sobre la capa fria */
th { background: var(--th-bg); color: var(--tinta-suave); font-weight: 600;
  font-size: 12px; letter-spacing: .02em; position: sticky; top: 0; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: var(--hover-fila); }
tr.fila-click { cursor: pointer; }

/* ---------- analisis ---------- */
/* Cabecera de grupo (KGs diarios / KGs totales / Importe...): centrada sobre
   sus tres columnas, y separador vertical donde ARRANCA cada grupo para que
   se lea donde termina uno y empieza el siguiente. */
/* Regla de alineacion de la casa: todo centrado (IDs, numeros, porcentajes y
   sus encabezados); SOLO las columnas de texto/nombre van a la izquierda. */
.tabla-ana th, .tabla-ana td,
.tabla-ana th:first-child, .tabla-ana td:first-child { text-align: center; }
.tabla-ana th.col-txt, .tabla-ana td.col-txt { text-align: left; }
.tabla-ana td.celda-detalle { text-align: left; }

.tabla-scroll th.ana-grupo { text-align: center; }
.tabla-scroll th.ana-grupo-ini,
.tabla-scroll td.ana-grupo-ini { border-left: 2px solid var(--borde-fuerte); padding-left: 20px; }

/* chip de pacing del resultado: mismo lenguaje visual que el del dashboard */
.ana-chips { margin: 0 0 12px; }
.chip.chip-pacing {
  background: var(--primario-tenue); color: var(--primario);
  border-color: var(--primario-tenue-borde); font-weight: 600;
}
.panel-filtros {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 18px; margin-bottom: 22px;
}
.filtros-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.filtros-grilla label { margin-bottom: 0; }
.panel-filtros .fila-control { margin-bottom: 0; }
.panel-filtros .fila-control.compacta { margin-top: 6px; max-width: 640px; }
#ana-sku-chips { margin: 10px 0 4px; }
#ana-sku-chips:empty { display: none; }

/* ---------- cobertura ---------- */
.cob-target { margin-bottom: 12px; }
#cob-art-chips:empty { display: none; }
#cob-art-chips { margin-top: 8px; }
select[multiple] { padding: 4px; }
select[multiple] option { padding: 3px 6px; }
.cob-panel {
  display: grid; grid-template-columns: 220px 1fr; gap: 22px;
  align-items: center; margin-bottom: 8px;
}
.cob-donut { text-align: center; }
.donut { width: 180px; height: 180px; }
.donut-fondo { fill: none; stroke: var(--borde); stroke-width: 16; }
.donut-valor { fill: none; stroke: var(--grafico-dato); stroke-width: 16; stroke-linecap: round; }
.donut-num { font-size: 26px; font-weight: 700; fill: var(--tinta); text-anchor: middle; }
.donut-etq { font-size: 11px; fill: var(--tinta-suave); text-anchor: middle; text-transform: uppercase; letter-spacing: .5px; }
.cob-donut-pie { font-size: 12px; color: var(--tinta-suave); margin-top: 4px; max-width: 200px; margin-inline: auto; }
.cob-barras-wrap h3.primera { margin-top: 0; }
.cob-barras { display: flex; flex-direction: column; gap: 8px; }
.cob-fila-barra { display: grid; grid-template-columns: 180px 1fr 52px; align-items: center; gap: 10px; }
.cob-barra-etq { font-size: 13px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-barra-track { background: var(--fondo); border-radius: 4px; height: 16px; overflow: hidden; }
.cob-barra-fill { height: 100%; background: var(--grafico-dato); border-radius: 4px; min-width: 2px; }
.cob-barra-val { font-size: 13px; font-weight: 600; color: var(--tinta); text-align: right; }
@media (max-width: 720px) {
  .cob-panel { grid-template-columns: 1fr; }
  .cob-fila-barra { grid-template-columns: 110px 1fr 48px; }
}

/* ---------- chat ---------- */
.chat-historial { margin-bottom: 16px; }
.chat-item { margin-bottom: 14px; }
.chat-pregunta { font-weight: 600; margin-bottom: 4px; }
.chat-respuesta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 12px 16px;
}
.chat-fuente { font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }

/* ---------- perfil vendedor ---------- */
.perfil-cabecera { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 16px; }
.perfil-cabecera .nombre { font-size: 20px; font-weight: 700; }
.objetivo-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.objetivo-tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; }
.objetivo-tarjeta h4 { font-size: 13px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.objetivo-tarjeta .grande { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.objetivo-tarjeta .detalle { font-size: 13px; color: var(--tinta-suave); margin-top: 6px; }
.barra-progreso { height: 8px; background: var(--fondo); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.barra-progreso div { height: 100%; border-radius: 4px; background: var(--grafico-dato); }
.mini-tabla { width: 100%; margin-top: 8px; font-size: 12px; }
.mini-tabla td { padding: 4px 6px; border: 0; }

/* ---------- chips y dias ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips button {
  background: var(--panel); border: 1px solid var(--borde); color: var(--tinta);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.chips button:hover { border-color: var(--primario); color: var(--primario); }
/* chip ACTIVO: tinte rojo + regla de margen inferior (la firma) */
.chips button.activa {
  background: var(--primario-tenue); color: var(--primario-osc);
  border-color: var(--primario-tenue-borde); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primario);
}
.chips .contador { color: inherit; opacity: .7; font-size: 12px; margin-left: 4px; }
.fila-compra { display: flex; gap: 14px; font-size: 13px; color: var(--tinta-suave); margin: 8px 0 14px; }
.fila-compra b { color: var(--tinta); }

/* ---------- alertas ---------- */
/* badge del nav (pendientes de Alertas): pildora legible que no grita;
   dentro del item del nav lateral se va sola al borde derecho */
.badge {
  background: var(--acento); color: var(--tinta-contraste); border-radius: 999px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 7px; margin-left: auto; flex: none;
}
.check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tinta); font-size: 14px; }
.check input { width: auto; margin: 0; }
.btn-secundario.oscuro { color: var(--tinta-suave); border-color: var(--borde); background: var(--panel); }
.alerta-item {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.alerta-item.leida { opacity: .55; }
.alerta-cuerpo { flex: 1; }
.alerta-mensaje { font-size: 14px; }
.alerta-meta { font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }
/* el listado de la alerta (que clientes, que rubros): plegado por default */
.alerta-detalle { margin-top: 4px; }
.alerta-detalle summary {
  cursor: pointer; font-size: 12px; color: var(--tinta-suave); font-weight: 600;
}
.alerta-detalle ul { margin: 4px 0 0 16px; font-size: 13px; }
.alerta-detalle li { margin: 2px 0; }

/* ---------- personalizacion de la bandeja de alertas ---------- */
.alcfg { display: flex; flex-wrap: wrap; gap: 26px; margin: 14px 0 4px; }
.alcfg-col { min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.alcfg-col.alcfg-tipos { min-width: 300px; }
.alcfg-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-suave); margin-bottom: 2px;
}
.alcfg-grupo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.alcfg-grupo-tit {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--tinta);
  border-bottom: 1px solid var(--borde); padding-bottom: 3px;
}
.alcfg-grupo-tit .btn-mini { margin-left: 0; font-weight: 400; }
.alcfg-grupo-tit .btn-mini:first-of-type { margin-left: auto; }
.alcfg-n {
  font-size: 11px; font-weight: 600; color: var(--tinta-suave);
  background: var(--neutro-bg); border-radius: 10px; padding: 1px 7px;
}
.alcfg-arbol {
  max-height: 300px; overflow: auto; border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px; background: var(--panel);
}
.alcfg-arbol:empty { display: none; }
.alcfg-eq-fila { padding: 4px 2px; }
.alcfg-eq-nom { font-weight: 600; }
.alcfg-eq-fila .alcfg-n { margin-left: auto; }
.alcfg-plegar {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--tinta-suave); display: inline-flex; align-items: center;
}
.alcfg-hijos {
  padding-left: 12px; margin: 2px 0 6px 14px;
  border-left: 2px solid var(--borde); display: flex; flex-direction: column; gap: 4px;
}
.alcfg-solo-lectura {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--tinta-suave);
}
.nota-inline { font-size: 12px; color: var(--tinta-suave); }

@media (max-width: 720px) {
  .barra { flex-wrap: wrap; padding: 10px; gap: 8px 10px; }
  main { padding: 16px 12px 40px; }
}

/* ---------- pulido transversal ---------- */
/* Elevacion sutil: los paneles se despegan del fondo (funciona en los 3 temas
   via --sombra; el borde queda como definicion, la sombra da profundidad) */
.card, .kpi-tarjeta, .objetivo-tarjeta, .actuar-panel, .panel-grafico,
.panel-filtros, .dash-hero, .dash-resumen, .tile, .puente-destacado,
.tabla-scroll, .senales-panel, .alerta-item, .chat-respuesta, .torre-tile {
  box-shadow: var(--sombra);
}

/* La ultima fila de una tabla no duplica el borde del contenedor */
.tabla-scroll tbody tr:last-child > td { border-bottom: 0; }

/* Encabezado sticky por encima del contenido al scrollear */
.tabla-scroll th { z-index: 1; }

/* Numeros comparables con cifras tabulares: columnas de tablas y numeros
   grandes de cards/tiles alinean digito a digito en los 3 temas */
table, .card-valor, .kpi-tarjeta .valor, .tile-num, .f360-tile-num,
.hero-pct, .hero-sec b, .kpi-chip .kpi-num, .torre-kg, .rep-chip b {
  font-variant-numeric: tabular-nums;
}

/* Foco visible al navegar con teclado (accesibilidad; no afecta el mouse) */
button:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px;
}
.barra button:focus-visible, .barra select:focus-visible { outline-color: var(--primario); }
.barra input:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-tenue);
}
.barra .btn-secundario:hover { background: var(--barra-activa); }

/* Transiciones cortas solo en lo interactivo */
#nav button, .chips button, .cli-tabs button, .btn-primario, .btn-secundario,
.pill-select, button.tile, .card-link, .chip-pacing, .tema-select {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* ---------- vista Sistema (perfil desarrollador) ---------- */

.sis-panel { margin-top: 14px; }
.sis-panel h3 { margin: 18px 0 6px; }

/* filas de controles de la vista Sistema (periodo/hecho, filtros de logs):
   varios grupos en una sola fila que debe poder colapsar en pantallas
   angostas sin desbordar el body (los anchos van dentro de .sis-* que
   scrollean solos, esta fila NO). */
#sis-panel-modelo > .fila-control.compacta,
#sis-panel-logs > .fila-control.compacta {
  flex-wrap: wrap; row-gap: 10px; max-width: none;
}
#sis-panel-modelo > .fila-control.compacta .nota { margin: 0; flex: 1 1 240px; }
#sis-log-origen { margin-bottom: 0; }

/* esquema estrella: el SVG se dibuja desde el metadata del DW */
.sis-estrella {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; overflow-x: auto; box-shadow: var(--sombra); margin-top: 10px;
}
.sis-estrella svg { display: block; min-width: 760px; width: 100%; height: auto; }
.sis-arista { stroke: var(--grafico-ref); stroke-width: 1.2; opacity: .55; }
.sis-arista-out { stroke-dasharray: 5 4; }
.sis-arista-txt {
  font-size: 11px; fill: var(--tinta-suave); text-anchor: middle;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px;
}
/* las cajas se dibujan un tono por debajo del panel (fondo) para que se
   distingan del contenedor, no solo del borde */
.sis-nodo { cursor: pointer; }
.sis-nodo rect {
  fill: var(--fondo); stroke: var(--borde); stroke-width: 1.4;
  transition: fill .12s ease, stroke .12s ease;
}
.sis-nodo:hover rect { stroke: var(--primario); fill: var(--primario-tenue); }
.sis-nodo text { text-anchor: middle; }
.sis-nodo-nombre { font-size: 13px; font-weight: 600; fill: var(--tinta); }
.sis-nodo-meta { font-size: 11px; fill: var(--tinta-suave); }
/* la tabla de hechos se dibuja en tinta plena (protagonista, no alarma) */
.sis-nodo-fact rect { fill: var(--grafico-dato); stroke: var(--grafico-dato); }
.sis-nodo-fact:hover rect { fill: var(--grafico-dato); stroke: var(--grafico-dato); }
.sis-nodo-fact .sis-nodo-nombre { fill: var(--tinta-contraste); font-size: 14px; }
.sis-nodo-fact .sis-nodo-meta { fill: var(--tinta-contraste); opacity: .8; }
/* outrigger: mismo lenguaje del borde punteado que su arista (segundo
   anillo); el texto NO se atenua, solo el borde, para no perder contraste */
.sis-nodo-outrigger rect { stroke-dasharray: 4 3; }

.sis-rol-clave { color: var(--primario); font-weight: 600; }
.sis-rol-medida { color: var(--verde-tinta); font-weight: 600; }

/* matriz bus */
.sis-bus-celda { text-align: center; }
.sis-bus-si {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--grafico-dato);
}
.sis-bus-hecho {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--primario); cursor: pointer; text-decoration: underline dotted;
}

/* log manager: lectura tipo tail -f */
.sis-log {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 8px 12px; max-height: 62vh; overflow: auto; box-shadow: var(--sombra);
  font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px;
}
.log-linea {
  display: flex; gap: 10px; padding: 2.5px 0; align-items: baseline;
  border-bottom: 1px dashed var(--borde);
}
.log-linea:last-child { border-bottom: 0; }
.log-ts { color: var(--tinta-suave); flex: none; width: 148px; }
.log-nivel { flex: none; width: 66px; font-weight: 700; color: var(--tinta-suave); }
.log-logger { flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--tinta-suave); }
.log-msg { white-space: pre-wrap; word-break: break-word; }
.log-linea.nivel-WARNING .log-nivel { color: var(--ambar-tinta); }
.log-linea.nivel-ERROR .log-nivel, .log-linea.nivel-CRITICAL .log-nivel { color: var(--rojo); }
.log-linea.nivel-ERROR, .log-linea.nivel-CRITICAL { background: var(--rojo-bg-suave); }
/* linea de continuacion (traceback multilinea): sin ts/nivel/logger propios,
   se indenta bajo esas columnas y hereda el color de la entrada que abre el
   bloque (ej. un ERROR se lee agrupado con su traceback, no como texto suelto) */
.log-continuacion { padding-left: 234px; opacity: .9; }
.sis-warn { color: var(--ambar-tinta); font-weight: 600; }
.sis-err { color: var(--rojo); font-weight: 600; }

/* maestros / salud */
.sis-falta td { color: var(--rojo); }
.sis-suave { color: var(--tinta-suave); }
.sis-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; }
/* columnas de prosa (descripcion, usado por): envuelven en vez de forzar
   una tabla kilometrica solo por una oracion larga */
.sis-wrap { white-space: normal; min-width: 220px; }
.sis-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 10px;
}
.sis-card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; box-shadow: var(--sombra);
}
.sis-card .etiqueta { font-size: 12px; color: var(--tinta-suave); }
.sis-card .valor { font-size: 15px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }

/* selector de paquete de iconos (Sistema > Apariencia): cada paquete se
   muestra COMPLETO para poder compararlos icono a icono antes de elegir */
.ico-pack {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px; box-shadow: var(--sombra);
}
.ico-pack.activo { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario), var(--sombra); }
.ico-pack-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ico-pack-cab .nota { margin: 2px 0 0; }
.ico-pack-cab button:disabled { opacity: .55; cursor: default; }
.chip-ok {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--verde-bg); color: var(--verde-tinta);
}
.ico-muestras {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-top: 12px;
}
.ico-muestra { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ico-muestra .nota { margin: 0; font-size: 11px; }
/* matriz de permisos (Sistema > Permisos): misma gramatica que el editor de
   estructura -- color = decision nuestra, punteado = borrador sin guardar */
#sis-panel-permisos .aviso-linea-roja {
  border-left: 3px solid var(--primario); background: var(--primario-tenue);
  padding: 9px 12px; border-radius: 0 8px 8px 0; margin: 10px 0;
}
#sis-panel-permisos h4 { margin: 22px 0 4px; }
#sis-panel-permisos .cap-tabla td, #sis-panel-permisos .cap-tabla th { padding: 5px 8px; }
#sis-panel-permisos .cap-tabla .nota { margin: 2px 0 0; }
#sis-panel-permisos .cap-id { font-size: 11px; color: var(--tinta-suave); }
#sis-panel-permisos td.cap-cel { position: relative; }
#sis-panel-permisos td.cap-cel.decidido { background: var(--verde-bg); }
#sis-panel-permisos td.cap-cel.borrador { box-shadow: inset 0 0 0 2px var(--acento); }
#sis-panel-permisos .cap-chk { width: 16px; height: 16px; cursor: pointer; }
#sis-panel-permisos .cap-chk:disabled { cursor: default; opacity: .6; }
#sis-panel-permisos .cap-candado { color: var(--tinta-suave); font-weight: 700; margin-left: 3px; }
#sis-panel-permisos .est-btn { font-size: .82em; padding: 2px 7px; cursor: pointer; }
#sis-panel-permisos .est-btn:disabled { opacity: .45; cursor: default; }

.sis-metodo {
  display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px;
  font-weight: 700; background: var(--neutro-bg); color: var(--tinta-suave);
}
.sis-metodo-get { background: var(--verde-bg); color: var(--verde-tinta); }
.sis-metodo-post { background: var(--primario-tenue); color: var(--primario); }
.sis-metodo-delete { background: var(--rojo-bg); color: var(--rojo); }

/* linaje de datos (solapa Linaje de la vista Sistema) */
.sis-lin-etapa {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  fill: var(--tinta-suave); text-anchor: middle;
}
.sis-nodo-falta rect { stroke: var(--rojo); }
.sis-nodo-falta .sis-nodo-nombre { fill: var(--rojo); }

/* ----- calendario laboral (modal de gerencia: dias habiles del mes) ----- */
.cal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
}
.cal-panel {
  position: relative;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 18px 20px; width: min(440px, 94vw);
  box-shadow: var(--sombra-alta);
}
.cal-acciones { display: flex; align-items: center; gap: 8px; }
.cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-cabecera h3 { margin: 0; font-size: 16px; }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.cal-nav strong { min-width: 140px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-enc {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--tinta-suave); padding: 2px 0; letter-spacing: .04em;
}
.cal-vacio { min-height: 34px; }
.cal-dia {
  position: relative;
  min-height: 34px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); color: var(--tinta); font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.cal-dia:hover:not(:disabled) { border-color: var(--primario); }
.cal-dia.domingo { background: var(--neutro-bg); color: var(--tinta-suave); cursor: default; opacity: .55; }
.cal-dia.nohabil { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo-bg); font-weight: 600; }
.cal-dia.trabajado { background: var(--verde-bg); color: var(--verde-tinta); border-color: var(--verde-bg); font-weight: 600; }

/* marcas informativas (no editables): feriado nacional (punto ambar, aunque
   se trabaje), cierre de mes (borde solido) y ultimo dia de preventa (borde
   punteado). El anillo ambar marca un dia editado sin guardar. */
.cal-dia.feriado { font-weight: 700; }
.cal-dia.feriado::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ambar); box-shadow: 0 0 0 1px var(--panel);
}
.cal-dia.cierre { border: 2px solid var(--azul); }
.cal-dia.preventa { border: 2px dashed var(--azul); }
.cal-dia.editado { box-shadow: inset 0 0 0 2px var(--ambar); }
.cal-pend { color: var(--ambar-tinta); font-weight: 700; }

/* leyenda de referencias del calendario */
.cal-leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 2px;
  font-size: 11px; color: var(--tinta-suave);
}
.cal-ref { display: inline-flex; align-items: center; gap: 5px; }
.cal-mini {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--tinta); font-size: 11px; font-weight: 600;
}
.cal-mini.nohabil { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo-bg); }
.cal-mini.trabajado { background: var(--verde-bg); color: var(--verde-tinta); border-color: var(--verde-bg); }
.cal-mini.es-feriado { font-weight: 700; }
.cal-mini.es-feriado::after {
  content: ""; position: absolute; top: 1px; right: 1px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ambar);
}
.cal-mini.es-cierre { border: 2px solid var(--azul); }
.cal-mini.es-preventa { border: 2px dashed var(--azul); }

/* confirmacion al cerrar con cambios sin guardar (capa sobre el panel) */
.cal-confirm {
  position: absolute; inset: 0; border-radius: 14px;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cal-confirm.oculto { display: none; }
.cal-confirm-caja {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 18px; width: min(340px, 92%); box-shadow: var(--sombra-alta);
}
.cal-confirm-caja p { margin: 0 0 14px; font-size: 14px; }
.cal-confirm-btns { display: flex; flex-direction: column; gap: 8px; }
.cal-confirm-btns button { width: 100%; }

/* ----- bitacora comercial (modal de gerencia: eventos de negocio) -----
   Misma cascara que el calendario laboral (.cal-overlay/.cal-panel/
   .cal-cabecera/.cal-nav); solo lo propio del formulario y la lista. */
.bit-panel { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; }
.bit-form label { font-size: 12px; margin-bottom: 10px; }
.bit-form .fila-control { margin-bottom: 0; }
.bit-form .btn-primario { margin-top: 4px; }
.bit-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.bit-item {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--panel);
}
.bit-item-tipo {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--tinta-suave); background: var(--fondo-suave);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.bit-item-fecha { flex: 0 0 auto; font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.bit-item-cuerpo { flex: 1 1 auto; min-width: 0; }
.bit-item-titulo { font-size: 13px; font-weight: 600; }
.bit-item-detalle { font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }
.bit-item-ambito { font-size: 11px; color: var(--tinta-suave); }
.bit-item-quien { font-size: 11px; color: var(--tinta-suave); }
.bit-item-anular {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--borde);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer;
  color: var(--tinta-suave);
}
.bit-item-anular:hover { background: var(--fondo-suave); color: var(--tinta); }
.bit-vacio { font-size: 13px; color: var(--tinta-suave); padding: 10px 0; }

/* marcas de la bitacora sobre el grafico de evolucion (nunca rojo: es
   contexto, no alarma) */
.bitacora-marca { cursor: default; }
.bitacora-rombo { fill: var(--grafico-ref); opacity: .85; }
.bitacora-rombo:hover { opacity: 1; }

/* ----- Estructura del equipo comercial (vista Equipo) ----- */
#equipo-estructura { margin-top: 28px; }
#equipo-estructura .est-card { margin-top: 14px; }
#equipo-estructura .est-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
#equipo-estructura .chips .chip { padding: 5px 12px; }
#equipo-estructura td.dia-exc { background: var(--ambar-bg); color: var(--ambar-tinta); font-weight: 600; }

/* Editor de estructura: decisiones comerciales sobre el maestro.
   Verde = decision ya guardada; acento punteado = borrador sin confirmar. */
#equipo-editor .est-card { margin-top: 14px; }
#equipo-editor .est-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
#equipo-editor .est-tabla td, #equipo-editor .est-tabla th { padding: 4px 6px; }
#equipo-editor td.est-cel { position: relative; }
#equipo-editor td.est-cel.decidido { background: var(--verde-bg); }
#equipo-editor td.est-cel.decidido::after,
#equipo-editor td.est-cel.borrador::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
}
#equipo-editor td.est-cel.borrador { background: transparent; box-shadow: inset 0 0 0 2px var(--acento); }
#equipo-editor td.est-cel.borrador::after { background: var(--acento); }
#equipo-editor td.est-cel.dia-exc { background: var(--ambar-bg); }
#equipo-editor .est-in { width: 100%; min-width: 92px; font: inherit; padding: 3px 4px; }
#equipo-editor .est-in-corto { min-width: 78px; }
#equipo-editor tr.est-baja { opacity: .5; text-decoration: line-through; }
#equipo-editor .est-btn { font-size: .82em; padding: 2px 7px; margin-right: 4px; cursor: pointer; }
#equipo-editor #est-historial-box { margin-top: 10px; }

/* Bloque opcional del dashboard: corte por canal bajo el hero */
#dash-corte-canales .corte-canales { margin: 2px 0 14px; }
#dash-corte-canales .chip b { font-variant-numeric: tabular-nums; }

/* ---------- Penetracion y No compradores (sub-pestanias de Analisis) ---------- */
/* Analisis responde UNA pregunta con tres lecturas: Tabla (volumen/cobertura),
   Penetracion (cuantos compraron) y No compradores (quienes faltan). */
.subtabs {
  display: flex; gap: 4px; margin: 0 0 16px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;              /* en pantalla angosta scrollean, no rompen */
}
.subtabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 16px; font-size: 15px; font-weight: 600;
  color: var(--tinta-suave); cursor: pointer;
  white-space: nowrap; flex: none;
}
.subtabs button:hover { color: var(--tinta); }
.subtabs button.activa { color: var(--primario); border-bottom-color: var(--primario); }

/* ----- PADRON (censo de entidades) -----
   Los numeros del padron son la referencia compartida del sistema, asi que
   se presentan como titular: chips grandes arriba y, en la escalera de
   conciliacion, la fila canonica resaltada para que se distinga de las
   poblaciones que responden otra pregunta. */
.centro { text-align: center; }
.chips-hero { margin: 4px 0 12px; gap: 10px; }
.chips-hero .chip { font-size: 15px; padding: 8px 14px; }
.chip.chip-fuerte {
  background: var(--primario-tenue); border-color: var(--primario);
  font-weight: 700;
}
tr.pad-canon { background: var(--primario-tenue); }
tr.pad-canon td { font-weight: 600; }

.kpi-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.kpi-chip {
  display: flex; flex-direction: column; align-items: center;
  min-width: 108px; padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
}
.kpi-chip.destacado { border-color: var(--ambar); background: var(--ambar-bg); }
.kpi-chip .kpi-num { font-size: 20px; font-weight: 700; color: var(--tinta); }
.kpi-chip .kpi-etq { font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave); }

/* Rentabilidad del mes (dash-margen): top/bottom rubros lado a lado */
.margen-rubros { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.margen-rubros-col { flex: 1 1 260px; min-width: 260px; }
.margen-rubros-col h4 { margin: 0 0 6px; font-size: 12px;
  color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .03em; }

tr.fila-click.activa { background: var(--primario-tenue); }
/* corte de DIA de visita: el vendedor recorre un dia por vez, la linea marca
   donde empieza cada jornada */
.tabla-nc tbody tr.corte-dia td { border-top: 2px solid var(--borde-fuerte); }
.tabla-nc td.nc-si { background: var(--verde-bg); color: var(--verde-tinta); font-weight: 600; }
.tabla-nc td.nc-no { background: var(--rojo-bg-suave); color: var(--tinta-suave); }

/* --- Sistema: extensiones (DB operacional, ML, constantes, caches) --- */

/* base operacional: cards de tabla en grilla */
.sis-db-grid, .sis-ml-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-top: 10px;
}
.sis-db-card, .sis-ml-card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; box-shadow: var(--sombra);
}
.sis-db-card h4 { margin: 0 0 2px; }
.sis-db-card table { font-size: 13px; }
.sis-db-card .tabla-scroll { border: 0; box-shadow: none; }

/* model cards */
.sis-ml-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sis-ml-desc { font-weight: 600; margin: 4px 0 2px; }
.sis-ml-metrica {
  flex: none; background: var(--verde-bg); color: var(--verde-tinta);
  border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 700;
}

/* constantes: dos columnas que colapsan */
.sis-const-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin-top: 8px;
}
.sis-const-cols h4 { margin: 8px 0 4px; }

/* filas de aviso en tablas (cobertura DW incompleta) */
.sis-warn-fila > td { background: var(--ambar-bg); }

/* toggle de fuente del modelo (reusa .chips) */
#sis-modelo-fuente { margin-bottom: 10px; }

/* ========================================================================
   CATALOGO DE GRAFICOS (graficos.js / PROPUESTA_CATALOGO_GRAFICOS.md)
   Paleta categorica validada (skill dataviz), primitivas nuevas (apilada,
   divergente, dumbbell), galeria y selector de la maqueta. Todo theme-aware.
   ======================================================================== */

/* Paleta CATEGORICA: orden FIJO, nunca ciclada (>7 se pliega en "Otros").
   Para composicion e identidad; NO para magnitud (eso es secuencial). */
:root {
  --cat-1: #2a78d6; --cat-2: #008300; --cat-3: #e87ba4; --cat-4: #eda100;
  --cat-5: #1baf7a; --cat-6: #eb6834; --cat-7: #4a3aa7;
}
:root[data-tema="dark"] {
  --cat-1: #3987e5; --cat-2: #008300; --cat-3: #d55181; --cat-4: #c98500;
  --cat-5: #199e70; --cat-6: #d95926; --cat-7: #9085e9;
}
/* tablero: arranca con el azul de la casa y sigue con el teal/rojo/naranja
   del comp, que es el orden con el que se leyo el pie de canales. */
:root[data-tema="tablero"] {
  --cat-1: #1c3d6e; --cat-2: #16a3ad; --cat-3: #e3122d; --cat-4: #f2892a;
  --cat-5: #37639e; --cat-6: #2f9e52; --cat-7: #8a6fc0;
}
/* torre: el azul informativo abre la serie (es el color del DATO en esta luz),
   despues verde/rojo/ambar del semaforo y los frios para el resto. */
:root[data-tema="torre"] {
  --cat-1: #58a6ff; --cat-2: #3fb950; --cat-3: #f0616d; --cat-4: #d29922;
  --cat-5: #2eb6c0; --cat-6: #a371f7; --cat-7: #7d8794;
}
:root[data-tema="torreclaro"] {
  --cat-1: #0969da; --cat-2: #1a7f37; --cat-3: #c8102e; --cat-4: #bf8700;
  --cat-5: #10868f; --cat-6: #8250df; --cat-7: #5b6673;
}
.cat-1 { background: var(--cat-1); } .cat-2 { background: var(--cat-2); }
.cat-3 { background: var(--cat-3); } .cat-4 { background: var(--cat-4); }
.cat-5 { background: var(--cat-5); } .cat-6 { background: var(--cat-6); }
.cat-7 { background: var(--cat-7); }

/* --- Barra apilada (parte de un todo) --- */
.barra-apilada { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ba-track { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--neutro-bg); }
.ba-seg { height: 100%; box-shadow: inset -2px 0 0 var(--panel); }  /* gap 2px entre rellenos (spec dataviz) */
.ba-seg:last-child { box-shadow: none; }
.ba-leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--tinta-suave); }
.ba-lg { display: inline-flex; align-items: center; gap: 5px; }
.ba-lg b { color: var(--tinta); }
.ba-chip { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* --- Barra divergente (VARIACION +/-) --- */
.barra-divergente { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bd-fila { display: grid; grid-template-columns: minmax(80px, 130px) 1fr 60px; align-items: center; gap: 8px; font-size: 13px; }
.bd-etq { text-align: left; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-track { position: relative; height: 16px; background: var(--neutro-bg); border-radius: 4px; }
.bd-cero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--grafico-ref); }
.bd-barra { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.bd-barra.pos { background: var(--verde); }
.bd-barra.neg { background: var(--rojo); }
.bd-val { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-val.sube { color: var(--verde); } .bd-val.baja { color: var(--rojo); }

/* --- Dumbbell (antes -> despues) --- */
.dumbbell { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.db-fila { display: grid; grid-template-columns: minmax(70px, 100px) 1fr 52px; align-items: center; gap: 8px; font-size: 13px; }
.db-etq { text-align: left; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-track { position: relative; height: 16px; }
.db-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--borde); }
.db-linea { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; }
.db-linea.sube { background: var(--verde); } .db-linea.baja { background: var(--rojo); }
.db-pto { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--panel); }
.db-pto.antes { background: var(--grafico-neutro); }
.db-pto.despues { background: var(--grafico-dato); }
.db-val { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-val.sube { color: var(--verde); } .db-val.baja { color: var(--rojo); }

/* --- Galeria de fichas (vista Sistema) --- */
.cat-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 12px; }
.cat-ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.cat-ficha.en-uso { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-tenue); }
.cat-ficha-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cat-ficha-cab h4 { margin: 0; font-size: 15px; }
.cat-job-chip { background: var(--neutro-bg); color: var(--tinta-suave); border-radius: 8px;
  padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.cat-demo { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 12px;
  min-height: 96px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.cat-campos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13px; }
.cat-campos dt { font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.cat-campos dt.si { color: var(--verde-tinta); }
.cat-campos dt.no { color: var(--rojo); }
.cat-campos dd { margin: 0; color: var(--tinta); }
.cat-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: auto; border-top: 1px solid var(--borde); padding-top: 8px; }
.cat-primitiva { font-size: 12px; color: var(--tinta-suave); }
.cat-primitiva code { background: var(--neutro-bg); border-radius: 4px; padding: 1px 5px; }
.cat-pend { font-style: italic; color: var(--tinta-suave); }
.cat-usar.activo { background: var(--primario); color: var(--tinta-contraste); border-color: var(--primario); }

/* --- Selector desde la maqueta (modal) --- */
.cat-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 60; overflow-y: auto; }
.cat-overlay.oculto { display: none; }
.cat-modal { background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px;
  max-width: 1000px; width: 100%; padding: 18px; box-shadow: var(--sombra-alta); }
.cat-modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.cat-modal-cab h3 { margin: 0; }
.cat-modal .cat-galeria { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.maq-btn-graf { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Ejemplos en vivo (demos self-contained) --- */
.demo-card { padding: 12px !important; }
.demo-sub { font-size: 12px; color: var(--tinta-suave); margin-top: 4px; }
.demo-hero { text-align: center; }
.demo-hero-num { font-size: 34px; font-weight: 700; color: var(--tinta); line-height: 1; }
.demo-hero-sub { font-size: 13px; color: var(--tinta); margin-top: 6px; }
.demo-hero-pacing { font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }
.demo-medidor { text-align: center; }
.demo-medidor .gauge-svg { max-width: 150px; }
.demo-medidor-etq { font-size: 12px; color: var(--tinta-suave); }
.demo-svg { width: 100%; height: 110px; }
.demo-linea { fill: none; stroke-width: 2; }
.demo-linea.actual { stroke: var(--grafico-dato); }
.demo-linea.base { stroke: var(--grafico-neutro); }
.demo-linea.obj { stroke: var(--verde); stroke-dasharray: 4 3; stroke-width: 1.5; }
.demo-leyenda { display: flex; gap: 12px; font-size: 11px; color: var(--tinta-suave); flex-wrap: wrap; margin-top: 6px; }
.demo-leyenda .dl { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.demo-leyenda .dl.actual { background: var(--grafico-dato); }
.demo-leyenda .dl.base { background: var(--grafico-neutro); }
.demo-leyenda .dl.obj { background: var(--verde); }
.demo-tabla, .demo-hm { font-size: 12px; }
.demo-hm th, .demo-hm td { padding: 3px 6px; }

/* --- OBJETIVOS: el apartado donde se DECIDE la vara del mes --- */
.obj-barra { align-items: center; gap: 14px; }
.obj-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--borde); }
.obj-chip.obj-borrador { background: var(--fondo-suave); color: var(--tinta-suave); }
.obj-chip.obj-vigente { background: color-mix(in srgb, var(--verde) 15%, transparent);
  color: var(--verde); border-color: var(--verde); }
.obj-chip.obj-congelado { background: color-mix(in srgb, var(--primario) 12%, transparent);
  color: var(--primario); border-color: var(--primario); }
.obj-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obj-solicitud { font-size: 12px; color: var(--tinta-suave); font-style: italic; }
.obj-pilares { gap: 16px; align-items: center; }
.obj-pilar { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.obj-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); box-shadow: var(--sombra); margin: 12px 0; }
.obj-total-num { font-size: 34px; font-weight: 700; color: var(--tinta);
  line-height: 1; display: block; }
.obj-total .nota { display: block; margin-top: 4px; }
.obj-ml { font-size: 13px; color: var(--tinta); flex: 1; min-width: 260px; }
.obj-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin: 12px 0; }
.obj-cols h4 { margin: 0 0 4px; }

/* --- OBJETIVOS: paneles por pilar, pesos, concursos --- */
.obj-panel { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px;
  margin: 12px 0; background: var(--panel); box-shadow: var(--sombra); }
.obj-panel h4 { margin: 0 0 8px; }
.obj-panel-off { opacity: 0.6; }
.obj-peso-fila { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.obj-peso-fila .obj-pilar { min-width: 190px; }
.obj-fuera { opacity: 0.5; }
.obj-panel textarea { width: 100%; font-family: inherit; font-size: 13px;
  border: 1px solid var(--borde); border-radius: 8px; padding: 6px; }

/* --- ANALISIS: selector de columnas (default por rol + eleccion usuario) --- */
.ana-columnas { margin: 10px 0 4px; }
.ana-cols-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ana-cols-caja { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: 8px; padding: 5px 10px;
  background: var(--fondo-suave); font-size: 13px; }
.ana-cols-caja b { font-weight: 600; font-size: 13px; }
.ana-cols-caja .check { font-size: 12px; color: var(--tinta-suave); }
.ana-contra-label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--tinta-suave); }
.ana-contra-label select { font-size: 13px; }

/* ---- Catalogos del cliente (gestion, gerencia alta) ---- */
.cat-admin-form { margin-bottom: 18px; }
.cat-admin-form h3 { font-size: 14px; margin-bottom: 10px; }
.cat-admin-form .check-inline {
  display: inline-flex; align-items: center; gap: 8px; align-self: end;
  font-size: 13px; color: var(--tinta-suave);
}
.cat-admin-form .check-inline input { width: auto; }
#cat-n-estado { margin-left: 12px; }
.chip.verde {
  background: var(--verde-bg); border-color: var(--verde); color: var(--verde-tinta);
}
.cat-acc { white-space: nowrap; }
.cat-acc .btn-mini + .btn-mini { margin-left: 6px; }
.btn-mini.danger { color: var(--rojo); border-color: var(--rojo); }
.btn-mini.danger:hover { background: var(--rojo-bg); }

/* ===================== Vista FORECAST (compra al proveedor) ================
   Dias de stock hoy vs si compramos el forecast, y la propuesta de mix. El
   color de la celda de dias ES el semaforo: rojo por quebrar, ambar sobra.
   Ver cios/proveedor/evaluacion_stock.py y forecast.js. */

.fc-critico { color: var(--rojo); font-weight: 600; }
.fc-sobra { color: var(--ambar-tinta); font-weight: 600; }
.fc-ok { color: var(--verde); }
.fc-neg { color: var(--rojo); font-weight: 600; }
.fc-pos { color: var(--verde); font-weight: 600; }

/* Fila que abre una familia del forecast: separa visualmente los grupos. */
.tabla-ana tr.fila-grupo td {
  background: var(--fondo-suave);
  font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: .5px;
}

/* Rol en la propuesta de mix: se lee de un golpe que hacer con cada SKU. */
.fc-rol {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.fc-recortar { background: var(--rojo-bg); color: var(--rojo); }
.fc-sumar { background: var(--verde-bg); color: var(--verde-tinta); }
.fc-incorporar { background: var(--azul-bg); color: var(--azul); }

/* El subtotal por familia ya no es una fila al final del bloque: vive en la
   fila plegable de la familia (.fc-fam, mas abajo). El general cierra fuerte. */
.tabla-ana tr.fc-total-gral td {
  border-top: 2px solid var(--borde-fuerte); font-weight: 700;
  background: var(--fondo-suave);
}

/* Evaluacion del forecast: la FAMILIA es plegable y lleva su subtotal adentro,
   asi cerrada sigue diciendo algo. Mismo gesto que el drill de la solapa Stock
   (chevron `.st-chev`, que se comparte a proposito: es el mismo lenguaje). */
.tabla-ana tr.fc-fam { cursor: pointer; }
.tabla-ana tr.fc-fam > td {
  border-top: 1px solid var(--borde); font-weight: 600;
  background: var(--fondo-suave);
}
.tabla-ana tr.fc-fam:hover > td { background: var(--hover-fila); }
.fc-barra-tabla { margin: 8px 0; display: flex; gap: 12px; align-items: end; }

/* Escenario simulado: la fila tocada se distingue del forecast real. */
.tabla-ana tr.fc-simulado td { background: var(--azul-bg); }
.fc-sim-input { width: 92px; text-align: center; }
.fc-sim-input.fc-sim-tocado { border-color: var(--azul); font-weight: 600; }
.fc-simulador { margin-top: 14px; }

/* ORO: la compra obligatoria del mes, la que paga premio. El dorado no compite
   con el semaforo de dias (rojo/ambar/verde) porque no dice lo mismo: el
   semaforo mide riesgo de stock, el oro marca un compromiso comercial. Va como
   banda al costado y fondo tenue, no como color de texto, para no pisar los
   numeros ni el rojo del quiebre. */
.fc-medalla, .ico-oro { color: var(--oro); }
.ico-oro {
  width: 15px; height: 15px; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.tabla-ana tr.fc-fila-oro > td { background: var(--oro-bg); }
.tabla-ana tr.fc-fila-oro > td:first-child {
  box-shadow: inset 3px 0 0 var(--oro);
}
.kpi-tarjeta.fc-card-oro { border-color: var(--oro); }
.kpi-tarjeta.fc-card-oro .nombre { color: var(--oro); }
/* El chip dice la PALABRA ademas del dibujo: la fila de familia se lee plegada
   y una medalla suelta es un codigo que hay que aprender. */
.fc-tag-oro {
  border-color: var(--oro); color: var(--oro);
  background: var(--oro-bg); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
/* dentro del chip la medalla acompania al texto: no lo domina */
.fc-tag-oro .ico-oro { width: 13px; height: 13px; vertical-align: 0; }
/* El faltante de una referencia de oro NO es editable: no se negocia. Se
   muestra como numero firme, no como un input deshabilitado (un input gris
   invita a preguntarse por que no anda). */
.fc-falta-oro { font-weight: 700; color: var(--oro); }
.fc-leyenda-oro { margin-top: 4px; }
.fc-aviso-cobertura { border-left: 3px solid var(--ambar); padding-left: 10px; }
.fc-ambiguos { margin: 6px 0; }
.fc-ambiguos > summary { cursor: pointer; }

/* Informe de ingesta y enlace manual codigo -> articulo. */
.fc-informe { margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 8px; }
.fc-avisos { margin: 4px 0 0 16px; }
.fc-enlace-lista { max-height: 46vh; overflow-y: auto; margin: 8px 0; }
.fc-enlace-lista .fc-elegir-art {
  display: block; width: 100%; text-align: left; margin-bottom: 4px;
}
.fc-enlace-lista .fc-elegir-art .nota { margin-left: 6px; }

/* Pestana STOCK: drill rubro -> SKU -> lotes con vencimiento. */
.tabla-ana tr.st-fila, .tabla-ana tr.st-rubro, .tabla-ana tr.st-familia {
  cursor: pointer;
}
.tabla-ana tr.st-fila:hover td, .tabla-ana tr.st-rubro:hover td,
.tabla-ana tr.st-familia:hover td { background: var(--hover-fila); }
.st-lotes { padding: 10px 16px; }
.st-lotes table { margin-top: 6px; }
.st-lotes b { font-size: 12px; }
.tabla-ana tr.st-detalle > td { background: var(--fondo-suave); }

/* Cuatro niveles: familia > rubro > SKU > lotes. La sangria es lo unico que
   hace legible de que cuelga cada fila. */
.tabla-ana td.st-sangria { padding-left: 26px; }
.tabla-ana td.st-sangria-sku { padding-left: 48px; }
.st-chev { display: inline-block; width: 12px; color: var(--tinta-suave); }

/* La familia es el nivel de arriba: mas peso que su rubro. El rubro se
   distingue por ser mas liviano, no por otro color (ya hay uno para el rojo). */
.tabla-ana tr.st-familia > td { font-weight: 700; }
.tabla-ana tr.st-rubro > td { font-weight: 500; background: var(--fondo-suave); }

/* La letra del maestro (A hamburguesas, B salchichas) ORDENA la lista pero no
   se dibuja: el negocio dice HAMBURGUESAS. Ver stRenderTabla. */

/* ROJO = lo que cuesta plata hoy (vto critico o quiebre). En la fila del RUBRO
   significa que adentro hay algo en rojo aunque el grupo este cerrado: si no,
   la alerta queda escondida justo cuando la tabla esta plegada. */
.tabla-ana tr.st-alerta > td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.tabla-ana tr.st-alerta > td { color: var(--rojo); }
.tabla-ana tr.st-alerta .nota, .tabla-ana tr.st-alerta .fc-tag {
  color: var(--tinta-suave);
}

/* Saldo en rojo: se ve, se lee distinto y no se disfraza de vencimiento. */
.st-lotes tr.st-lote-ajuste td { color: var(--tinta-suave); font-style: italic; }

/* Tarjeta que FILTRA la tabla de abajo (no se recalcula a si misma). */
.kpi-tarjeta.st-clic { cursor: pointer; }
.kpi-tarjeta.st-clic:hover { border-color: var(--primario); }
.kpi-tarjeta.st-clic.activa {
  border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario);
}
.kpi-tarjeta.st-clic.activa .nombre { color: var(--primario); font-weight: 700; }
.fc-tag-alerta { border-color: var(--rojo); color: var(--rojo); }

/* De donde sale el peso de un pesable (maestro / re-pesado / a mano). */
.fc-tag {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  border: 1px solid var(--borde); color: var(--tinta-suave);
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
}
.fc-peso-input { width: 90px; text-align: center; }

dialog.dlg {
  border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel); color: var(--tinta);
  padding: 20px; max-width: 560px; width: 92vw;
  box-shadow: var(--sombra-alta);
}
dialog.dlg.dlg-ancho { max-width: 1000px; }
/* ::backdrop no hereda variables del :root en todos los motores; se declaran
   las dos luces a mano con los MISMOS valores del token --scrim */
dialog.dlg::backdrop { background: rgba(20, 23, 26, .45); }
:root[data-tema="dark"] dialog.dlg::backdrop { background: rgba(9, 11, 14, .60); }
dialog.dlg menu {
  display: flex; justify-content: flex-end; gap: 10px;
  margin: 16px 0 0; padding: 0;
}
dialog.dlg h3 { margin-top: 0; }
/* El listado de pesos puede ser largo: scrollea adentro del modal. */
#fc-pesos-lista { max-height: 60vh; overflow-y: auto; }

/* ===================== Vista REPARTO (armado de la carga del dia) =========
   Tablero kanban: una columna por camion, una tarjeta por cliente. El color
   del borde superior de la columna ES el semaforo de kilos. Ver
   PROPUESTA_LOGISTICA_REPARTO.md y reparto.js. */

.rep-controles { flex-wrap: wrap; align-items: center; gap: .5rem; }
.rep-controles label { color: var(--tinta-suave); font-size: 14px; }

.rep-resumen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.rep-chip {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .4rem .7rem; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); box-shadow: var(--sombra); min-width: 92px;
}
.rep-chip b { font-size: 16px; line-height: 1.2; }
.rep-chip span { font-size: 12px; color: var(--tinta-suave); text-transform: uppercase;
  letter-spacing: .03em; }
.rep-chip-aviso { background: var(--ambar-bg); border-color: var(--ambar); }
.rep-chip-aviso b { color: var(--ambar-tinta); }
.rep-chip-rojo { background: var(--rojo-bg); border-color: var(--rojo); }
.rep-chip-rojo b { color: var(--rojo); }
.rep-chip-movida { background: var(--azul-bg); border-color: var(--azul); }

/* tablero: scroll horizontal propio, el body nunca scrollea de costado */
.rep-tablero {
  display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem;
  align-items: flex-start;
}
.rep-col {
  flex: 0 0 265px; background: var(--panel); border: 1px solid var(--borde);
  border-top: 4px solid var(--grafico-neutro); border-radius: 10px;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  max-height: calc(100vh - 300px);
}
.rep-col.rep-verde { border-top-color: var(--verde); }
.rep-col.rep-ambar { border-top-color: var(--ambar); }
.rep-col.rep-rojo  { border-top-color: var(--rojo); }
.rep-col-libre { border-top-style: dashed; background: var(--hover-fila); }
.rep-col-drop { outline: 2px dashed var(--primario); outline-offset: -3px; }

.rep-col-head { padding: .6rem .7rem .5rem; border-bottom: 1px solid var(--borde); }
.rep-col-head h3 { margin: 0 0 .35rem; font-size: 14px; letter-spacing: .01em; }
.rep-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--neutro-bg); color: var(--tinta-suave);
  padding: .1rem .3rem; border-radius: 4px; vertical-align: middle;
}
.rep-col-kg { font-size: 13px; color: var(--tinta-suave); }
.rep-col-kg b { font-size: 16px; color: var(--tinta); }
.rep-col-tope { display: block; font-size: 11px; }
.rep-col-meta { font-size: 12px; color: var(--tinta-suave); margin-top: .25rem; }
.rep-alerta { color: var(--ambar-tinta); }

/* barra de carga: relleno = kilos cargados, marca = objetivo (el 90%) */
.rep-barra {
  position: relative; height: 7px; border-radius: 4px;
  background: var(--neutro-bg); overflow: hidden; margin: .1rem 0 .3rem;
}
.rep-barra-fill { height: 100%; width: 100%; background: var(--verde);
  transform-origin: left; transform: scaleX(0); transition: transform .15s; }
.rep-ambar .rep-barra-fill { background: var(--ambar); }
.rep-rojo .rep-barra-fill { background: var(--rojo); }
.rep-barra-obj {
  position: absolute; top: 0; width: 2px; height: 100%;
  background: var(--tinta); opacity: .45;
}

.rep-cards { padding: .5rem; overflow-y: auto; display: flex; flex-direction: column;
  gap: .4rem; min-height: 60px; }
.rep-card {
  border: 1px solid var(--borde); border-radius: 8px; background: var(--panel);
  padding: .4rem .5rem; cursor: grab; font-size: 13px;
}
.rep-card:active { cursor: grabbing; }
.rep-card-drag { opacity: .45; }
.rep-card-aviso { border-left: 3px solid var(--ambar); }
.rep-card-movida { border-left: 3px solid var(--azul); }
.rep-card-top { display: flex; justify-content: space-between; gap: .4rem; }
.rep-card-nombre {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-card-kg { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-card-meta { color: var(--tinta-suave); font-size: 11px; margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-card-chip {
  display: inline-block; margin-top: .25rem; font-size: 11px;
  padding: .08rem .3rem; border-radius: 4px; background: var(--neutro-bg);
  color: var(--tinta-suave);
}

/* panel de capacidades (editable) */
.rep-config { border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); padding: .8rem 1rem; margin-bottom: 1rem; }
.rep-config h3 { margin: 0 0 .3rem; font-size: 15px; }
.rep-cfg-grid { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0; }
.rep-cfg-fila {
  display: grid; grid-template-columns: minmax(140px, 1.6fr) 110px 100px 90px;
  gap: .5rem; align-items: center;
}
.rep-cfg-fila input { width: 100%; }
.rep-cfg-head { font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tinta-suave); }
.rep-cfg-obj { font-size: 13px; color: var(--tinta-suave); text-align: center; }

@media (max-width: 720px) {
  .rep-col { flex-basis: 82vw; }
  .rep-cfg-fila { grid-template-columns: 1fr 1fr; }
  .rep-cfg-head { display: none; }
}

/* --- Reparto: color por camion, acciones por columna, mapa (fases 2-4) --- */
.rep-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: .35rem; vertical-align: middle;
}
.rep-mini {
  margin-top: .4rem; font-size: 11px; padding: .18rem .45rem;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--panel); color: var(--tinta-suave); cursor: pointer;
}
.rep-mini:hover { background: var(--primario-tenue); color: var(--tinta); }
.rep-card-orden {
  display: inline-block; min-width: 16px; margin-right: .25rem;
  font-size: 11px; text-align: center; border-radius: 2px;
  background: var(--neutro-bg); color: var(--tinta-suave);
}
.rep-mapa {
  height: calc(100vh - 330px); min-height: 420px;
  border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
}
.rep-mapa .leaflet-container { height: 100%; width: 100%; background: var(--hover-fila); }

/* ---------- avisos (toast) ----------
   Reemplaza los alert() nativos: discreto arriba a la derecha, se apila con
   los anteriores y se cierra solo (aviso() en app.js). */
.avisos {
  position: fixed; top: 16px; right: 16px; z-index: 320;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 340px; pointer-events: none;
}
.aviso {
  pointer-events: auto;
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--borde); border-left: 4px solid var(--grafico-ref);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
  box-shadow: var(--sombra-alta);
  animation: aviso-entra .18s ease-out;
}
.aviso-ok { border-left-color: var(--verde); }
.aviso-error { border-left-color: var(--rojo); }
.aviso-info { border-left-color: var(--azul); }
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .avisos { left: 12px; right: 12px; max-width: none; }
}

/* fusion analisis-cobertura (PROPUESTA_ANALISIS_COBERTURA_UNIFICADO.md fase
   4): Cobertura y No compradores pasan a ser sub-pestanias de Analisis
   (#ana-subtabs, reusa .subtabs); lente Volumen/Cobertura/Todo y chips de
   alcance (#ana-lente, #ana-alcance, reusan .chips) arriba del selector de
   columnas; sello del alcance activo junto al resumen de resultados. */
.ana-filtro-tit { font-weight: 600; color: var(--tinta); margin-bottom: 10px; }
.ana-filtro-tit .chips { margin: 6px 0 0; }
.ana-cols-cajas { display: flex; gap: 10px; flex-wrap: wrap; }
.ana-cols-disabled { opacity: .45; pointer-events: none; }
.chip.chip-alcance {
  background: var(--neutro-bg); color: var(--tinta); font-weight: 600;
}
#cob-sub-penetracion, #cob-sub-faltantes { margin-top: 4px; }

/* ficha cliente 360 */

/* convencion "todo codigo de cliente es un link" (linkCliente en app.js) */
.link-cliente {
  color: var(--primario); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; font-weight: inherit;
}
.link-cliente:hover { color: var(--primario-osc); }

/* ---- buscador global (Ctrl+K), en la barra superior ---- */
.buscador-global { position: relative; display: flex; align-items: center; flex: none; }
.bg-toggle {
  display: none; background: transparent; border: 1px solid var(--barra-tinta-suave);
  color: var(--barra-tinta); border-radius: 6px; padding: 6px; cursor: pointer;
}
.bg-caja { position: relative; display: flex; align-items: center; }
.bg-input {
  width: 190px; margin: 0; padding: 6px 10px; font-size: 13px;
  background: transparent; color: var(--barra-tinta);
  border: 1px solid var(--barra-tinta-suave); border-radius: 6px;
}
.bg-input::placeholder { color: var(--barra-tinta-suave); }
.bg-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  min-width: 280px; max-height: 60vh; overflow: auto;
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: var(--sombra-alta); padding: 4px;
}
.bg-fila {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  padding: 7px 9px; text-align: left; font: inherit; color: var(--tinta);
}
.bg-fila:hover, .bg-fila.activa { background: var(--hover-fila); }
.bg-fila-nom {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-fila-meta { font-size: 11px; color: var(--tinta-suave); }
.bg-vacio { padding: 10px; font-size: 12px; color: var(--tinta-suave); }
@media (max-width: 720px) {
  .bg-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .bg-caja { display: none; }
  /* el panel abierto se ancla a la BARRA (position static en el contenedor),
     no a la lupa: a lo ancho, con fondo propio para leerse sobre la vista */
  .buscador-global { position: static; }
  .buscador-global.bg-abierta .bg-caja {
    display: flex; position: absolute; left: 10px; right: 10px; top: 100%;
    z-index: 90; background: var(--barra-fondo);
    border-radius: 8px; padding: 8px; box-shadow: var(--sombra-alta);
  }
  .buscador-global.bg-abierta .bg-input { width: 100%; }
  .buscador-global.bg-abierta .bg-resultados { left: 8px; right: 8px; min-width: 0; }
}

/* ---- drawer lateral de la ficha 360 ---- */
.f360-overlay {
  position: fixed; inset: 0; z-index: 305;
  background: var(--scrim);
  display: flex; justify-content: flex-end;
}
.f360-panel {
  position: relative; background: var(--panel); color: var(--tinta);
  width: min(520px, 94vw); height: 100%; overflow-y: auto;
  border-left: 1px solid var(--borde);
  /* la firma: el filete superior rojo de la cabecera del drawer */
  border-top: 3px solid var(--primario);
  box-shadow: var(--sombra-alta);
  padding: 22px 24px 30px;
  animation: f360-entra .16s ease-out;
}
@keyframes f360-entra {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.f360-cerrar {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: var(--tinta-suave); cursor: pointer;
  padding: 6px; border-radius: 6px;
}
.f360-cerrar:hover { color: var(--tinta); background: var(--hover-fila); }
/* ritmo vertical del drawer: h3 seccion > h4 bloque > h5 detalle */
.f360-contenido h3 { font-size: 16px; margin: 24px 0 8px; }
.f360-contenido h4 { font-size: 14px; margin: 18px 0 8px; }
.f360-contenido h5 { font-size: 13px; margin: 12px 0 6px; color: var(--tinta-suave); }
.f360-cabecera { padding-right: 34px; margin-bottom: 4px; }
.f360-tit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.f360-nombre { font-size: 20px; font-weight: 700; }
.f360-cod { font-size: 13px; color: var(--tinta-suave); }
.f360-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0;
}
.f360-tile {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px;
}
.f360-tile-num { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.f360-tile-etq { font-size: 11px; color: var(--tinta-suave); margin-top: 2px; }
.f360-tile-pie { font-size: 11px; color: var(--tinta-suave); margin-top: 2px; }
.f360-hitos { margin: 2px 0 12px; }
/* bloques plegados de la ficha (apuntes extra del briefing, detalle de
   rechazos): el resumen se lee como nota y el cursor invita a abrir */
.f360-mas { margin: 4px 0 10px; }
.f360-mas > summary { cursor: pointer; }
.f360-mas > summary:hover { color: var(--tinta); }

/* selector de lectura del scatter de Equipo + referencias editables */
.eq-scat-modos { align-items: center; margin: 0 0 8px; }
.eq-scat-modos label { display: inline-flex; align-items: center; gap: 4px; }
.eq-scat-modos input { width: 72px; }

/* ---------- padron accionable: drill de catalogo y canales ---------- */
.pad-drill { border: 1px solid var(--borde); border-radius: 8px; margin: 8px 0; }
.pad-drill-cab { cursor: pointer; padding: 10px 12px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.pad-drill-cab:hover { background: var(--fondo-suave); }
.pad-drill > .tabla-scroll { padding: 0 12px 12px; }
.pad-sub-sangria { padding-left: 26px; }
.pad-drill-det > td { background: var(--fondo-suave); padding: 10px 14px; }
.pad-eq-anclas { margin: 4px 0 10px; }

/* ---------- vista Clientes (expediente del cliente) ---------- */
.cli-resultados { margin: 10px 0 18px; }
.cli-anulados-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#cli-buscar { min-width: min(340px, 70vw); }
.cli-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 18px; margin: 6px 0 14px;
}
.cli-dato { display: flex; gap: 8px; font-size: 13px; }
.cli-dato-etq { color: var(--tinta-suave); min-width: 108px; }
tr.f360-mes-parcial td:first-child { border-left: 3px solid var(--ambar); }
tr.f360-vencida td { color: var(--rojo); }
.f360-acciones {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--borde);
}
@media (max-width: 720px) {
  /* en el telefono el drawer es la pantalla entera */
  .f360-panel { width: 100%; border-left: 0; padding: 18px 16px 26px; }
}

/* vendedor 360 y equipo */
.mini-badge.b-bien { color: var(--verde); border-color: var(--verde); }

.vend360-cab {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.vend360-cab h2 { margin-bottom: 0; }  /* el margen lo pone la cabecera, no el h2 */
.vend360-periodo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vend360-periodo select { margin-top: 0; }

/* ---------- ficha 360 del vendedor: la grilla de la vista ----------
   Feedback de gerencia (2026-08-02): "hay cuatro, cinco cuadrados tirados de
   arriba para abajo y a la derecha tengo varios espacios sin usar". Los
   bloques de la ficha dejan de apilarse en una sola columna: en escritorio
   (>=1100px) se reparten de a DOS y solo lo que lleva tabla ancha toma el
   ancho entero (.vend360-ancho). En movil todo vuelve a apilarse.
   minmax(0,1fr) es lo que permite que .tabla-scroll scrollee ADENTRO de su
   panel en vez de estirar la columna (cero scroll horizontal de pagina).
   La MISMA grilla y las MISMAS clases las usa Mi cartera: es la misma
   composicion vista desde el otro perfil. */
.vend360-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px; align-items: start;
}
/* un contenedor todavia sin contenido no deja un hueco en la grilla */
.vend360-grid > div:empty { display: none; }
.vend360-grid > div > .panel-grafico:last-child,
.vend360-grid > div > .dash-resumen:last-child { margin-bottom: 0; }
.vend360-grid .f360-stats { margin: 0; }
@media (min-width: 1100px) {
  .vend360-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vend360-ancho { grid-column: 1 / -1; }
}

/* pila interna de un contenedor ancho (objetivos + proyeccion + desgloses):
   el ritmo lo pone el gap, no el margin-bottom de cada pieza */
.vend360-apilado { display: flex; flex-direction: column; gap: 20px; }
.vend360-apilado > *, .vend360-apilado .panel-grafico,
.vend360-apilado .dash-resumen { margin-bottom: 0; }

/* dos bloques hermanos lado a lado (rubros|focos, retener|desarrollar): el gap
   de la grilla ya separa, el margin del panel lo duplicaria */
.intel-grid > .panel-grafico, .intel-duo > .panel-grafico { margin-bottom: 0; }

.est-alta-pendiente td { background: var(--fondo-suave); }
.est-nota-campo, .est-periodo-campo {
  display: flex; align-items: center; gap: 8px; font-size: 13px; flex: none;
}
.est-nota-campo input { min-width: 260px; }

/* dashboard cosecha (piezas de Dashboard 2 cosechadas al oficial, 2026-07-24:
   titular narrado del hero, crosshair del grafico de evolucion y torre de
   control por equipo). Tokens de tema, sin d2- (ya es dashboard oficial). */

.hero-titular {
  margin: 10px 0 0; font-size: 13px; color: var(--tinta-suave);
}
.hero-titular b.sube { color: var(--verde); }
.hero-titular b.baja { color: var(--rojo); }

.grafico-wrap { position: relative; }
.grafico-cursor { stroke: var(--grafico-ref); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 10px; font-size: 12px;
  color: var(--tinta); box-shadow: var(--sombra-alta); line-height: 1.5;
  max-width: 240px;
}

.torre-resumen {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 13px; color: var(--tinta-suave);
}
.torre-grilla {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.torre-tile {
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); text-align: left; font: inherit; color: inherit;
  cursor: pointer; width: 100%;
}
.torre-tile:hover { background: var(--hover-fila); }
.torre-tile.verde { border-left-color: var(--verde); }
.torre-tile.ambar { border-left-color: var(--ambar); }
.torre-tile.rojo  { border-left-color: var(--rojo); }
.torre-tile.neutro { border-left-color: var(--grafico-neutro); }

.torre-cab { display: flex; align-items: center; gap: 8px; }
.torre-luz { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.torre-luz.verde { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-bg); }
.torre-luz.ambar { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-bg); }
.torre-luz.rojo  { background: var(--rojo);  box-shadow: 0 0 0 3px var(--rojo-bg); }
.torre-luz.neutro { background: var(--grafico-neutro); }
.torre-nombre {
  flex: 1; font-weight: 700; color: var(--tinta); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.torre-kg { font-size: 20px; font-weight: 700; color: var(--tinta); }
.torre-kg small { font-size: 12px; font-weight: 500; color: var(--tinta-suave); }

.torre-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; border-top: 1px dashed var(--borde); padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.torre-alerta { color: var(--rojo); font-weight: 600; }

/* inteligencia-alertas-reportes */

/* ---------- Inteligencia comercial: el orden de lectura ----------
   Feedback de gerencia (2026-08-01): "demasiado texto, mal presentado". La
   gramatica es la de siempre (tiles + paneles con filete, cero componentes
   nuevos): lo que cambia es el ORDEN y el ritmo -- primero el estado, despues
   lo accionable, la prosa al final y plegada. */
.intel { display: flex; flex-direction: column; gap: 20px; }
.intel > *, .intel .panel-grafico { margin-bottom: 0; }
.intel-tiles .tile-num small { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }

/* bloque: mismo encabezado en los seis (titulo Title + chip con el conteo) */
.intel-bloque { padding: 16px 18px 14px; }
.intel-bloque > .grafico-cab { margin-bottom: 12px; }
.intel-bloque .chips.intel-chips { margin: 0 0 10px; }
.intel-bloque .plan-destacado { margin-top: 0; }
.intel-fuente { margin: 10px 0 0; font-size: 12px; }

/* dos tarjetas accionables lado a lado: la lista corta y la tabla ancha */
.intel-duo {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(440px, 1.6fr);
  gap: 20px; align-items: start;
}
/* vigilancia (caidas, margen, servicio): la impar solitaria toma el ancho
   entero en vez de dejar media fila vacia */
.intel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 20px; align-items: start;
}
.intel-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1040px) { .intel-duo { grid-template-columns: 1fr; } }

/* clientes a retener: nombre a la izquierda, estado y valor alineados a la
   derecha (el semaforo lleva SIEMPRE su texto: "riesgo ALTO") */
.intel-lista li.intel-item { display: flex; align-items: center; gap: 10px; }
.intel-item-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-item-num { font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* informe del mes: las lecturas a la vista, la prosa adentro del <details> */
.intel-mas, .intel-narrado {
  margin-top: 10px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 6px 12px;
}
.intel-mas > summary, .intel-narrado > summary {
  cursor: pointer; font-weight: 600; color: var(--tinta); padding: 4px 0;
}
.intel-mas[open] > summary, .intel-narrado[open] > summary { margin-bottom: 6px; }
.intel-mas .insights li:last-child { margin-bottom: 0; }
.intel-prosa { max-width: 72ch; padding-bottom: 4px; }
.intel-prosa p { margin-bottom: 10px; }
.intel-prosa p:last-child { margin-bottom: 0; }

/* Informe mensual (Inteligencia): "Preparar el mes que viene" queda plegado
   por default (<details>), no compite con el plan del mes en curso. */
.informe-proximo {
  margin-top: 10px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 6px 12px;
}
.informe-proximo summary {
  cursor: pointer; font-weight: 600; color: var(--tinta); padding: 4px 0;
}
.informe-proximo[open] summary { margin-bottom: 6px; }

/* Plan del mes: primero los rubros que MUEVEN LA AGUJA (los de mas kilos) y
   el resto plegado. La pared de 16 rubros con el mismo peso no se leia. */
.plan-destacado {
  margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--tinta);
}
.plan-resto {
  margin-top: 10px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 6px 12px;
}
.plan-resto summary {
  cursor: pointer; font-weight: 600; color: var(--tinta); padding: 4px 0;
}
.plan-resto[open] summary { margin-bottom: 6px; }

/* Reportes: panel de exportables legacy plegado por default. */
.exportables summary {
  cursor: pointer; font-weight: 600; display: flex; align-items: center;
  gap: 10px; margin-top: 0; color: var(--tinta);
}
.exportables[open] summary { margin-bottom: 10px; }

/* Alertas: subtitulo de grupo (tipo_etiqueta agrupado por `grupo`) y chip
   apagado de la tarea ya resuelta. */
.alertas-grupo-tit {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 6px;
  font-size: 13px; font-weight: 700; color: var(--tinta);
  border-bottom: 1px solid var(--borde); padding-bottom: 4px;
}
.alertas-grupo-tit:first-child { margin-top: 0; }
.mini-badge.b-apagado { opacity: .6; }
.alerta-item.resuelta { opacity: .55; }

/* Tareas: vencidas resaltadas (el backend ya las ordena primero). */
.alerta-item.tarea-vencida { border-color: var(--rojo); }

/* ========================================================================
   graficos universo (graficos.js, ampliacion 2026-07): barras de magnitud,
   dispersion, histograma, pareto, multi-linea y slope. Todo por tokens: el
   dato en tinta (--grafico-dato), referencias en --grafico-ref, --cat-N
   solo por ENTIDAD, verde/rojo solo cuando el dato ES la variacion.
   ======================================================================== */

/* --- Barras de magnitud (valores absolutos, cifra al lado) --- */
.barras-mag { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bm-fila { display: grid; grid-template-columns: minmax(80px, 130px) 1fr minmax(64px, auto);
  align-items: center; gap: 8px; font-size: 13px; }
.bm-etq { text-align: left; color: var(--tinta); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bm-track { height: 16px; background: var(--neutro-bg); border-radius: 4px; overflow: hidden; }
.bm-barra { display: block; height: 100%; border-radius: 2px; }
:where(.bm-barra) { background: var(--grafico-dato); }  /* cat-N pisa el default */
.bm-val { text-align: center; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Embudo: etapas ANIDADAS de un mismo universo (composicion).
   El ancho es el % del primer valor (el universo) y debajo del numero va la
   conversion contra el paso anterior. Dato en tinta, track en la capa fria:
   la caida entre escalones se lee por el largo, no por color. --- */
.embudo { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fu-fila { display: grid; grid-template-columns: minmax(90px, 150px) 1fr minmax(96px, auto);
  align-items: center; gap: 8px; font-size: 13px; }
.fu-etq { text-align: left; color: var(--tinta); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fu-track { height: 18px; background: var(--neutro-bg); border-radius: 4px; overflow: hidden; }
.fu-barra { display: block; height: 100%; border-radius: 2px; background: var(--grafico-dato); }
.fu-val { text-align: center; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-val small { display: block; font-weight: 400; font-size: 11px; color: var(--tinta-suave); }

/* --- SVG compartido del universo (ejes, guias, rotulos) --- */
.gu-svg { width: 100%; height: auto; display: block; }
.gu-eje { stroke: var(--borde-fuerte); stroke-width: 1; }
.gu-guia { stroke: var(--grafico-ref); stroke-width: 1.2; stroke-dasharray: 5 4; }
.gu-eje-etq { fill: var(--tinta-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.gu-eje-tit { fill: var(--tinta-suave); font-size: 11px; font-weight: 600; letter-spacing: .04em; }

/* --- Dispersion: punto en tinta; cat/semaforo pisan; resalte = decision --- */
.gu-pto { fill: var(--grafico-dato); opacity: .8; }
.gu-pto.resalte { opacity: 1; stroke: var(--primario); stroke-width: 2; }
.gu-fill-1 { fill: var(--cat-1); } .gu-fill-2 { fill: var(--cat-2); }
.gu-fill-3 { fill: var(--cat-3); } .gu-fill-4 { fill: var(--cat-4); }
.gu-fill-5 { fill: var(--cat-5); } .gu-fill-6 { fill: var(--cat-6); }
.gu-fill-7 { fill: var(--cat-7); }
.gu-fill-verde { fill: var(--verde); } .gu-fill-ambar { fill: var(--ambar); }
.gu-fill-rojo { fill: var(--rojo); }

/* --- Histograma y pareto: dato en tinta, acumulado con mas peso --- */
.gu-hist-bar { fill: var(--grafico-dato); }
.gu-pareto-bar { fill: var(--grafico-dato); opacity: .55; }
.gu-pareto-linea { fill: none; stroke: var(--grafico-dato); stroke-width: 2; }
.gu-pareto-pto { fill: var(--grafico-dato); }

/* --- Multi-linea: color por ENTIDAD (--cat-N), leyenda punto+texto --- */
.gu-linea { fill: none; stroke-width: 2; }
.gu-stroke-1 { stroke: var(--cat-1); } .gu-stroke-2 { stroke: var(--cat-2); }
.gu-stroke-3 { stroke: var(--cat-3); } .gu-stroke-4 { stroke: var(--cat-4); }
.gu-stroke-5 { stroke: var(--cat-5); } .gu-stroke-6 { stroke: var(--cat-6); }
.gu-stroke-7 { stroke: var(--cat-7); }
.gu-leyenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
  font-size: 12px; color: var(--tinta); }
.gu-lg { display: inline-flex; align-items: center; gap: 5px; }
.gu-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* --- Slope: verde sube / rojo baja (convencion de variacion del CIOS) --- */
.gu-slope-etq { fill: var(--tinta); font-size: 11px; font-variant-numeric: tabular-nums; }
.gu-slope-linea { stroke-width: 2; }
.gu-slope-linea.sube { stroke: var(--verde); }
.gu-slope-linea.baja { stroke: var(--rojo); }
.gu-slope-pto.sube { fill: var(--verde); }
.gu-slope-pto.baja { fill: var(--rojo); }

/* --- OBJETIVOS: bloques PLEGABLES (details nativo).
   La pestania Definir tiene 4 pilares y, dentro de kilos, 6 bloques: todo
   abierto era una pagina interminable. Cada bloque muestra un RESUMEN en el
   encabezado (cuantos rubros se miden, cuantos bultos hay que sacar, cuantas
   altas califican) para que la mayoria de las visitas no necesiten abrir nada;
   abrir es para EDITAR. */
.obj-acc { border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); margin: 8px 0; }
.obj-acc > summary { cursor: pointer; list-style: none; padding: 10px 14px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-radius: 10px; }
.obj-acc > summary::-webkit-details-marker { display: none; }
/* el triangulo lo dibujamos nosotros para que gire igual en los dos temas */
.obj-acc > summary::before { content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid var(--tinta-suave); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .15s ease;
  align-self: center; }
.obj-acc[open] > summary::before { transform: rotate(90deg); }
.obj-acc > summary:hover { background: var(--fondo-suave); }
.obj-acc-tit { font-weight: 600; color: var(--tinta); }
.obj-acc-res { color: var(--tinta-suave); font-size: 13px; }
.obj-acc-cuerpo { padding: 0 14px 12px; }
.obj-acc-cuerpo > .panel-filtros:first-child { margin-top: 0; }
/* un pilar apagado se lee apagado, pero su encabezado sigue siendo legible */
.obj-panel-off .obj-acc-tit { color: var(--tinta-suave); }

/* ---------- asistente: boton flotante + panel ----------
   Circulo fijo en la esquina inferior DERECHA (pedido de gerencia 2026-08-01;
   antes era una pildora centrada). El circulo es el lugar donde a futuro va
   la cara de la mascota: cambiar el SVG interior alcanza, la geometria ya es
   redonda. Capas: el boton en 50 (arriba de la pestañita del nav en 40,
   debajo del drawer movil en 70 y de todo overlay) y el panel en 304, JUSTO
   por debajo de la ficha 360 (305) para que tocar un cliente en una
   respuesta abra su ficha ENCIMA del chat y no atras. */
.asis-fab {
  position: fixed; z-index: 50;
  bottom: 22px; right: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  background: var(--primario); color: var(--tinta-contraste);
  border: 0; border-radius: 50%; box-shadow: var(--sombra-alta);
  cursor: pointer; transition: filter 150ms ease, transform 150ms ease;
}
.asis-fab:hover { filter: brightness(1.06); }
.asis-fab:active { transform: scale(.94); }
.asis-fab:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.asis-fab .ico { width: 24px; height: 24px; }
/* grabando: el boton late mientras se dicta */
.asis-fab.grabando { animation: asis-late 1.1s ease-in-out infinite; }
@keyframes asis-late { 50% { filter: brightness(1.22); } }

.asis-overlay {
  position: fixed; inset: 0; z-index: 304;
  background: var(--scrim); display: flex; justify-content: flex-end;
}
.asis-panel {
  width: min(520px, 94vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--fondo);
  border-left: 1px solid var(--borde);
  border-top: 3px solid var(--primario);   /* la firma de la casa */
  box-shadow: var(--sombra-alta);
  animation: f360-entra .16s ease-out;      /* mismo keyframe, no se duplica */
}
.asis-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--borde);
}
.asis-cab h2 { margin: 0; font-size: 18px; }
.asis-cab p { margin: 4px 0 0; font-size: 12px; color: var(--tinta-suave); }
.asis-cerrar {
  background: none; border: 0; color: var(--tinta-suave); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.asis-cerrar:hover { background: var(--hover-fila); color: var(--tinta); }

.asis-hilo { flex: 1; overflow-y: auto; padding: 16px 20px; }
.asis-turno { margin-bottom: 18px; }
.asis-mia {
  font-size: 13px; font-weight: 600; margin: 0 0 8px;
}
.asis-suya {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 12px 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap;
}
.asis-pasos {
  margin: 8px 0 0; font-size: 12px; color: var(--tinta-suave);
}
.asis-pasos code {
  font-size: 11.5px; background: var(--hover-fila); border-radius: 4px;
  padding: 1px 5px;
}
.asis-vacio { color: var(--tinta-suave); font-size: 13px; line-height: 1.6; }
.asis-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.asis-sug {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 999px;
  padding: 6px 12px; font-family: inherit; font-size: 12px; color: var(--tinta);
  cursor: pointer;
}
.asis-sug:hover { border-color: var(--primario); color: var(--primario); }

.asis-pie { border-top: 1px solid var(--borde); padding: 12px 16px 16px; }
.asis-form { display: flex; gap: 8px; align-items: flex-end; }
.asis-form textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  font-family: inherit; font-size: 14px; line-height: 1.4;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); color: var(--tinta);
}
.asis-form textarea:focus-visible { outline: 2px solid var(--primario); outline-offset: -1px; }
.asis-enviar {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--primario); color: var(--tinta-contraste);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.asis-enviar[disabled] { opacity: .5; cursor: default; }
.asis-nota { margin: 8px 0 0; font-size: 11.5px; color: var(--tinta-suave); }

@media (max-width: 720px) {
  .asis-panel { width: 100%; border-left: 0; }
  /* el drawer del nav (z 70) tiene que poder taparlo: el boton baja de capa */
  .asis-fab { bottom: 16px; right: 16px; }
}

/* ----- CORTE: hasta que dia laborable se leen los datos ---------------------
   Chip + popover, en la barra de controles del Dashboard y de Analisis. El
   punto rojo avisa que el ultimo dia cargado esta EN CURSO y quedo afuera de
   los promedios: un recorte que el usuario no ve es un numero que no puede
   auditar (misma regla que el chip de frescura). Ver cios/engine/corte.py. */
.corte-ctl { position: relative; display: inline-flex; }
.corte-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--tinta); background: var(--panel); border: 1px solid var(--borde);
}
.corte-chip:hover { border-color: var(--primario); color: var(--primario); }
.corte-chip .ico { width: 15px; height: 15px; flex: none; }
.corte-chip.con-aviso { border-color: var(--primario-tenue-borde); background: var(--primario-tenue); color: var(--primario-osc); }
.corte-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--primario); flex: none; }
.corte-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 340px; max-width: calc(100vw - 32px); padding: 16px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra-alta); text-align: left;
}
.corte-tit { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.corte-fila { display: block; margin-bottom: 10px; }
.corte-fila > span {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .03em;
}
.corte-fila select {
  width: 100%; margin: 0; padding: 7px 10px; font-family: inherit; font-size: 13px;
  color: var(--tinta); background: var(--campo-bg);
  border: 1px solid var(--borde); border-radius: 8px; cursor: pointer;
}
.corte-aviso {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde);
  font-size: 11.5px; line-height: 1.45; color: var(--tinta);
}
.corte-nota { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--tinta-suave); }
@media (max-width: 720px) {
  .corte-panel { right: auto; left: 0; }
}

/* ---------- tabla del ejecutivo: familia > rubro > SKU ----------
   Sigue la regla de la casa: cabecera de grupo CENTRADA sobre las columnas
   que abarca, separador donde ARRANCA cada grupo, texto a la izquierda y
   todo lo demas centrado. */
.mp-tabla { width: 100%; }
.mp-tabla th { text-align: center; }
.mp-tabla .col-txt { text-align: left; }
.mp-abrible { cursor: pointer; }
.mp-abrible:hover { background: var(--hover-fila); }
.mp-flecha { display: inline-block; width: 14px; color: var(--tinta-suave); }
/* la jerarquia se lee por sangria y peso, no por color: el color esta
   reservado para el estado (sube/baja) */
.mp-tabla .mp-n0 .col-txt { font-weight: 700; }
.mp-tabla .mp-n1 .col-txt { padding-left: 20px; font-weight: 600; }
.mp-tabla .mp-n2 .col-txt { padding-left: 40px; color: var(--tinta-suave); }
.mp-tabla .mp-sube { color: var(--verde-tinta); font-weight: 600; }
.mp-tabla .mp-baja { color: var(--primario); font-weight: 600; }
.mp-tabla tfoot .mp-total td { border-top: 2px solid var(--borde); font-weight: 700; }
#mp-tabla-caja { margin-bottom: 22px; }
#mp-tabla-filtro { max-width: 320px; }

/* ---- Campanas ----------------------------------------------------------
   Pestania Campanas de Objetivos. Todo se construye con las variables de la
   casa (tinta sobre papel, el rojo como acento) y reusa .card, .chips,
   .panel-filtros y .tabla-ana donde ya existen; aca solo va lo propio del
   modulo. La campana es un lente: la pantalla no inventa lenguaje visual
   nuevo, ordena el que ya hay. */

.camp-vacio h3 { margin-top: 0; }

/* cabecera: nombre, poblacion del numero y la meta contra el pacing */
.camp-cab .camp-cab-tit { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.camp-cab .camp-cab-tit h3 { margin: 0; }
.camp-cab-chips { margin: 10px 0 6px; }
.camp-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.camp-meta-num { font-size: 20px; color: var(--tinta); }
.camp-meta-num b { font-size: 26px; font-weight: 700; }
.camp-recorte {
  margin: 10px 0 0; padding: 8px 11px; border-radius: 8px;
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde);
  color: var(--tinta);
}

/* KPIs: no son fijos, cada campana elige los suyos. La "x" es discreta y solo
   aparece al pasar por encima; el card punteado invita a sumar uno. */
.camp-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.camp-kpi {
  position: relative; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px 16px;
}
.camp-kpi-nom { font-size: 13px; color: var(--tinta-suave); margin-bottom: 6px; }
.camp-kpi-val { font-size: 24px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; }
.camp-kpi-val .nota { font-size: 13px; font-weight: 400; margin: 0; }
.camp-kpi-x {
  position: absolute; top: 6px; right: 8px; opacity: 0;
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 16px; color: var(--tinta-suave); padding: 2px 5px; border-radius: 6px;
  transition: opacity .12s ease;
}
.camp-kpi:hover .camp-kpi-x, .camp-kpi-x:focus-visible { opacity: 1; }
.camp-kpi-x:hover { background: var(--hover-fila); color: var(--primario); }

.camp-kpi-add { border-style: dashed; background: transparent; padding: 0; }
.camp-kpi-add-btn {
  width: 100%; min-height: 74px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--tinta-suave);
  border-radius: 10px;
}
.camp-kpi-add-btn:hover:enabled { color: var(--primario); background: var(--hover-fila); }
.camp-kpi-add-btn[disabled] { cursor: default; opacity: .6; }
.camp-kpi-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  width: max(240px, 100%); max-height: 260px; overflow-y: auto; padding: 6px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--sombra-alta); text-align: left;
}
.camp-kpi-lista button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-radius: 6px; padding: 7px 9px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--tinta);
}
.camp-kpi-lista button:hover { background: var(--hover-fila); }
.camp-kpi-lista small { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.camp-kpi-lista .nota { margin: 6px 9px; }

/* dispersion + sus referencias editables al costado */
.camp-scatter { display: grid; grid-template-columns: minmax(280px, 1fr) 240px; gap: 18px; }
.camp-scatter-graf { min-width: 0; }
.camp-scatter-refs label { margin-bottom: 10px; }
.camp-scatter-refs input { margin-top: 4px; }
.camp-scatter-refs .nota { margin: 10px 0 0; font-size: 11.5px; }
.camp-cuadrantes { margin-top: -12px; }
@media (max-width: 860px) { .camp-scatter { grid-template-columns: 1fr; } }

/* evolucion: dos escalas distintas nunca comparten grafico */
.camp-evol { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: start; }
.camp-evol-tit { font-size: 12px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; }
.camp-evol-ccc .spark { width: 100%; }
@media (max-width: 860px) { .camp-evol { grid-template-columns: 1fr; } }

/* oportunidades de afinidad */
.camp-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.camp-op {
  background: var(--panel); border: 1px solid var(--borde);
  border-left: 3px solid var(--acento); border-radius: 10px; padding: 14px 16px;
}
.camp-op h4 { margin: 0 0 6px; font-size: 14px; }
.camp-op-flecha { color: var(--tinta-suave); }
.camp-op-num { font-size: 13px; color: var(--tinta-suave); margin: 0 0 10px; }
.camp-op-num b { color: var(--tinta); }
.camp-op-chips, .camp-chips-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-cli-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--tinta);
}
.camp-cli-chip small { color: var(--tinta-suave); }
.camp-chip-x {
  background: none; border: 0; cursor: pointer; line-height: 1;
  color: var(--tinta-suave); font-size: 14px; padding: 0 2px;
}
.camp-chip-x:hover { color: var(--primario); }

/* editor de la definicion (dentro del details plegado) */
.camp-editor h4 { font-size: 13px; margin: 16px 0 8px; }
.camp-fams {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 14px; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px;
}
.camp-afin-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.camp-afin-fila select { margin: 0; max-width: 15rem; }
.camp-afin-multi { font-size: 13px; color: var(--tinta); }
.camp-def-acciones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- concursos: meta colectiva y premio vigente ----------
   La meta es UNA sola referencia global (como el pacing): va arriba, nunca
   repetida por fila. El premio de reconocimiento no se pinta de rojo: no es un
   fracaso, es la clausula que se cobra igual. */
.conc-meta { margin: 10px 0 6px; max-width: 620px; }
.conc-meta-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.conc-meta-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.conc-meta-pct.verde { color: var(--verde-tinta); }
.conc-meta-pct.ambar { color: var(--ambar-tinta); }
.conc-premio {
  background: var(--panel); border: 1px solid var(--borde);
  border-left: 3px solid var(--acento); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0; font-size: 13px; max-width: 620px;
}
.conc-premio.ok { border-left-color: var(--verde); }
.conc-clasif { margin: 10px 0 14px; }
.conc-clasif h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-suave); margin: 0 0 6px; }
.conc-clasif-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--tinta);
}
.conc-chip small { color: var(--tinta-suave); }

/* reparto de la meta: el total en vivo contra la meta (verde cierra, ambar no) */
.camp-rep-acciones { margin-top: 10px; }
.camp-rep-cierra { color: var(--verde); font-weight: 600; }
.camp-rep-difiere { color: var(--ambar-tinta); font-weight: 600; }

/* ---------- Rentabilidad (PLAN_MAESTRO_CIOS F1) ----------
   Presentacion pura sobre lo que ya existe: la vista reusa .tabla-ana,
   .kpi-chip, .fila-drill y el sparkline. Lo unico propio es el tono del
   numero que esta en rojo (tinta roja del sistema, sin alarmismo) y el
   alto del grafico de la serie. */
.rtb-graf { max-width: 520px; margin-bottom: 6px; }
.rtb-graf .spark { height: 96px; }
.rtb-chips-cab { margin-bottom: 0; }
.rtb-neg { color: var(--rojo); font-weight: 600; }
.rtb-perdedor td { background: var(--rojo-bg-suave); }
.rtb-parcial td { color: var(--tinta-suave); }
.rtb-grandes .kpi-num { font-size: 24px; }
.rtb-aviso { display: inline-block; margin: 0 0 12px; }
.rtb-acc-periodo { display: inline-block; margin-bottom: 12px; }
.rtb-acc-periodo select { margin-left: 6px; }
.rtb-acc-nombre { width: 190px; }
.rtb-acc-pct { width: 68px; text-align: center; }
.rtb-acc-nombre, .rtb-acc-pct { margin: 0; padding: 3px 6px; font-size: 12px; }

/* Notas de credito del proveedor: el detalle que se abre debajo de la accion.
   Es una CARGA (lo unico que se escribe en esta vista ademas del % pactado),
   asi que el formulario va en una linea sola y el comprobante manda. */
.rtb-nc-panel { padding: 4px 2px 2px; }
.rtb-nc-tit { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--tinta-suave); }
.rtb-nc-tit .nota { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.rtb-nc-tabla { max-width: 720px; }
.rtb-nc-total { margin-top: 6px; }
.rtb-nc-alta {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 10px 0 4px; padding: 10px 12px; max-width: 720px;
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 10px;
}
.rtb-nc-alta label { display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tinta-suave); }
.rtb-nc-alta input { margin: 0; padding: 3px 6px; font-size: 12px; width: 130px; }
.rtb-nc-larga input { width: 200px; }

/* ========================================================================
   DASHBOARDS MODELO — D4 GRT / D5 VENTAS / D6 EJECUCION
   (PROPUESTA_DASHBOARDS_D4D5D6.md, fase FD4)

   Los tres nacieron de maquetas EXCEL y los construyeron tres manos
   distintas: cada dashboardN.css repetia la misma gramatica con valores
   apenas distintos, y esa duplicacion es lo que los desalineo. La gramatica
   COMUN (cabecera, chips, cards, paneles, notas, estados, vacios) se define
   UNA sola vez aca; cada dashboardN.css guarda solo lo que es suyo (la
   carga manual de D4, las barras de D5, el concurso de D6).

   Decisiones de este bloque:
   - NADA de bordes gruesos de color en las cards ("side-tab accent" de la
     maqueta): el estado se dice con un .tag-estado que LLEVA TEXTO, que es
     la pieza de la casa, y la tinta roja se gana (Red Ink Rule).
   - Dos zonas por card: el DATO arriba (rotulo, cifra, sub) y la
     PROCEDENCIA abajo, detras de un filete, en micro-pie de 11px. El origen
     del numero se ve SIEMPRE sin competir nunca con la cifra.
   - Rampa fija: 18/600 titulo de panel, 12/600 rotulo de card, 20/700 la
     cifra, 13 el sub, 11 los pies. Sin pasos nuevos.
   ======================================================================== */

/* ---- cabecera de la vista: que es esto (izq) y con que se mira (der) ---- */
.d4-cabecera, .d5-cabecera, .d6-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 16px;
}
.d4-cabecera .nota, .d5-cabecera .nota, .d6-cabecera .nota {
  margin: 0; max-width: 72ch;
}
.d4-cab-der, .d5-cab-der, .d6-cab-der {
  display: flex; align-items: center; gap: 10px; flex: none;
}

/* Ritmo vertical: 24px entre secciones (escala de 8). Los bloques respiran
   como tablero de gerencia, no como planilla. */
#d4-root, #d5-root, #d6-root {
  display: flex; flex-direction: column; gap: 24px;
}

/* ---- chips globales: pacing, corte, poblacion, que se midio ----
   Una sola fila arriba, nunca repetidos por fila de tabla. */
.d4-chips, .d5-chips, .d6-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}

/* ---- barra de filtros: CON QUE se mira (Ver, Proveedor y Mes) ----
   Va sobre la capa fria (chrome), no sobre papel (dato): es con lo que se
   mira, no lo que se mira. Y va ARRIBA de los chips del payload, que son la
   verdad de lo que quedo medido: primero se elige, despues se lee.

   Son DESPLEGABLES (2026-08-04, pedido de gerencia: "es mucho texto y marea"),
   con las piezas que ya son el lenguaje del CIOS: .dash-select-label +
   .pill-select. Dos filas de chips ocupaban el alto de dos filas de datos para
   decir lo que dice un select. */
.d4-filtros, .d5-filtros, .d6-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 10px; padding: 12px 16px;
}

/* ---- icono de ayuda: la explicacion no se imprime, se consulta ----
   EN PANTALLA, NUMEROS. La metodologia (umbrales, pacing, AVANCE vs VARIACION,
   que poblacion no honra el filtro) vive en el title de este icono, al lado
   del titulo del bloque o del rotulo de la card. Nunca lleva color de
   semaforo: no es un estado del negocio, es una nota al pie que se abre. */
.ayuda-i {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 15px; height: 15px; margin-left: 6px;
  border-radius: 999px; border: 1px solid var(--borde-fuerte);
  background: var(--fondo-suave); color: var(--tinta-suave);
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle; cursor: help;
  /* el rotulo de la card va en versalitas: sin esto la "i" sale como una
     barra vertical y deja de leerse como el icono de ayuda */
  text-transform: none; letter-spacing: normal;
}
.ayuda-i:hover, .ayuda-i:focus {
  border-color: var(--primario); color: var(--primario); outline: none;
}

/* ---- rotulo del titulo: dos palabras cuando el bloque no honra el filtro ----
   "empresa completa", "nomina comercial". El motivo entero va en la ayuda de
   al lado; lo que no puede faltar es el aviso de que ese bloque mide OTRA
   poblacion que la elegida arriba. */
.dash-rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-suave);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
  white-space: nowrap;
}

/* ---- superficies ---- */
.d4-card, .d5-card, .d6-card,
.d4-bloque, .d5-bloque, .d6-bloque {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra);
}
.d4-bloque, .d5-bloque, .d6-bloque { padding: 20px; }

.d4-cards, .d5-cards, .d6-cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}
.d4-card, .d5-card, .d6-card {
  display: flex; flex-direction: column; padding: 14px 16px;
}

/* ---- card: zona del dato ----
   El min-height es la altura del tag de estado: sin el, la cifra de una card
   con estado quedaba un renglon mas abajo que la de al lado y la fila dejaba
   de leerse en horizontal, que es como se lee una fila de cards. */
.d4-card-cab, .d5-card-cab, .d6-card-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; min-height: 20px;
}
.d4-card-tit, .d5-card-tit, .d6-card-tit {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-suave); margin: 0;
  line-height: 1.3;
}
.d4-card .tag-estado, .d5-card .tag-estado, .d6-card .tag-estado {
  display: inline-block; flex: none;
}
.d4-card-valor, .d5-card-valor, .d6-card-valor {
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.d4-card-sub, .d5-card-sub, .d6-card-sub {
  font-size: 13px; line-height: 1.4; color: var(--tinta); margin: 6px 0 0;
}
.d4-card-sub.sube, .d6-card-sub.sube { color: var(--verde-tinta); }
.d4-card-sub.baja, .d6-card-sub.baja { color: var(--rojo); }
/* la flecha de variacion/avance no rompe el cuerpo de la linea: dentro de la
   card hereda el tamanio del sub (fuera vale su 14px de tabla) */
.d4-card-sub .tendencia, .d5-card-sub .tendencia, .d6-card-sub .tendencia {
  font-size: inherit;
}

/* ---- card: zona de la carga manual ----
   Con que regla se lee el numero ya no se imprime (vive en la ayuda del
   rotulo). Lo que SI se lee siempre es que un numero es CARGA MANUAL, con
   quien lo cargo y cuando: es regla del proyecto, porque un numero cargado a
   mano y uno conciliado no se leen igual. Va detras de un filete, en el piso
   legible del sistema, empujado al fondo para que todas las cards de una fila
   lo alineen. */
.d4-card-fuente {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--borde);
}
.d4-card-fuente:first-child { border-top: 0; padding-top: 0; }
.d6-card-pie, .d4-card-origen {
  font-size: 11px; line-height: 1.45; color: var(--tinta-suave); margin: 0;
}
.d4-card-fuente > * + * { margin-top: 4px; }
/* el rotulo de CARGA MANUAL (de X al DD/MM) es nota, no titular: mismo cuerpo
   que el pie, apenas mas firme para que se distinga de la prosa */
.d4-card-origen { font-weight: 600; color: var(--tinta-suave); }

/* ---- card SIN DATO (el hueco declarado) ----
   Que falte una carga no es una alerta del negocio: se dice con trama y
   tinta apagada, nunca con color de semaforo. */
.d4-hueco, .d5-hueco, .d6-hueco {
  border-style: dashed; background: var(--fondo-suave); box-shadow: none;
}
.d4-hueco .d4-card-valor, .d5-hueco .d5-card-valor, .d6-hueco .d6-card-valor {
  color: var(--tinta-suave);
}

/* ---- titulo de panel: Title 18/600, igual en los tres ----
   Va con `.vista` delante a proposito: `.vista h3` (0,1,1) le gana a una
   clase suelta y le mete 26px de aire muerto arriba de cada panel. */
.vista .d4-bloque-tit, .vista .d5-bloque-tit, .vista .d6-bloque-tit {
  font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--tinta);
  text-transform: none; letter-spacing: normal; margin: 0 0 12px;
}
/* sub-titulo dentro de un panel (un concurso, un corte): un escalon abajo */
.vista .d4-sub, .vista .d5-sub, .vista .d6-sub {
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tinta);
  margin: 20px 0 8px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.vista .d4-sub:first-of-type, .vista .d5-sub:first-of-type,
.vista .d6-sub:first-of-type { margin-top: 0; }

/* ---- estado vacio: uno solo para los tres ----
   Un panel en blanco no explica nada; el vacio dice por que esta vacio.
   Reusa el tratamiento de .vacio-util (papel punteado, tinta suave). */
.d4-vacio, .d5-vacio, .d6-vacio {
  background: var(--fondo-suave); border: 1px dashed var(--borde-fuerte);
  border-radius: 8px; padding: 14px 16px;
  color: var(--tinta-suave); font-size: 13px; line-height: 1.5; margin: 0;
}

/* ---- aviso: HAY dato, pero se lee con una salvedad ----
   No es un vacio (el panel trae numeros) ni una alarma del negocio: papel de
   nota del sistema (--aviso-bg), nunca un semaforo. Queda para las salvedades
   que MANDA EL PAYLOAD sobre el dato del mes; la metodologia de la pantalla se
   fue a la ayuda del titulo. */
.d4-aviso, .d5-aviso, .d6-aviso {
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde);
  border-radius: 8px; padding: 10px 12px; margin: 0 0 12px;
  font-size: 13px; line-height: 1.5; color: var(--tinta);
}

/* ---- celda de estado en tabla: la pieza de la casa, con TEXTO ---- */
.tabla-ana td.d4-estado, .tabla-ana td.d5-estado, .tabla-ana td.d6-estado {
  white-space: nowrap;
}
.d4-estado .tag-estado, .d5-estado .tag-estado, .d6-estado .tag-estado {
  display: inline-block;
}

@media (max-width: 900px) {
  .d4-cabecera, .d5-cabecera, .d6-cabecera { flex-direction: column; }
  .d4-cab-der, .d5-cab-der, .d6-cab-der { flex-wrap: wrap; }
  .d4-cards, .d5-cards, .d6-cards {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .d4-bloque, .d5-bloque, .d6-bloque { padding: 16px; }
}

/* ===================================================================
   VISTA HOY -- el tablero del dia en vivo (PROPUESTA_TABLERO_HOY.md).

   Se lee como un tablero LOGISTICO: linea por linea, densa, con la barra
   de avance adentro de la fila. Por eso la tabla es mas compacta que el
   resto del CIOS y la fila entera es clickeable (abre el drill).
   =================================================================== */

.dia-controles { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dia-controles .fila-control { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-suave); }

.dia-avisos { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--ambar);
  background: var(--ambar-bg); border-radius: 0 8px 8px 0; }
.dia-avisos p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--ambar-tinta); }
.dia-avisos p:last-child { margin-bottom: 0; }

.dia-cards { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- curva del dia --- */
.dia-curva h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dia-sub { font-size: 12px; font-weight: 400; color: var(--tinta-suave); }
.dia-svg { width: 100%; height: auto; display: block; }
.dia-svg-eje { width: 100%; height: 14px; display: block; }
.dia-linea-hoy { fill: none; stroke: var(--primario); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.dia-linea-ref { fill: none; stroke: var(--grafico-neutro); stroke-width: 1.6;
  stroke-dasharray: 5 4; stroke-linejoin: round; }
.dia-eje-linea { stroke: var(--borde); stroke-width: 1; }
.dia-eje { font-size: 9px; fill: var(--tinta-suave); text-anchor: middle; }

/* --- la tabla --- */
.tabla-dia { font-size: 12.5px; }
.tabla-dia td { padding-top: 7px; padding-bottom: 7px; }
.dia-fila { cursor: pointer; }
.dia-fila:hover { background: var(--fondo-suave); }
.dia-fila.abierta { background: var(--primario-tenue); }
.dia-vend { display: block; font-weight: 600; }
.dia-eq { font-size: 10.5px; color: var(--tinta-suave); text-transform: uppercase;
  letter-spacing: .4px; }
.dia-chip-eq { font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: var(--fondo-suave); color: var(--tinta-suave); white-space: nowrap; }
.dia-fuera { font-size: 10px; margin-left: 4px; padding: 1px 5px; border-radius: 8px;
  background: var(--fondo-suave); color: var(--tinta-suave); }
.dia-tenue { color: var(--tinta-suave); }

.dia-barra-cel { min-width: 96px; }
.dia-barra-txt { font-size: 11px; color: var(--tinta-suave); }
.dia-barra-cel .barra-progreso { margin-top: 3px; }

.dia-piso { font-weight: 600; }
.dia-piso.ok { color: var(--verde); }
.dia-piso.falta { color: var(--tinta-suave); }

.dia-tend { font-weight: 600; white-space: nowrap; }
.dia-tend.sube { color: var(--verde); }
.dia-tend.baja { color: var(--rojo); }
.dia-tend.igual { color: var(--tinta-suave); }

/* --- drill de un vendedor --- */
.dia-drill { margin-top: 20px; padding: 16px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 10px; }
.dia-drill h4 { margin: 0 0 8px; font-size: 13px; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .5px; }
.dia-drill-cols { display: grid; gap: 20px; grid-template-columns: 1.4fr 1fr; }

.dia-leyenda { margin-top: 18px; font-size: 12.5px; color: var(--tinta-suave); }
.dia-leyenda summary { cursor: pointer; font-weight: 600; }
.dia-leyenda ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.55; }
.dia-leyenda li { margin-bottom: 6px; }

@media (max-width: 900px) {
  .dia-drill-cols { grid-template-columns: 1fr; }
  .tabla-dia { font-size: 11.5px; }
}

.dia-ajustes { margin-top: 10px; display: flex; align-items: flex-end; gap: 12px;
  flex-wrap: wrap; }
.dia-ajustes .nota { flex-basis: 100%; margin: 0 0 4px; }
.dia-ajustes input { width: 92px; }

/* Seguimiento configurable: la celda dice CLIENTES y KILOS del recorte que
   gerencia eligio mirar (una campana, un rubro, unos SKUs). */
.dia-seg { white-space: nowrap; }
.dia-seg-kg { display: block; font-size: 10.5px; color: var(--tinta-suave); }
.dia-seg-editor { display: block; }
.dia-seg-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  flex-wrap: wrap; }
.dia-seg-fila input[type="text"] { flex: 1 1 180px; min-width: 140px; }
.dia-seg-on { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }

/* Resultado del boton "Buscar pedidos nuevos": los cuatro desenlaces se dicen
   distinto (corrio / espera / ocupado / error), nunca en silencio. */
.dia-refresco-msg { font-size: 12px; color: var(--tinta-suave); }
.dia-refresco-msg.ok { color: var(--verde); }
.dia-refresco-msg.aviso { color: var(--ambar-tinta); }
.dia-refresco-msg.mal { color: var(--rojo); }

/* ===================================================================
   VISTA HOY -- layout de torre de control (rediseño 2026-08-07).

   Dos columnas: la operacion del equipo a la izquierda (curva + tabla),
   el detalle del vendedor a la derecha. Todo con los tokens del sistema,
   asi las dos luces (papel / pizarra) salen solas.
   =================================================================== */

.dia-cuerpo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start; }
.dia-col-principal { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* --- KPIs: siete tarjetas compactas --- */
.dia-kpis { display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dia-kpi { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 12px 14px; min-width: 0; }
.dia-kpi-nombre { font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tinta-suave); }
.dia-kpi-valor { font-size: 24px; font-weight: 700; line-height: 1.15; margin-top: 4px;
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.dia-kpi-valor .u { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.dia-kpi-de { font-size: 15px; font-weight: 600; color: var(--tinta-suave); }
.dia-kpi-pie { font-size: 11px; color: var(--tinta-suave); margin-top: 5px;
  line-height: 1.35; }
.dia-kpi-anillo .dia-kpi-valor { align-items: center; justify-content: space-between; }
.dia-anillo { width: 34px; height: 34px; transform: rotate(-90deg); }
.dia-anillo-base { fill: none; stroke: var(--borde); stroke-width: 3.5; }
.dia-anillo-val { fill: none; stroke: var(--verde); stroke-width: 3.5;
  stroke-linecap: round; }

/* --- curva --- */
.dia-curva-cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dia-curva-cab h3 { margin: 0; }
.dia-banda { fill: var(--grafico-neutro); opacity: .16; stroke: none; }
.dia-guia { stroke: var(--borde); stroke-width: 1; opacity: .55; }
.dia-eje-y { text-anchor: end; }
.dia-corte { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: .7; }
.dia-punto { fill: var(--primario); stroke: var(--panel); stroke-width: 2; }
.dia-lectura { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--tinta-suave); margin-bottom: 6px; }
.dia-lectura b { color: var(--tinta); }
.dia-lectura span { font-weight: 700; }
.dia-lectura.ok span { color: var(--verde); }
.dia-lectura.mal span { color: var(--rojo); }

/* --- panel lateral del vendedor --- */
.dia-panel { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px; position: sticky; top: 12px;
  max-height: calc(100vh - 24px); overflow: auto; }
.dia-panel-vacio { color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.dia-panel-cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; }
.dia-panel-cab h3 { margin: 0; font-size: 15px; }
.dia-panel-sub { font-size: 11.5px; color: var(--tinta-suave); margin-top: 3px;
  display: flex; align-items: center; gap: 6px; }
.dia-estado { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding: 1px 7px; border-radius: 10px; }
.dia-estado.activo { background: var(--verde-bg); color: var(--verde-tinta); }
.dia-estado.quieto { background: var(--ambar-bg); color: var(--ambar-tinta); }
.dia-estado.cerrado { background: var(--fondo-suave); color: var(--tinta-suave); }
.dia-panel-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.dia-panel-resumen div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dia-panel-resumen span { font-size: 10px; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .3px; }
.dia-panel-resumen b { font-size: 15px; }
.dia-panel-resumen b.mal { color: var(--rojo); }
.dia-panel-resumen b.ok { color: var(--verde); }
.dia-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.dia-tabs button { flex: 1; padding: 6px 8px; font-size: 11.5px; font-weight: 600;
  background: none; border: 1px solid var(--borde); border-radius: 8px;
  color: var(--tinta-suave); cursor: pointer; }
.dia-tabs button.activa { background: var(--primario-tenue); color: var(--primario);
  border-color: var(--primario); }
.dia-panel-tabla { font-size: 11.5px; }
.dia-panel-tabla td, .dia-panel-tabla th { padding: 5px 6px; }
.dia-panel-nota { margin-top: 8px; font-size: 11px; }
.dia-vertodos { margin-top: 8px; width: 100%; }

/* Prioridad del pendiente: sale de VUELTAS DE RUTA (7/14 dias), no de un
   score. Un numero que mezcla churn, recencia y potencial no significa nada
   concreto -- por eso el score se saco de la ficha del vendedor. */
.dia-prio { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 7px; border-radius: 10px; }
.dia-prio.alta { background: var(--rojo-bg); color: var(--rojo); }
.dia-prio.media { background: var(--ambar-bg); color: var(--ambar-tinta); }
.dia-prio.baja { background: var(--fondo-suave); color: var(--tinta-suave); }

@media (max-width: 1280px) {
  .dia-cuerpo { grid-template-columns: 1fr; }
  .dia-panel { position: static; max-height: none; }
}
.dia-pie { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 0; margin-top: 14px; border-top: 1px solid var(--borde);
  font-size: 11.5px; color: var(--tinta-suave); }

/* --- curva: la linea de RITMO (lo que hay que llevar para la meta) --- */
.dia-linea-ritmo { fill: none; stroke: var(--grafico-neutro); stroke-width: 1.6;
  stroke-dasharray: 6 5; stroke-linecap: round; }
/* la historica, cuando exista, va en azul para no confundirse con el ritmo */
.dia-linea-ref { stroke: var(--azul); }

/* --- CCP: una sola columna de clientes, con el piso marcado en la barra --- */
.dia-ccp { white-space: nowrap; }
.dia-ccp b { font-size: 14px; }
.dia-ccp b.falta { color: var(--ambar-tinta); }
.dia-ccp-de { color: var(--tinta-suave); font-size: 12px; }
.barra-progreso { position: relative; }
.dia-barra-piso { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--tinta-suave); opacity: .75; border-radius: 1px; }

/* --- hover de la curva: el dato bajo el cursor (estaba en la maqueta) --- */
.dia-curva-caja { position: relative; }
.dia-hover-linea { stroke: var(--tinta-suave); stroke-width: 1; opacity: .55; }
.dia-hover-punto { fill: var(--primario); stroke: var(--panel); stroke-width: 2; }
.dia-tooltip {
  position: absolute; top: 6px; z-index: 3; pointer-events: none;
  background: var(--panel); border: 1px solid var(--borde-fuerte);
  border-radius: 8px; padding: 7px 10px; font-size: 11.5px; line-height: 1.55;
  color: var(--tinta); box-shadow: var(--sombra-alta); white-space: nowrap;
}
.dia-tooltip b { font-size: 12.5px; }
.dia-tooltip .tip-hoy { color: var(--primario); font-weight: 600; }
.dia-tooltip .tip-ref { color: var(--tinta-suave); font-weight: 600; }
.dia-tooltip .tip-ok { color: var(--verde); font-weight: 700; }
.dia-tooltip .tip-mal { color: var(--rojo); font-weight: 700; }
/* ALTAS: cliente nuevo del mes con pedido hoy. Verde porque es una conquista,
   no una alarma -- y distinto del "+N" gris de fuera de agenda, que es otra
   cosa (un cliente de otro dia visitado hoy). */
.dia-alta { color: var(--verde); font-weight: 700; }
.dia-kpi-alta .dia-kpi-valor { color: var(--verde); }
.dia-aviso-inline { color: var(--ambar-tinta); }
/* la tarjeta de altas es un FILTRO de la tabla (regla de la casa: la tarjeta
   no se recalcula a si misma, sigue diciendo la poblacion) */
.dia-kpi-click { cursor: pointer; }
.dia-kpi-click:hover { border-color: var(--primario); }
.dia-kpi-click.activa { border-color: var(--primario); background: var(--primario-tenue); }
.dia-filtro-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 7px 12px; border-radius: 8px;
  background: var(--primario-tenue); border: 1px solid var(--primario-tenue-borde);
  font-size: 12px; color: var(--tinta); }
/* AGREGADO a un pedido ya tomado esta semana: suma kilos, no boleta. Gris como
   el "+N fuera de agenda" -- es contexto del conteo, no una alarma. */
.dia-agr { font-size: 10px; margin-left: 4px; padding: 1px 5px; border-radius: 8px;
  background: var(--fondo-suave); color: var(--tinta-suave); white-space: nowrap; }

/* ---------- Login con Google (visible solo si esta configurado) ---------- */
.login-google { margin-top: 18px; }
.login-o {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; color: var(--suave, #6b7280); font-size: .82rem;
}
.login-o::before, .login-o::after {
  content: ""; flex: 1; height: 1px; background: var(--borde, #e3e4e1);
}
#login-google-boton { display: flex; justify-content: center; }

/* Click en un cliente del panel: se despliega QUE PIDIO, sin ir al servidor.
   La ficha 360 queda en un link al pie -- aca la pregunta es "que se llevo". */
.dia-cli { cursor: pointer; }
.dia-cli:hover { background: var(--hover-fila); }
.dia-cli.abierta { background: var(--primario-tenue); }
.dia-cli-nom { font-weight: 600; }
.dia-cli-n { font-size: 10px; color: var(--tinta-suave); margin-left: 5px; }
.dia-pedido .celda-detalle { padding: 8px 10px; background: var(--fondo-suave); }
.dia-lineas { width: 100%; border-collapse: collapse; font-size: 11px; }
.dia-lineas td { padding: 3px 6px; border-bottom: 1px solid var(--borde); }
.dia-lineas td:not(.col-txt) { text-align: right; white-space: nowrap;
  color: var(--tinta-suave); }
.dia-lineas tr:last-child td { border-bottom: none; }
.dia-pedido-pie { margin-top: 7px; font-size: 11px; }