/* Valle Blanco · Control comercial
   Lenguaje visual tomado del informe de Gabriel "¿Qué canal se está manteniendo?":
   Archivo para texto y cifras, IBM Plex Mono para etiquetas y ejes; superficies
   planas de esquina recta, una sola tinta como acento, y el color reservado para
   los datos (series) y los estados (sube / baja / ojo). */
:root {
    --bg: #E9EDED; --card: #FFFFFF; --ink: #0F1618; --muted: #68787D; --line: #D2DADB; --soft: #F4F7F7;
    --accent: #0F1618; --accent-ink: #FFFFFF;
    --pos: #0E7C6B; --neg: #BF4A31; --warn: #B8860B; --info: #2E6FA7; --err: #BF4A31;
    --tint: rgba(15, 22, 24, .045);
    --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --font: var(--sans);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--ink); text-underline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; } .mini { font-size: 11px; }
.mono { font-family: var(--mono); font-size: 12px; }
.fuerte { font-weight: 700; } .centro { text-align: center !important; } .izq { text-align: left !important; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.link { background: none; border: 0; color: var(--ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.card { background: var(--card); border: 1px solid var(--line); }
.pad { padding: 16px 18px; }
.cargando { padding: 50px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; }
/* Etiqueta en mono mayúscula: el "rótulo" de todo el sistema */
.rotulo, .tabla thead th, .kpi > .muted.small:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 340px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.brand { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.brand-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.login-card input { padding: 11px 12px; border: 1px solid var(--line); font: inherit; font-size: 14px; }
.login-card button { padding: 11px; border: 0; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.msg { font-size: 13px; min-height: 18px; }
.msg.error { color: var(--err); }

/* ── Barra superior ────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 20px; padding: 0 20px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.brand-row { font-size: 15px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.logo { width: 26px; height: 26px; border-radius: 6px; }
.logo-login { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 6px; }
.brand-row .muted { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.tabs { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.tab { padding: 14px 13px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.user-row { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.tabs .grupo { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #9AA7AB; align-self: center; margin: 0 4px 0 10px; }
.tabs .grupo:first-child { margin-left: 0; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { color: var(--ink); }
.menu-lista { position: absolute; right: 0; top: 100%; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); display: flex; flex-direction: column; min-width: 220px; z-index: 30; }
.menu-lista .tab { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.menu-lista .tab.active { border-bottom-color: var(--line); background: var(--soft); }
.cargando-suave { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ── Móvil: Inicio y Rotación como listas; las hojas de análisis quedan de escritorio ── */
@media (max-width: 760px) {
    .topbar { padding: 0 10px; gap: 8px; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { padding: 12px 9px 10px; white-space: nowrap; }
    .solo-escritorio { display: none !important; }
    .global-bar { top: 44px; padding: 6px 10px; gap: 6px 10px; }
    .global-bar .g-der { margin-left: 0; }
    .vista { padding: 14px 10px 50px; }
    .vista h1 { font-size: 22px; }
    .inicio-kpis, .semaforo, .hoy, .alertas, .kpis, .dos-col, .dos-col.par, .bridge-lineas, .veredictos { grid-template-columns: 1fr !important; }
    .ikpi .n { font-size: 26px; }
    .metricas { gap: 10px 18px; }
    .filtros { gap: 6px 10px; }
    .filtros input[type=search] { min-width: 0; width: 100%; }
    .tabla-wrap { max-height: none; }
    .tabla .fija { min-width: 150px; max-width: 170px; }
    .panel { width: 100vw; padding: 14px 12px 40px; }
    .dash-head h1 { font-size: 26px; }
    .rev-m { gap: 10px 20px; }
    .aviso-movil { display: block; }
}
.aviso-movil { display: none; }

/* Barra global: área + fecha de corte, iguales en todas las hojas */
.global-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 7px 20px; background: var(--soft); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); position: sticky; top: 45px; z-index: 19; }
.global-bar label { display: inline-flex; align-items: center; gap: 6px; }
.global-bar select, .global-bar input[type=date] { padding: 4px 8px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; background: var(--card); color: var(--ink); }
.global-bar .g-der { margin-left: auto; }

/* Inicio */
.inicio-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.ikpi { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; }
.ikpi .n { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 4px 0 2px; }
.ikpi .n small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.ikpi .fila { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-top: 1px solid var(--line); }
.ikpi .fila:first-of-type { border-top: 0; }
.ikpi .fila b { font-variant-numeric: tabular-nums; }
.semaforo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.sem { --area: var(--muted); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--area); padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.sem .luz { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.luz.ok { background: #0ca30c; } .luz.ojo { background: #fab219; } .luz.bajo { background: #d03b3b; } .luz.sin { background: #BCC6C8; }
.hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.hoy .card { padding: 12px 14px; }
.hoy ul { list-style: none; margin: 0; padding: 0; }
.hoy li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cli acc" "det det"; column-gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.hoy li .cli { grid-area: cli; font-weight: 600; color: var(--ink); text-decoration: none; }
.hoy li .cli:hover { text-decoration: underline; }
.hoy li .det { grid-area: det; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hoy li .acciones { grid-area: acc; }
.acciones { display: inline-flex; gap: 4px; }
.acciones button { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); background: var(--card); cursor: pointer; color: var(--muted); }
.acciones button:hover { color: var(--ink); border-color: var(--ink); }
pre.resumen { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); padding: 12px 14px; margin: 8px 0; line-height: 1.5; }

/* Matriz de rotación en modo ✓/· */
.tabla td.si { color: var(--pos); font-weight: 700; text-align: center; background: #E8F3F1; }
.tabla td.no { color: #C9D2D4; text-align: center; }
.tabla td.nc { color: var(--neg); text-align: center; }

/* Ficha de cliente (panel lateral) */
.panel-fondo { position: fixed; inset: 0; background: rgba(15, 22, 24, .35); z-index: 40; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(880px, 96vw); background: var(--bg); z-index: 41; overflow: auto; padding: 20px 22px 40px; box-shadow: -8px 0 30px rgba(0, 0, 0, .18); }
.panel .cerrar { position: absolute; top: 12px; right: 16px; }
.panel h1 { font-size: 22px; }
.bridge-lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.bridge-l { --area: var(--muted); border-top: 3px solid var(--area); }

/* ── Vistas ────────────────────────────────────────────────────────────── */
.vista { padding: 26px 20px 64px; max-width: 1500px; margin: 0 auto; }
.vista-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.vista h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 6px; }
.vista h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.vista h3 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.sin-margen { margin-top: 0 !important; }
.placeholder { text-align: center; padding: 60px 20px; color: var(--muted); }
.placeholder h2 { color: var(--ink); }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 14px; font-size: 12.5px; }
.filtros label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.filtros label.check { color: var(--ink); cursor: pointer; }
.filtros select, .filtros input[type=search], .filtros input[type=date] { padding: 6px 9px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; background: var(--card); color: var(--ink); }
.filtros input[type=search] { min-width: 220px; }

/* Botones-interruptor del informe: mono, rectos, tinta cuando están activos */
.segmento { display: inline-flex; gap: 0; }
.segmento button, .tog { font-family: var(--mono); font-size: 11px; padding: 6px 11px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.segmento button + button { border-left: 0; }
.segmento button.on, .tog.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.tog.preset { border-style: dashed; }
.tog.preset:hover { color: var(--ink); border-color: var(--ink); }
.btn, .btn-sec { padding: 7px 13px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; cursor: pointer; }
.btn { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.btn-sec { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.btn:disabled, .btn-sec:disabled { opacity: .5; cursor: default; }

.aviso { padding: 9px 12px; font-size: 12.5px; margin: 8px 0; background: #FBF6E6; border-left: 3px solid var(--warn); color: #4A3A08; }
.aviso.ok { background: #E8F3F1; border-left-color: var(--pos); color: #0A3F37; }
.aviso.error { background: #F8ECE9; border-left-color: var(--neg); color: #5C2015; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; }
.kpi { background: var(--card); border: 1px solid var(--line); padding: 13px 15px; }
.kpi-n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 3px 0; }
.kpi-n.chico { font-size: 15px; }
.kpi-n.grande { font-size: 28px; font-weight: 800; margin: 3px 0 8px; }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.tabla-wrap { overflow: auto; max-height: 72vh; background: var(--card); border: 1px solid var(--line); }
.tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--soft); border-bottom: 1px solid var(--ink); }
.tabla tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--soft); border-top: 1px solid var(--ink); border-bottom: 0; }
.tabla tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.tabla tbody tr:hover > td { background-image: linear-gradient(var(--tint), var(--tint)); }
.tabla tr.fuerte td { font-weight: 700; }
.tabla tr.pos td { color: var(--pos); } .tabla tr.neg td { color: var(--neg); }
.tabla tr.cola td { color: var(--muted); }
.tabla.compacta th, .tabla.compacta td { padding: 4px 8px; }
.tabla td.vacio { color: #BCC6C8; }
.tabla th.foco, .tabla td.foco { border-left: 2px solid var(--ink); }
.tabla th.en-curso { color: var(--warn); }
.tabla .fija { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; min-width: 230px; max-width: 300px; border-right: 1px solid var(--line); }
.tabla thead .fija, .tabla tfoot .fija { z-index: 3; background: var(--soft); }
.tabla .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.detalle > td { background: var(--soft); padding: 10px 14px; text-align: left; white-space: normal; }
.detalle-in { position: sticky; left: 14px; width: max-content; max-width: calc(100vw - 90px); overflow-x: auto; }
.detalle-in .mini { margin-bottom: 6px; white-space: normal; }
.tabla.interna { border: 1px solid var(--line); background: var(--card); width: auto; }
.tabla td.barra { min-width: 90px; padding-left: 0; }
.tabla td.barra div { height: 8px; background: var(--ink); opacity: .55; }
.tabla.plana th, .tabla.plana td { background: none; white-space: normal; }
.tabla.plana th { position: static; text-align: left; font-weight: 500; color: var(--ink); font-size: 12.5px; font-family: var(--sans); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--line); }
/* Tabla de áreas: la gran oficina es la fila fuerte, sus Oficina2 van sangradas debajo */
.tabla tr.grupo td { font-weight: 700; background: var(--soft); border-top: 1px solid var(--ink); }
.tabla tr.hijo td:first-child { padding-left: 26px; color: var(--muted); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

/* Estados de cliente / insignias */
.badge { display: inline-block; padding: 1px 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: #E3E8E9; color: #34454A; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chip { border: 1px solid var(--line); background: transparent; padding: 5px 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); cursor: pointer; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.e-activo     { background: #DCEFEB; color: #0A5A4E; }
.badge.e-nuevo      { background: #DDE9F4; color: #1F4E79; }
.badge.e-recuperado { background: #DCEFEB; color: #0A5A4E; }
.badge.e-pendiente  { background: #F6EED3; color: #6B4E06; }
.badge.e-pausa      { background: #F6E6D9; color: #7A3E12; }
.badge.e-perdido    { background: #F5DFD9; color: #7E2A18; }

/* ── Maestro SKU ───────────────────────────────────────────────────────── */
.tabla.maestro input:not([type=checkbox]), .tabla.maestro select { width: 100%; min-width: 210px; padding: 4px 7px; border: 1px solid transparent; font: inherit; font-size: 12.5px; background: transparent; color: var(--ink); }
.tabla.maestro input.corto { min-width: 110px; width: 120px; }
.tabla.maestro select { min-width: 84px; }
.tabla.maestro tr:hover input:not([type=checkbox]), .tabla.maestro tr:hover select, .tabla.maestro input:focus, .tabla.maestro .fusion input { border-color: var(--line); background: var(--card); }
.tabla.maestro .guardado { border-color: var(--pos) !important; background: #E8F3F1 !important; }
.tabla.maestro tr.pend > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tabla.maestro .fusion { display: flex; gap: 6px; align-items: center; }
.codigos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; max-width: 260px; white-space: normal; }
.cod { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; background: #DDE9F4; color: #1F4E79; font-size: 11px; font-family: var(--mono); }
.cod button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; }
.sug { padding: 12px 16px; margin-bottom: 8px; }
.sug-par { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.sug .flecha { color: var(--muted); font-size: 18px; }
.sug-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.dash { transition: opacity .15s; max-width: 1240px; margin: 0 auto; }
.dash-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }
.sobre { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dash-head h1 { font-size: 38px; margin: 6px 0 0; line-height: 1; }
.dash-head p { color: var(--muted); font-size: 14px; margin: 8px 0 0; max-width: 760px; line-height: 1.5; }
.togs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.togs:first-of-type { margin-top: 16px; }
.togs .sep { width: 14px; }
.togs label { font-family: var(--mono); font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.togs input[type=date] { padding: 5px 8px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; background: transparent; color: var(--ink); }

/* Franja "Estás revisando": superficie clara, las áreas elegidas van como fichas de su color */
.revisando { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 14px 18px; margin-bottom: 18px; }
.revisando .rev-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rev-chip { font-family: var(--mono); font-size: 10.5px; padding: 3px 9px; cursor: pointer; color: #fff; border: 0; margin-left: 5px; }
.rev-m { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.rev-m .v { font-size: 21px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.rev-m .s { font-size: 11px; color: var(--muted); }

/* Métrica con filete a la izquierda */
.metricas { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 22px; }
.metrica { border-left: 2px solid var(--line); padding-left: 12px; }
.metrica .v { font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.metrica .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Tarjetas de veredicto: son el selector. Activa = filete grueso y lavado del color del área;
   inactiva = gris y atenuada. El color del área vive en la tarjeta, la franja y el gráfico. */
.veredictos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.veredicto { --area: var(--muted); text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--line); padding: 12px 16px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; width: 100%; opacity: .62; transition: all .15s; font-family: var(--sans); }
.veredicto:hover { opacity: 1; }
.veredicto.on { opacity: 1; border-top-color: var(--area); background: color-mix(in srgb, var(--area) 7%, #fff); }
.veredicto.foco { box-shadow: 0 0 0 2px var(--area); border-color: var(--area); }
.veredicto .vh { display: flex; align-items: center; justify-content: space-between; }
.veredicto .vn { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.veredicto.on .vn { color: var(--ink); }
.veredicto .ve { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.veredicto .vt { font-size: 11.5px; color: var(--muted); margin-top: -3px; }
.veredicto .vp { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; }
.veredicto .vu { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: -4px; }
.veredicto .sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: -2px; }

/* Objetivos: barra tipo "bullet": pista = objetivo · marca gris = base · relleno = actual */
.bullet { position: relative; height: 12px; background: #E3E8E9; margin: 6px 0 4px; }
.bullet .act { position: absolute; left: 0; top: 0; bottom: 0; background: var(--area, var(--ink)); }
.bullet .base { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--muted); }
.bullet .obj { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.bullet-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cumpl { font-family: var(--mono); font-weight: 600; }
.tabla th.grp { border-left: 1px solid var(--line); }
.tabla td.grp { border-left: 1px solid var(--line); }

/* Precio y elasticidad */
.badge.l-baja_sube { background: #DCEFEB; color: #0A5A4E; } .badge.l-baja_no { background: #F5DFD9; color: #7E2A18; }
.badge.l-sube_aguanta { background: #DDE9F4; color: #1F4E79; } .badge.l-sube_baja { background: #F6EED3; color: #6B4E06; }
.badge.e-elastico { background: #DCEFEB; color: #0A5A4E; } .badge.e-moderado { background: #DDE9F4; color: #1F4E79; } .badge.e-inelastico { background: #E3E8E9; color: #34454A; }
.badge.e-indicio { background: #F6EED3; color: #6B4E06; } .badge.e-ruidoso { background: #F6E6D9; color: #7A3E12; } .badge.e-sin_lectura { background: #F4F7F7; color: var(--muted); }

.subtabs { display: flex; gap: 2px; margin: 22px 0 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subtabs button { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); }
.subtabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sec-h h2, .sec-h h3 { margin: 0; }
.sec-h .rotulo { text-transform: none; letter-spacing: 0; font-size: 11px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 12px; }
.dos-col.par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .dos-col, .dos-col.par { grid-template-columns: 1fr; } }
.senales { list-style: none; margin: 0; padding: 0; }
.senales li { padding: 8px 0 8px 12px; border-left: 3px solid var(--line); margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
.senales li.alerta { border-left-color: var(--neg); } .senales li.ok { border-left-color: var(--pos); } .senales li.info { border-left-color: var(--info); }

.delta { font-size: 12.5px; line-height: 1.75; }
.delta b { font-variant-numeric: tabular-nums; display: inline-block; min-width: 62px; }
.nota { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.tabla-gemela { margin-top: 8px; font-size: 12px; font-family: var(--mono); }
.tabla-gemela summary { cursor: pointer; color: var(--muted); }
.tabla-gemela .tabla-wrap { margin-top: 8px; max-height: 300px; font-family: var(--sans); }

/* Medidor: venta lograda vs una referencia; la marca vertical es el avance del mes */
.meter-f { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; }
.meter { position: relative; height: 8px; background: #D5E2EE; margin-top: 3px; }
.meter div { height: 100%; background: var(--info); }
.meter i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }

/* Gráficos */
.graf { position: relative; }
.graf svg { display: block; overflow: visible; }
.graf svg path[tabindex]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.graf-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--card); border: 1px solid var(--ink); padding: 7px 10px; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.graf-tip-t { color: var(--muted); margin-bottom: 3px; }
.graf-tip-f { display: flex; align-items: center; gap: 6px; }
.graf-tip-f b { font-variant-numeric: tabular-nums; }
.graf-tip-f span:last-child { color: var(--muted); }
.graf-key { width: 12px; height: 2px; flex: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.ley-it { display: inline-flex; align-items: center; gap: 6px; }
.ley-it i { width: 14px; height: 2px; }
.ley-it i.caja { height: 9px; width: 9px; }

/* Alertas */
.alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; }
.alerta { padding: 14px 16px; border-top: 3px solid var(--line); }
.alerta.t-neg { border-top-color: var(--neg); } .alerta.t-warn { border-top-color: var(--warn); } .alerta.t-pos { border-top-color: var(--pos); }
.alerta-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.alerta-n { font-size: 26px; font-weight: 800; line-height: 1; min-width: 36px; letter-spacing: -.03em; }
.alerta ul { list-style: none; margin: 0; padding: 0; }
.alerta li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.alerta li .cli { font-weight: 600; color: var(--ink); text-decoration: none; }
.alerta li .cli:hover { text-decoration: underline; }
.alerta li .der { float: right; font-family: var(--mono); font-size: 11px; margin-left: 8px; }
.alerta .vacio { padding: 8px 0; }
.alerta .link { padding: 6px 0 0; font-family: var(--mono); font-size: 11px; }

.campo { padding: 8px 10px; border: 1px solid var(--line); font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.campo-tabla { padding: 4px 7px; border: 1px solid transparent; font: inherit; font-size: 12.5px; background: transparent; color: var(--ink); }
.campo-tabla:hover, .campo-tabla:focus { border-color: var(--line); background: var(--card); }
.campo-tabla.guardado { border-color: var(--pos) !important; background: #E8F3F1 !important; }
/* Importar en tres pasos */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.paso { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; }
.paso .num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.paso .num b { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; line-height: 20px; font-size: 11px; margin-right: 6px; }
.paso.ok { border-top: 3px solid var(--pos); } .paso.mal { border-top: 3px solid var(--neg); }

/* CRM: embudo en columnas */
.embudo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .embudo { grid-template-columns: 1fr; } }
.embudo .col { background: var(--soft); border: 1px solid var(--line); padding: 10px; min-height: 160px; }
.embudo .col-h { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 10px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; }
.op { padding: 10px 12px; margin-bottom: 8px; cursor: pointer; border-left: 3px solid var(--line); }
.op:hover { border-left-color: var(--ink); }
.op.vencida { border-left-color: var(--neg); }
.op-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; }
.op-v { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; margin: 6px 0 2px; }
.op-f { margin-top: 4px; }
.plan .kpi-n { font-size: 22px; }

/* ── Importar ──────────────────────────────────────────────────────────── */
.subir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; margin: 12px 0; }
.resultado { padding: 14px; margin: 12px 0; }
details.av { font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); }
details.av summary { cursor: pointer; }
details.av ul { margin: 6px 0; padding-left: 20px; color: var(--muted); font-size: 12px; }

@media print { body { background: #fff; } .topbar, button, .filtros, .togs { display: none !important; } }