:root {
  color-scheme: light;
  --bg: #f4f2ec;
  --panel: #ffffff;
  --panel-2: #f8f6f1;
  --ink: #0d1730;
  --ink-2: #414a5c;
  --muted: #6d7686;
  --line: #e2ddd3;
  --line-2: #cfc9bd;
  --accent: #d9722f;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6d2;
  --navy: #0d1730;
  --navy-2: #172347;
  --navy-ink: #e9ecf4;
  --navy-muted: #9aa5c0;
  --good: #1f8a4c; --good-soft: #dcf2e4;
  --warn: #b7791f; --warn-soft: #fbeccb;
  --bad: #c0392b; --bad-soft: #f9dcd8;
  --info: #2a78d6; --info-soft: #dbe8fa;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #4a3aa7;
  --shadow: 0 1px 2px rgba(13,23,48,.06), 0 8px 24px -12px rgba(13,23,48,.18);
  --radius: 10px;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1526; --panel: #171e34; --panel-2: #1d2540; --ink: #e8ebf3; --ink-2: #c3c9d8; --muted: #8e97ab;
    --marca-nombre: #4fb6bf; --line: #2a3350; --line-2: #3a4463; --accent: #e9a63a; --accent-ink: #1b1305; --accent-soft: #3a2a12;
    --navy: #0a0f1e; --navy-2: #121a30; --navy-ink: #e9ecf4; --navy-muted: #8b95b3;
    --good: #4cc27a; --good-soft: #14351f; --warn: #e2a63a; --warn-soft: #3a2c0f; --bad: #ef6b5d; --bad-soft: #3f1a16; --info: #5aa0f0; --info-soft: #14284a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1526; --panel: #171e34; --panel-2: #1d2540; --ink: #e8ebf3; --ink-2: #c3c9d8; --muted: #8e97ab;
  --marca-nombre: #4fb6bf; --line: #2a3350; --line-2: #3a4463; --accent: #e9a63a; --accent-ink: #1b1305; --accent-soft: #3a2a12;
  --navy: #0a0f1e; --navy-2: #121a30; --navy-ink: #e9ecf4; --navy-muted: #8b95b3;
  --good: #4cc27a; --good-soft: #14351f; --warn: #e2a63a; --warn-soft: #3a2c0f; --bad: #ef6b5d; --bad-soft: #3f1a16; --info: #5aa0f0; --info-soft: #14284a;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.45; min-height: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
p { margin: 0; }
a { color: var(--info); }
button { font: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.small { font-size: 12px; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { background: var(--navy); color: var(--navy-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { padding: 20px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca .nombre { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.marca .nombre span { color: var(--accent); }
.marca .sub { font-size: 11px; color: var(--navy-muted); margin-top: 2px; }
.nav { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 2px; }
.nav .grupo { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-muted); padding: 14px 10px 4px; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
.nav .grupo:hover { color: var(--navy-ink); }
.nav .grupo .icono-menu { width: 14px; height: 14px; transition: transform .15s; }
.nav .grupo[aria-expanded="false"] .icono-menu { transform: rotate(-90deg); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--navy-ink); text-decoration: none; font-size: 13.5px; }
.nav .icono-menu { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a .icono-menu { color: var(--navy-muted); }
.nav a.activo .icono-menu { color: inherit; }
.nav .grupo-items { display: flex; flex-direction: column; gap: 2px; }
.nav .grupo-items[hidden] { display: none; }
.nav a:hover { background: rgba(255,255,255,.06); }
.nav a.activo { background: var(--accent); color: var(--accent-ink); }
.nav a .badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,.12); padding: 1px 7px; border-radius: 99px; }
.principal { min-width: 0; }
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.barra .titulo { flex: 1; min-width: 0; }
.barra .titulo h1 { font-size: 18px; }
.barra .titulo .ruta { font-size: 12px; color: var(--muted); }
.barra .hoy { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.contenido { padding: 22px 24px 60px; max-width: 1400px; }
.menu-movil { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .lateral .nav { display: none; }
  .lateral.abierto .nav { display: flex; }
  .marca { display: flex; align-items: center; justify-content: space-between; }
  .menu-movil { display: inline-flex; background: transparent; border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 8px; padding: 6px 10px; }
  .barra { padding: 10px 16px; flex-wrap: wrap; }
  .contenido { padding: 16px 16px 60px; }
}

/* ---------- componentes ---------- */
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.c5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.tarjeta.plana { box-shadow: none; }
.tarjeta h2, .tarjeta h3 { margin-bottom: 8px; }
.tarjeta .cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tarjeta .cabeza h2, .tarjeta .cabeza h3 { margin: 0; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi .etiqueta { font-size: 12px; color: var(--muted); }
.kpi .valor { font-family: var(--font-mono); font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .valor.chico { font-size: 18px; }
.kpi .pie { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi.acento { border-left: 4px solid var(--accent); }
.kpi.bueno { border-left: 4px solid var(--good); }
.kpi.alerta { border-left: 4px solid var(--warn); }
.kpi.malo { border-left: 4px solid var(--bad); }
.seccion { margin-top: 22px; }
.seccion > .cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.seccion > .cabeza h2 { font-size: 16px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pill.bueno { background: var(--good-soft); color: var(--good); border-color: transparent; }
.pill.alerta { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.malo { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.pill.acento { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.ejemplo { background: transparent; border-style: dashed; color: var(--muted); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.boton { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.boton:hover { border-color: var(--ink-2); }
.boton.primario { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.boton.primario:hover { filter: brightness(.95); }
.boton.sutil { border-color: transparent; background: transparent; color: var(--info); padding: 4px 6px; }
.boton.chico { padding: 4px 9px; font-size: 12px; }
.boton.peligro { color: var(--bad); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* tablas */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; font-weight: 500; }
table.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tr.clic { cursor: pointer; }
table.tabla tr.clic:hover td { background: var(--panel-2); }
table.tabla tr.apagada td { opacity: .55; }
table.tabla td.num, table.tabla th.num { text-align: right; }
table.tabla tr.total td { font-weight: 700; background: var(--panel-2); }
table.tabla td .sub { display: block; font-size: 12px; color: var(--muted); }
.vacio { padding: 30px; text-align: center; color: var(--muted); }

/* formularios */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.form .ancho { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: 12px; color: var(--muted); font-weight: 600; }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); width: 100%; }
.campo input[type=number], .campo input[data-num] { font-family: var(--font-mono); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo textarea { min-height: 70px; resize: vertical; }
.campo .ayuda { font-size: 11px; color: var(--muted); }
.campo.inline { flex-direction: row; align-items: center; gap: 8px; }
.campo.inline input[type=checkbox] { width: auto; }
/* formulario a cuatro columnas: cada etiqueta en una línea para que los controles queden parejos */
.form-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.form-cuatro > .doble { grid-column: span 2; }
.form-cuatro > .campo > label, .campo-titulo > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.enlace-campo { background: none; border: none; padding: 0; font: inherit; font-size: 12px; line-height: inherit; color: var(--info); cursor: pointer; white-space: nowrap; }
.enlace-campo:hover { text-decoration: underline; }
@media (max-width: 760px) { .form-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .form-cuatro { grid-template-columns: minmax(0, 1fr); } .form-cuatro > .doble { grid-column: auto; } }
.panel-form[hidden], [data-modo][hidden] { display: none; }
.panel-form > .subform { margin-top: 0 !important; }
.segmento-fila { margin-bottom: 12px; }
.segmento { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.segmento button { background: var(--panel); border: none; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmento button + button { border-left: 1px solid var(--line-2); }
.segmento button.activa { background: var(--accent); color: #fff; }
.nota-version { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); width: 100%; min-width: 120px; }
.subform { grid-column: 1 / -1; border: 1px dashed var(--line-2); border-radius: 8px; padding: 12px; background: var(--panel-2); }
.subform h4 { font-size: 13px; margin-bottom: 8px; }
.lineas { grid-column: 1 / -1; }
.lineas table td { padding: 4px 6px; }
.lineas input, .lineas select { padding: 5px 7px; font-size: 13px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); width: 100%; font: inherit; }

/* modales */
dialog.modal { border: none; border-radius: 14px; padding: 0; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 40px); background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
dialog.modal::backdrop { background: rgba(8,12,28,.55); backdrop-filter: blur(2px); }
.modal .cabecera { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); gap: 12px; }
.modal .cabecera h2 { font-size: 17px; }
.modal .cuerpo { padding: 18px 22px; overflow-y: auto; max-height: calc(100vh - 190px); }
.modal .pie { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal .pie .der { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.cerrar { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--muted); padding: 4px 8px; }

/* pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.pestanas button { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pestanas button.activa { color: var(--ink); border-bottom-color: var(--accent); }

/* toast + guardado */
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(380px, calc(100vw - 36px)); }
.toast { background: var(--navy); color: var(--navy-ink); padding: 10px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
.toast.bueno { border-left-color: var(--good); }
.toast.malo { border-left-color: var(--bad); }
.estado-guardado { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.estado-guardado .punto.sucio { background: var(--warn); }
.estado-guardado .punto.limpio { background: var(--good); }

/* gráficas */
.grafica { width: 100%; overflow: visible; font-family: var(--font-mono); font-size: 11px; }
.grafica text { fill: var(--muted); }
.grafica .eje line, .grafica .rejilla line { stroke: var(--line); }
.grafica .eje-base { stroke: var(--line-2); }
.grafica .barra { rx: 3; }
.grafica .linea { fill: none; stroke-width: 2; }
.grafica .area { opacity: .12; }
.grafica .marcador { stroke: var(--panel); stroke-width: 2; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tooltip { position: fixed; pointer-events: none; background: var(--navy); color: var(--navy-ink); padding: 6px 10px; border-radius: 8px; font-size: 12px; font-family: var(--font-mono); z-index: 200; box-shadow: var(--shadow); white-space: nowrap; }

/* embudo y kanban */
.embudo { display: flex; flex-direction: column; gap: 6px; }
.embudo .nivel { display: grid; grid-template-columns: 200px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.embudo .nivel .barra-e { height: 22px; border-radius: 4px; background: var(--s1); min-width: 4px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban .columna { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.kanban .columna h4 { font-size: 12px; display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ink-2); }
.kanban .carta { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font-size: 12.5px; }
.kanban .carta:hover { border-color: var(--accent); }
.kanban .carta .monto { font-family: var(--font-mono); font-weight: 600; }
.kanban .carta .cli { font-weight: 700; }

/* misc */
.barra-progreso { height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--accent); }
.barra-progreso.bueno i { background: var(--good); } .barra-progreso.alerta i { background: var(--warn); } .barra-progreso.malo i { background: var(--bad); }
.lista-simple { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-simple li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-simple li:last-child { border-bottom: none; }
.aviso { padding: 10px 14px; border-radius: 8px; background: var(--info-soft); color: var(--ink); border-left: 4px solid var(--info); font-size: 13px; }
.aviso.alerta { background: var(--warn-soft); border-left-color: var(--warn); }
.aviso.malo { background: var(--bad-soft); border-left-color: var(--bad); }
.aviso.bueno { background: var(--good-soft); border-left-color: var(--good); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtros input, .filtros select { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); }
.detalle-lista { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 13px; }
.detalle-lista dt { color: var(--muted); }
.detalle-lista dd { margin: 0; }
.arbol .concepto { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: var(--panel); }
.arbol .concepto > summary { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-weight: 700; list-style: none; }
.arbol .concepto > summary::-webkit-details-marker { display: none; }
.arbol .concepto .hijos { border-top: 1px solid var(--line); padding: 6px 14px 10px; }
.semaforo { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.semaforo.verde { background: var(--good); } .semaforo.amarillo { background: var(--warn); } .semaforo.rojo { background: var(--bad); }
.cronologia { border-left: 2px solid var(--line-2); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.cronologia .paso { position: relative; font-size: 13px; }
.cronologia .paso::before { content: ""; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cronologia .paso .cuando { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.chip-mod { font-family: var(--font-mono); font-size: 10.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .lateral, .barra, .boton { display: none !important; } .app { display: block; } }

/* ---------- pantalla de entrada (módulo N) ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--bg) 60%); }
.entrada .caja { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px; width: min(440px, 100%); box-shadow: var(--shadow); }
.entrada .marca-entrada { margin-bottom: 18px; }
.entrada .marca-entrada .nombre { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.entrada .marca-entrada .nombre span { color: var(--accent); }
.entrada .marca-entrada .sub { font-size: 12px; color: var(--muted); }
.entrada h2 { font-size: 17px; margin-bottom: 14px; }
.entrada .aviso { margin-top: 12px; }

/* ---------- usuario en la barra ---------- */
.usuario-barra { display: flex; align-items: center; gap: 8px; }
.chip-usuario { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px 3px 3px; cursor: pointer; color: inherit; }
.chip-usuario:hover { border-color: var(--accent); }
.chip-usuario .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--navy-ink); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.chip-usuario .quien { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.chip-usuario .quien .nom { font-size: 12.5px; font-weight: 700; }
.chip-usuario .quien .rol { font-size: 10.5px; color: var(--muted); }
@media (max-width: 860px) { .chip-usuario .quien { display: none; } }

/* ---------- vista previa de invoice (formato americano) ---------- */
.invoice-previa { background: #fff; color: #1a1a1a; border: 1px solid var(--line); border-radius: 10px; padding: 0 0 26px; max-width: 760px; margin: 0 auto; font-family: var(--font-body); overflow: hidden; }
.invoice-previa .filete { height: 5px; background: #007ac2; }
.invoice-previa > *:not(.filete) { padding-left: 34px; padding-right: 34px; }
.invoice-previa .inv-cab { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; flex-wrap: wrap; }
.invoice-previa .inv-emisor { display: flex; gap: 16px; align-items: flex-start; }
.invoice-previa .inv-logo { width: 116px; height: auto; }
.invoice-previa .inv-nombre { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.invoice-previa .inv-dir { font-size: 12.5px; color: #6d7686; }
.invoice-previa .inv-dir.oscuro { color: #1a1a1a; }
.invoice-previa .inv-meta { text-align: right; min-width: 150px; }
.invoice-previa .inv-meta .inv-num { font-weight: 700; font-size: 13px; }
.invoice-previa .inv-meta .et { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: #6d7686; margin-top: 10px; }
.invoice-previa .inv-meta .va { font-size: 13px; }
.invoice-previa .inv-meta .va.grande { font-size: 15px; font-weight: 700; }
.invoice-previa .inv-billto { margin-top: 24px; border-top: 1px solid #e0e0e0; padding-top: 20px; }
.invoice-previa .inv-billto .et { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: #6d7686; }
.invoice-previa .inv-cli { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 6px 0 6px; }
.invoice-previa .inv-tabla { width: calc(100% - 68px); margin: 22px 34px 0; border-collapse: collapse; font-size: 12.5px; }
.invoice-previa .inv-tabla th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: #6d7686; text-align: left; border-bottom: 1px solid #d6d6d6; padding-bottom: 7px; font-weight: 500; }
.invoice-previa .inv-tabla th.der, .invoice-previa .inv-tabla td.der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-previa .inv-tabla td { padding: 12px 0; border-bottom: 1px dashed #e4e4e4; vertical-align: top; }
.invoice-previa .inv-totales { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 12.5px; }
.invoice-previa .inv-totales div { display: flex; gap: 22px; }
.invoice-previa .inv-totales span { color: #6d7686; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; align-self: center; }
.invoice-previa .inv-totales b { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.invoice-previa .inv-totales .grande b { font-size: 15px; }
.invoice-previa .inv-pie { margin-top: 18px; font-size: 11px; color: #6d7686; border-top: 1px solid #e0e0e0; padding-top: 10px; }

/* ---- reportes personalizados y guía de procesos ---- */
.barra-mini { display: inline-block; width: 70px; height: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.barra-mini span { display: block; height: 100%; background: var(--s1); }
.fila-filtro select, .fila-filtro input { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--ink); font-size: 13px; }
.pasos-guia { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.pasos-guia > li { margin-bottom: 10px; }
.paso-guia { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.paso-guia .n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--s1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.paso-guia .cuerpo { flex: 1; }
.paso-guia .cuerpo p { margin: 0; line-height: 1.5; }
.letra-mini { font-family: var(--font-mono); font-size: 10px; opacity: .8; margin-right: 4px; }
.tarjeta.clic:hover { border-color: var(--line-2); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* ---- marca / logotipo ---- */
.marca-guardian { display: flex; align-items: center; gap: 10px; }
.marca-guardian .logo { flex: none; width: 34px; height: 34px; display: block; }
.marca-guardian .logo svg { width: 100%; height: 100%; display: block; }
.marca-guardian .logo img, .burbuja .logo img, h3 .logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.marca-guardian .texto { display: flex; flex-direction: column; min-width: 0; }
.marca-guardian .nombre { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.1; }
.marca-guardian .nombre span { color: var(--accent); }
.marca-guardian .sub { font-size: 11px; color: var(--navy-muted); margin-top: 2px; }
.lateral .marca-guardian .nombre { font-size: 17px; white-space: nowrap; }
.marca-guardian.grande { margin-bottom: 18px; }
.marca-guardian.grande .logo { width: 46px; height: 46px; }
.marca-guardian.grande .nombre { font-size: 26px; color: var(--marca-nombre, #03646c); }
.marca-guardian.grande .nombre span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.marca-guardian.grande .sub { color: var(--muted); font-size: 12px; }
.marca-guardian .logo.auto > span { display: block; width: 100%; height: 100%; }
.marca-guardian .logo.auto > .en-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca-guardian .logo.auto > .en-claro { display: none; }
  :root:not([data-theme="light"]) .marca-guardian .logo.auto > .en-oscuro { display: block; }
}
:root[data-theme="dark"] .marca-guardian .logo.auto > .en-claro { display: none; }
:root[data-theme="dark"] .marca-guardian .logo.auto > .en-oscuro { display: block; }

/* ---- asistente ---- */
.asistente { display: flex; flex-direction: column; gap: 14px; }
.resumen-dia { border-left: 3px solid var(--accent); }
.resumen-dia .cabeza h3 { display: flex; align-items: center; gap: 8px; }
.resumen-dia .cabeza h3 .logo { width: 22px; height: 22px; display: inline-block; }
.resumen-dia .cabeza h3 .logo svg { width: 100%; height: 100%; display: block; }
.chat { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow-y: auto; padding: 4px; }
.burbuja { border-radius: 14px; padding: 14px 16px; max-width: 100%; }
.burbuja.usuario { background: var(--navy); color: var(--navy-ink); align-self: flex-end; max-width: min(620px, 90%); border-bottom-right-radius: 4px; }
.burbuja.usuario p { margin: 0; }
.burbuja.guardian { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-bottom-left-radius: 4px; }
.burbuja.guardian .quien { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.burbuja.guardian .quien .logo { width: 18px; height: 18px; display: inline-block; }
.burbuja.guardian .quien .logo svg { width: 100%; height: 100%; display: block; }
.burbuja.guardian h4 { font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.burbuja.guardian p { margin: 0; line-height: 1.55; }
.burbuja .respuesta-ia { margin-top: 10px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; border-left: 2px solid var(--s1); line-height: 1.55; }
.chat-barra { display: flex; gap: 8px; align-items: center; }
.chat-barra input { flex: 1; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); color: var(--ink); font-size: 14px; font-family: inherit; }
.chat-barra input:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.chips .chip:hover { border-color: var(--accent); color: var(--ink); }
.entrada-origen { display: flex; align-items: center; gap: 6px; }
.entrada-origen .punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); }
.entrada-origen .punto.limpio { background: var(--good); }
.entrada-origen .punto.sucio { background: var(--warn); }
.enlace { background: none; border: none; padding: 0 0 0 6px; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.enlace:hover { color: var(--accent); }
.acciones.fila-botones { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
table.tabla td .acciones.fila-botones .boton { white-space: nowrap; }

/* ---- avisos que se pueden cerrar ---- */
.aviso.con-cerrar { position: relative; padding-right: 34px; }
.cerrar-aviso { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; line-height: 1; border: none; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; border-radius: 6px; }
.cerrar-aviso:hover { background: rgba(0,0,0,.07); color: var(--ink); }
.avisos-ocultos { margin-bottom: 10px; }

/* catálogo de tarifas agrupado por unidad y producto */
.grupo-tarifas { margin-top: 10px; }
.grupo-tarifas + .grupo-tarifas { margin-top: 16px; }
.grupo-titulo { font-size: 13px; font-weight: 600; letter-spacing: .01em; margin-bottom: 6px; padding-left: 8px; border-left: 3px solid var(--accent); }

/* barras de filtro con botones en lugar de dropdown */
.acciones.filtro-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.acciones.filtro-botones .boton { font-weight: 600; }
.acciones.filtro-botones .boton .mono { opacity: .65; font-weight: 500; margin-left: 2px; }

/* reportes contables: jerarquía de renglones */
#tabla-contable td { padding-top: 5px; padding-bottom: 5px; }
#tabla-contable tr.fila-encabezado td { background: var(--panel-2, var(--panel)); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--muted); padding-top: 12px; }
#tabla-contable tr.fila-subtotal td { border-top: 1px solid var(--line-2); font-weight: 600; }
#tabla-contable tr.fila-total td { border-top: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); font-weight: 700; }
#tabla-contable td.negativo { color: var(--bad); }

/* facturación dividida por razón social y barra de periodo */
.seccion.razon-social { margin-top: 18px; }
.seccion.razon-social .cabeza h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.serie-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.acciones.filtro-botones.periodo { align-items: center; }
.rango-fechas { display: inline-flex; align-items: center; gap: 6px; }
.rango-fechas input { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); }

/* facturas importadas de otro sistema, con el estatus por confirmar */
.pill.importada { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }

/* cargas deshechas en el historial */
table.tabla tr.deshecha td { opacity: .55; }

/* iconos en línea, panel plegable de gráficas y renglones por moneda en los indicadores */
.ico { vertical-align: -3px; margin-right: 2px; }
.boton .ico { opacity: .85; }
details.plegable { margin-top: 16px; }
details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { font-size: 14px; margin: 0; }
details.plegable > summary::before { content: '▸'; color: var(--muted); margin-right: 6px; }
details.plegable[open] > summary::before { content: '▾'; }
details.plegable[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.plegable > .tarjeta { border-top-left-radius: 0; border-top-right-radius: 0; }
.kpi .linea-moneda { font-size: 15px; line-height: 1.35; }
.kpi .linea-moneda .mono { font-size: 11px; color: var(--muted); margin-right: 4px; }
.kpi .linea-moneda .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* ---------- avisos encima de los modales (popover en la capa superior) ---------- */
.toasts[popover] { inset: auto 18px 18px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }

/* ---------- listas con buscador (src/interfaz.js) ---------- */
.combo { position: relative; display: inline-block; vertical-align: middle; }
.combo.bloque { display: block; width: 100%; }
.combo .combo-nativo { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.combo-texto { font: inherit; font-size: 13.5px; padding: 8px 30px 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--ink); width: 100%; }
.filtros .combo-texto, .fila-filtro .combo-texto { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.combo-texto:focus { outline: 2px solid var(--s1); outline-offset: -1px; }
.combo-lista { position: fixed; z-index: 1000; overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.35); padding: 4px; }
.combo-op { padding: 7px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.combo-op:hover, .combo-op.activa { background: var(--panel-2); }
.combo-op.elegida { font-weight: 600; }
.combo-op.vacia { color: var(--muted); }
.combo-mas { padding: 7px 10px; font-size: 12px; color: var(--muted); }

/* ---------- tablas ordenables (clic en el encabezado) ---------- */
table.tabla thead th { cursor: pointer; user-select: none; }
table.tabla thead th:empty, table.tabla thead th[data-sin-orden] { cursor: default; }
table.tabla thead th:hover { color: var(--ink); }
table.tabla thead th[aria-sort="ascending"]::after { content: ' ▲'; font-size: 9px; }
table.tabla thead th[aria-sort="descending"]::after { content: ' ▼'; font-size: 9px; }

/* ---------- Órdenes de servicio: visor contrato × mes ---------- */
table.os-matriz td:first-child { min-width: 200px; }
table.os-matriz td .sub { display: block; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
table.os-matriz tr.total td .sub { font-weight: 400; }
td.os-celda.os-parcial { background: rgba(232, 143, 46, .14); }
td.os-celda.os-facturada { background: rgba(58, 118, 210, .14); }
td.os-celda.os-cobrada { background: rgba(46, 160, 92, .16); }
tr.os-partida td { background: var(--panel-2); }
i.os-leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 2px 0 8px; vertical-align: middle; background: var(--line-2); }
i.os-leyenda.os-parcial { background: rgba(232, 143, 46, .6); }
i.os-leyenda.os-facturada { background: rgba(58, 118, 210, .6); }
i.os-leyenda.os-cobrada { background: rgba(46, 160, 92, .7); }
.agrupar-por select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--ink); margin-left: 4px; }
.seccion.grupo { margin-top: 12px; }
.seccion.grupo > .cabeza h3 { font-size: 14px; }
.texto-malo { color: var(--bad); }
.texto-bueno { color: var(--good); }

/* ---------- CFDI: vista previa editable de la factura (src/cfdipdf.js) ---------- */
.cfdi-editor { display: grid; gap: 12px; }
.cfdi-editor .aviso ul.cfdi-errores { margin: 6px 0 0 18px; padding: 0; columns: 2 320px; column-gap: 24px; }
.cfdi-editor .aviso ul.cfdi-errores li { font-size: 12.5px; margin: 2px 0; break-inside: avoid; }
.cfdi-editor .aviso ul.cfdi-errores li.falta::marker { color: #b7791f; }
.cfdi-editor .aviso ul.cfdi-errores li.error::marker { color: #c0392b; }
.cfdi-editor .aviso ul.cfdi-errores a { color: inherit; }
.cfdi-doc { background: #fff; color: #1a1a1a; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px 16px; border-top: 4px solid #d9722f; box-shadow: var(--shadow); overflow-x: auto; }
.cfdi-doc .muted, .cfdi-doc small.muted, .cfdi-doc em.muted { color: #6e7686; }
.cfdi-cab { display: grid; grid-template-columns: 120px 1fr 230px; gap: 16px; align-items: start; }
.cfdi-logo { width: 116px; margin-top: 4px; }
.cfdi-et { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #d9722f; margin-bottom: 4px; }
.cfdi-par { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0; flex-wrap: wrap; }
.cfdi-par > span:first-child { color: #6e7686; min-width: 118px; font-size: 11.5px; }
.cfdi-folio { background: #f7f5f0; border: 1px solid #e2ddd3; border-radius: 8px; padding: 10px 12px; }
.cfdi-tipo { font-weight: 800; color: #d9722f; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.cfdi-serie { font-size: 17px; font-weight: 700; text-align: right; margin: 2px 0 6px; font-family: var(--font-mono); }
.cfdi-cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid #e2ddd3; }
.cfdi-in { font: inherit; font-size: 12.5px; color: #1a1a1a; background: #fff; border: 1px solid #d8d3c8; border-radius: 5px; padding: 3px 6px; max-width: 100%; }
.cfdi-in:focus { outline: 2px solid #d9722f55; border-color: #d9722f; }
.cfdi-in.grande { font-size: 14.5px; font-weight: 700; width: 100%; margin-bottom: 2px; }
select.cfdi-in { max-width: 280px; }
textarea.cfdi-in { width: 100%; min-width: 220px; resize: vertical; }
.cfdi-in.falta, .cfdi-doc .falta { background: #fff4d6 !important; border-color: #e0a100 !important; box-shadow: 0 0 0 2px #f6d77a66; }
.cfdi-in.error, .cfdi-doc .error { background: #fde8e6 !important; border-color: #c0392b !important; box-shadow: 0 0 0 2px #f2b0a866; }
.cfdi-doc span.falta, .cfdi-doc div.falta, .cfdi-doc span.error, .cfdi-doc div.error { border: 1px solid; border-radius: 5px; padding: 0 4px; }
.cfdi-muestra { padding: 0 5px; border-radius: 4px; border: 1px solid; }
.cfdi-muestra.falta { background: #fff4d6; border-color: #e0a100; color: #6b4a00; }
.cfdi-muestra.error { background: #fde8e6; border-color: #c0392b; color: #7a1d12; }
.cfdi-tabla { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
.cfdi-tabla th { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #6e7686; text-align: left; background: #f7f5f0; padding: 6px 6px; }
.cfdi-tabla td { padding: 6px 6px; border-bottom: 1px dashed #e6e2d9; vertical-align: top; }
.cfdi-tabla .num { text-align: right; white-space: nowrap; }
.cfdi-mini { font-size: 11px; color: #6e7686; margin-top: 3px; }
.cfdi-pie { display: grid; grid-template-columns: 1fr 260px; gap: 20px; margin-top: 14px; }
.cfdi-letra { font-size: 12px; font-weight: 600; }
.cfdi-totales > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.cfdi-totales > div.grande { border-top: 2px solid #1a1a1a; margin-top: 4px; padding-top: 6px; font-size: 15px; }
.cfdi-timbre-previa { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2ddd3; }
.cfdi-qr-vacio { width: 64px; height: 64px; border: 1px dashed #b9b3a6; border-radius: 6px; display: grid; place-items: center; color: #9a9384; font-size: 11px; flex: none; }
@media (max-width: 760px) {
  .cfdi-cab { grid-template-columns: 1fr; } .cfdi-logo { width: 90px; }
  .cfdi-cajas, .cfdi-pie { grid-template-columns: 1fr; }
  .cfdi-par > span:first-child { min-width: 0; }
}
.cfdi-doc .combo:has(select.falta) .combo-texto { background: #fff4d6 !important; border-color: #e0a100 !important; box-shadow: 0 0 0 2px #f6d77a66; }
.cfdi-doc .combo:has(select.error) .combo-texto { background: #fde8e6 !important; border-color: #c0392b !important; box-shadow: 0 0 0 2px #f2b0a866; }
.cfdi-doc .combo .combo-texto { font-size: 12.5px; padding: 3px 26px 3px 6px; background-color: #fff; color: #1a1a1a; border-color: #d8d3c8; }
.filtro-botones label.boton { cursor: pointer; }
.filtro-botones label.boton:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* ---------- embudo en pastel (vistas-comercial.js) ---------- */
.pastel { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pastel .grafica { flex: 0 0 auto; width: 240px; }
.pastel .rebanada { stroke: var(--panel); stroke-width: 2px; }
.pastel .pastel-pct { fill: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.pastel-leyenda { flex: 1 1 280px; display: grid; gap: 4px; font-size: 13px; }
.pastel-fila { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 10px; align-items: center; padding: 3px 0; }
.pastel-fila i { width: 12px; height: 12px; border-radius: 3px; }
.pastel-fila.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; font-weight: 600; }
.grafica text.valor { font-weight: 700; fill: var(--ink); }

/* ---------- selector global de unidad de negocio (barra superior) ---------- */
.selector-unidad { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.selector-unidad select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 220px; }
.aviso-unidad { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; margin-bottom: 12px; }
.aviso-unidad .enlace { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
/* kanban arrastrable */
.kanban .carta[draggable=true] { cursor: grab; }
.kanban .carta.arrastrando { opacity: .45; }
.kanban .columna.destino { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.kanban .columna.cierre { border-style: dashed; }

/* bloque plegable (gráficas ocultas hasta que se piden) */
.plegable .plegable-cuerpo { display: none; }
.plegable.abierto .plegable-cuerpo { display: block; margin-top: 10px; }
.plegable .boton span + * { display: inline-block; transition: transform .15s; }
.plegable.abierto .cabeza .boton { transform: none; }

/* ---------- Cobertura para socios (vistas-socios.js) ---------- */
.soc-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.soc-vivo { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.soc-vivo .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; box-shadow: 0 0 0 3px var(--good-soft); }
.soc-hero { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.soc-grande { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 4.6rem); line-height: 1; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 8px; }
.soc-aseg { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.soc-aseg strong { font-size: 1.35rem; }
.soc-barra { position: relative; display: flex; height: 22px; border-radius: 4px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.soc-barra > div:not(.soc-meta) { height: 100%; min-width: 0; }
.soc-barra > div:first-child { border-radius: 4px 0 0 4px; }
.soc-barra.grande { height: 40px; }
.soc-meta { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed var(--ink); }
.soc-leyenda { margin-top: 10px; }
.soc-leyenda i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.soc-meta-i { border-left: 2px dashed var(--ink); width: 2px !important; background: none !important; height: 14px !important; }
.soc-kpis { margin-top: 14px; }
.soc-kpis .kpi .valor { font-size: 1.35rem; }
.soc-brecha { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--ink); font-size: .92rem; }
.soc-brecha.ok { background: var(--good-soft); }
.soc-lineas { display: grid; gap: 4px; }
.soc-linea { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) minmax(110px, 150px); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.soc-l-n, .soc-l-v { display: flex; flex-direction: column; line-height: 1.25; }
.soc-l-v { text-align: right; }
.soc-l-v strong { font-size: 1.2rem; }
.soc-senal { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.soc-senal:last-child { border-bottom: 0; }
.soc-senal > b { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; color: var(--ink-2); }
.soc-senal > b small { font-size: .55em; }
.soc-senal.malo > b { color: var(--bad); }
.soc-senal.alerta > b { color: var(--warn); }
.soc-senal.bueno > b { color: var(--good); }
.soc-rec { display: grid; }
.soc-rec-f { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.soc-rec-f:last-child { border-bottom: 0; }
.soc-como { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .92rem; }
@media (max-width: 760px) {
  .soc-hero { grid-template-columns: 1fr; }
  .soc-linea { grid-template-columns: 1fr auto; }
  .soc-l-b { grid-column: 1 / -1; grid-row: 2; }
  .soc-rec-f { grid-template-columns: 1fr auto; }
  .soc-rec-f > span:first-child { grid-column: 1 / -1; }
}
.soc-hero .soc-grande { text-align: left; }
.grid.soc-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.soc-kpis .kpi { padding: 10px 12px; }
.soc-curva .grafica { font-size: 12.5px; }
@media (max-width: 760px) {
  .soc-curva { overflow-x: auto; }
  .soc-curva .grafica { min-width: 480px; }
  .soc-kpis .kpi .valor { font-size: 1.1rem; }
}