/* =====================================================
   Tema día/noche con variables CSS (a nivel aplicación).
   Cambiar de tema = setear data-theme="light|dark" en <html>.
   El "papel tapiz" (escritorio) se mantiene azul; cambian las
   superficies (ventanas, formularios, grillas, barras).
   ============================================================ */
/* Densidad y tamaño de fuente de las grillas, configurables por usuario
   (menú Inicio → Preferencias). El tema Quartz deriva alto de fila y de
   header de estas dos variables, así que con cambiarlas alcanza. */
.ag-theme-quartz, .ag-theme-quartz-dark {
  --ag-font-size: var(--ux-grid-font, 14px);
  --ag-grid-size: var(--ux-grid-size, 8px);
}
/* Grillas sin registros: no mostrar el cartel "No Rows To Show" (global). */
.ag-overlay-no-rows-wrapper { display: none !important; }
/* Fila seleccionada BIEN marcada (pedido de Hugo 2026-09-08): los botones de
   la barra operan sobre esta fila, así que tiene que verse sin dudas — fondo
   acento + barra izquierda + negrita, en tema claro y oscuro. */
/* Sin clase de tema como ancestro: las grillas usan la Theming API de AG Grid
   (los contenedores son .crud-grid pelados), así que el selector va directo.
   !important: el semáforo de leads pinta el fondo con style inline y sin esto
   la selección desaparece justo en las filas rojas/ámbar (las más riesgosas
   para operar la equivocada). El puntito 🔴/🟡 sigue diciendo la urgencia. */
.ag-row-selected {
  background-color: color-mix(in srgb, var(--accent), transparent 78%) !important;
  box-shadow: inset 4px 0 0 var(--accent);
  /* sin negrita: cambiaba el ancho del texto y parecía que las letras se movían */
}

:root, [data-theme="light"] {
  --desk-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --bar-bg: #2b2b3c;
  --bar-fg: #eee;
  --bar-hover: #3d3d52;
  --bar-muted: #9fb8d8;
  --surface: #ffffff;     /* fondo de ventanas / contenido */
  --surface-2: #f7f7fa;   /* toolbars, zonas suaves */
  --text: #333333;
  --text-soft: #777777;
  --border: #e2e2e2;
  --input-bg: #ffffff;
  --input-border: #bbbbbb;
  --panel-bg: #f7f7fa;    /* tarjetas / píldoras sobre la superficie (antes no existía: caía a transparente) */
  --accent: #4a6cf7;
  --accent-hover: #3a5ce0;
  --legend: #4a6cf7;
  --danger: #c0392b;
}
[data-theme="dark"] {
  --desk-bg: linear-gradient(135deg, #0d1b34 0%, #11264a 100%);
  --bar-bg: #15151f;
  --bar-fg: #e8e8ee;
  --bar-hover: #2a2a3a;
  --bar-muted: #7e8aa0;
  --surface: #23232e;
  --surface-2: #2b2b38;
  --text: #e6e6ee;
  --text-soft: #9aa0b0;
  --border: #3a3a48;
  --input-bg: #2b2b38;
  --input-border: #4a4a5c;
  --panel-bg: #2b2b38;
  color-scheme: dark;     /* controles nativos (date, scroll, select) en oscuro */
  --accent: #5b7cff;
  --accent-hover: #6f8cff;
  --legend: #8aa6ff;
  --danger: #ff6b5e;
}

/* ====== Diálogo de Preferencias ====== */
.pref-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; color: var(--text); }
.pref-row { display: flex; flex-direction: column; gap: 4px; }
.pref-row label { font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; }
.pref-row label b { color: var(--accent); font-weight: 600; }
.pref-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.pref-hint { font-size: 12px; color: var(--text-soft); }
.pref-preview { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); }
.pref-preview .pp-head, .pref-preview .pp-row {
  display: grid; grid-template-columns: 64px 1fr 92px; align-items: center;
  padding: 0 10px; gap: 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pref-preview .pp-head { background: var(--surface-2); font-weight: 600; color: var(--text-soft); }
.pref-preview .pp-row:last-child { border-bottom: none; }

/* ====== Base / escritorio ====== */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px;
  user-select: none; overflow: hidden;
}

#desktop {
  position: absolute; top: 34px; left: 0; right: 0; bottom: 34px;
  background: var(--desk-bg);
  overflow: hidden;
}

/* ====== Barra de menú superior ====== */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px;
  background: var(--bar-bg); color: var(--bar-fg); display: flex; align-items: center;
  padding: 0 8px; gap: 4px; z-index: 9999;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
#topbar .brand { font-weight: 600; margin-right: 12px; color: #6cb2ff; }
/* Logo en el menú superior: recoloreado a blanco para contrastar con la barra oscura */
.brand-logo { height: 20px; margin-right: 14px; filter: brightness(0) invert(1); }
.menu { position: relative; }
.menu-title { padding: 6px 12px; cursor: pointer; border-radius: 4px; display: inline-block; }
.menu:hover .menu-title { background: var(--bar-hover); }
.menu-dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 180px;
  background: var(--bar-bg); border: 1px solid var(--border); border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); padding: 4px 0;
}
.menu:hover .menu-dropdown, .menu-dropdown.abierto { display: block; }
.menu-dropdown.menu-flotante { display: block; position: fixed; top: auto; left: auto; border-radius: 6px; z-index: 1200; }
.menu-dropdown a { display: block; padding: 8px 16px; color: var(--bar-fg); cursor: pointer; text-decoration: none; }
.menu-dropdown a:hover { background: var(--accent); color: #fff; }
.menu-dropdown hr { border: none; border-top: 1px solid var(--bar-hover); margin: 4px 0; }
#topbar .ver-deploy { margin-left: 10px; color: var(--bar-muted); font-size: 11px; opacity: .8; cursor: default; }
#topbar .clock { margin-left: auto; color: var(--bar-muted); font-variant-numeric: tabular-nums; }
#topbar .theme-toggle { cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 15px; }
#topbar .theme-toggle:hover { background: var(--bar-hover); }

/* ====== Iconos de escritorio ====== */
.desk-icon {
  position: absolute; width: 84px; text-align: center; color: #fff; cursor: grab;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 6px; border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); font-size: 12px;
  user-select: none; touch-action: none;
}
.desk-icon span { font-size: 34px; }
.desk-icon:hover { background: rgba(255,255,255,.15); }
.desk-icon.dragging { opacity: .75; cursor: grabbing; z-index: 5; }

/* ====== Barra de tareas ====== */
#taskbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 34px;
  background: var(--bar-bg); display: flex; align-items: center; gap: 6px;
  padding: 0 6px; z-index: 9999; box-shadow: 0 -1px 4px rgba(0,0,0,.4);
}
.task-start {
  background: var(--accent); color: #fff; padding: 5px 14px; border-radius: 4px;
  font-weight: 600; cursor: pointer; user-select: none;
}
/* Menú de inicio (se despliega hacia arriba desde la barra de tareas) */
.start-menu {
  display: none; position: absolute; bottom: 36px; left: 6px; min-width: 210px;
  background: var(--bar-bg); border: 1px solid var(--border); border-radius: 6px 6px 0 0;
  box-shadow: 0 -6px 18px rgba(0,0,0,.5); padding: 4px 0; z-index: 10000;
}
.start-menu.open { display: block; }
.start-menu a { display: block; padding: 9px 16px; color: var(--bar-fg); cursor: pointer; text-decoration: none; }
.start-menu a:hover { background: var(--accent); color: #fff; }
.start-menu hr { border: none; border-top: 1px solid var(--bar-hover); margin: 4px 0; }
#taskbar-items { display: flex; gap: 6px; overflow-x: auto; }
.task-item {
  background: var(--bar-hover); color: var(--bar-fg); padding: 5px 12px; border-radius: 4px;
  cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; border-bottom: 2px solid transparent;
}
.task-item:hover { filter: brightness(1.2); }
.task-item.active { border-bottom-color: #6cb2ff; color: #fff; }

/* ====== Pantalla de Login ====== */
#login-overlay {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: var(--desk-bg);
}
.login-box {
  background: var(--surface); color: var(--text);
  padding: 28px 26px; border-radius: 10px; width: 300px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px;
}
.login-logo { display: block; margin: 0 auto 10px; height: 40px; }
[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }   /* blanco en modo oscuro */
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box input {
  padding: 9px 10px; border: 1px solid var(--input-border); border-radius: 5px;
  background: var(--input-bg); color: var(--text); font-size: 14px;
}
.lg-sub { font-weight: 600; color: var(--text); text-align: center; }
.lg-error { color: var(--danger); font-size: 12px; min-height: 14px; text-align: center; }
.lg-msg { color: var(--text-soft); font-size: 12px; min-height: 14px; text-align: center; word-break: break-all; }
.lg-msg a { color: var(--accent); }
.lg-link { color: var(--accent); font-size: 12px; text-align: center; cursor: pointer; }
.lg-link:hover { text-decoration: underline; }

/* Watermark del logo, centrado y tenue, detrás de las ventanas */
#desk-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42%; max-width: 480px; opacity: .10; z-index: 0;
  filter: brightness(0) invert(1); pointer-events: none;
}

/* ====== Lista flotante de autocompletar (lookup) ====== */
.lookup-list {
  position: fixed; z-index: 100000;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--input-border); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  max-height: 220px; overflow-y: auto;
}
.lookup-item { padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.lookup-item b { color: var(--legend); }
.lookup-item.hi, .lookup-item:hover { background: var(--accent); color: #fff; }
.lookup-item.hi b, .lookup-item:hover b { color: #fff; }

/* ====== Overlay para ventanas modales ====== */
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
}

/* ====== Superficie de las ventanas (jsPanel) ====== */
.jsPanel-content { background: var(--surface) !important; color: var(--text); }

/* Separar visualmente las ventanas: borde fino + esquinas superiores redondeadas. */
.jsPanel { border: 1px solid var(--border); border-radius: 8px; }
.jsPanel .jsPanel-hdr { border-top-left-radius: 7px; border-top-right-radius: 7px; }
.jsPanel-content { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
.jsPanel.jsPanel-maximized { border-radius: 0; border: none; }

/* Distinguir la ventana con foco: la barra (.jsPanel-hdr lleva el color del theme)
   de las ventanas inactivas se atenúa; la activa queda a color pleno, borde de
   acento y más sombra. */
.jsPanel:not(.panel-activo) .jsPanel-hdr { filter: grayscale(.6) brightness(.72); }
.jsPanel.panel-activo { border-color: var(--accent); box-shadow: 0 12px 38px rgba(0,0,0,.5); }

/* ====== Formularios dentro de las ventanas ====== */
.form-body { padding: 14px; color: var(--text); }
.form-row { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; }
.form-row label { width: 110px; text-align: right; color: var(--text-soft); }
/* El textarea entra en la misma regla que el resto de los campos: sin esto
   usaba su ancho intrínseco (~20 caracteres) y quedaba como un cuadradito
   en medio de una fila vacía, aunque estuviera en una fila de ancho
   completo. El alto sí queda a mano del usuario (resize vertical); el
   horizontal se deja fuera porque con flex:1 el navegador lo ignora. */
.form-row input, .form-row select, .form-row textarea, .form-row .ts-wrapper {
  flex: 1; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 13px; background: var(--input-bg); color: var(--text);
}
.form-row textarea {
  resize: vertical; min-height: 34px; font-family: inherit; line-height: 1.35;
}
/* Con un textarea de varias líneas, el label centrado queda flotando a media
   altura: se alinea con la primera línea, que es donde el ojo lo busca. */
.form-row:has(textarea) { align-items: flex-start; }
.form-row:has(textarea) > label { padding-top: 7px; }
.form-row .with-btn { display: flex; flex: 1; gap: 4px; }
.form-row .with-btn input { flex: 1; }
.btn {
  background: var(--accent); color: #fff; border: none; padding: 7px 14px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--accent-hover); }
.btn.sec { background: #777; }
.btn.sec:hover { background: #666; }
[data-theme="dark"] .btn.sec { background: #4a4a5e; }
[data-theme="dark"] .btn.sec:hover { background: #5a5a72; }
[data-theme="dark"] .btn.sec:disabled:hover { background: #4a4a5e; }
/* Deshabilitado (p.ej. acción sin fila seleccionada): apagado y sin click */
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }
.btn.sec:disabled:hover { background: #777; }
.btn-sm { padding: 6px 10px; }
.form-toolbar {
  padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2);
  display: flex; gap: 8px; justify-content: flex-end;
}
.form-toolbar.left { justify-content: flex-start; }
.crud-buscar { background: var(--input-bg); color: var(--text); }
/* Árbol de permisos (Roles) */
.roltree { font-size: 13px; }
.roltree-toolbar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; flex-wrap: wrap; }
.roltree-toolbar .rt-busca { flex: 1 1 140px; min-width: 120px; }
.rt-node { border-left: 2px solid transparent; }
.rt-row { display: flex; align-items: center; gap: 6px; padding: 4px 4px; border-bottom: 1px solid var(--border); }
.rt-hub  > .rt-row { background: var(--input-bg); font-weight: 600; color: var(--text); }
.rt-seccion > .rt-row { font-weight: 500; color: var(--text); }
.rt-item > .rt-row { color: var(--text-soft); }
.rt-caret { width: 16px; flex: 0 0 16px; text-align: center; cursor: pointer; user-select: none; color: var(--text-soft); }
.rt-caret.is-leaf { visibility: hidden; }
.rt-label { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.rt-label .rt-icon { flex: 0 0 auto; }
.rt-acc { display: grid; gap: 8px; align-items: center; justify-content: end; flex: 0 0 auto; }
.rt-acc label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-soft); cursor: pointer; white-space: nowrap; overflow: hidden; }
.rt-acc label.is-disabled { opacity: .35; cursor: default; }
.rt-acc .rt-acc-empty { display: block; }
.rt-children { margin-left: 16px; }
.rt-children.collapsed { display: none; }
.rt-node.rt-hidden { display: none; }

/* Formulario en 2 columnas + secciones (para forms grandes) */
/* align-content: start — sin esto, un grid más alto que su contenido reparte el
   sobrante ENTRE las filas: al agrandar la ventana los campos se despegaban unos
   de otros. Ahora conservan su alto natural y el sobrante queda para el bloque
   de adjuntos (.form-adjuntos), que es lo único que mejora con más lugar. */
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  align-content: start; grid-auto-rows: min-content; }
.form-grid2 .form-row label { width: 120px; }
/* permitir que inputs/selects/lookup se encojan dentro de la celda (evita scroll horizontal) */
.form-grid2 .form-row, .form-grid2 .with-btn { min-width: 0; }
.form-grid2 .form-row input, .form-grid2 .form-row select, .form-grid2 .form-row textarea { min-width: 0; }
.col-full { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; font-weight: 600; color: var(--legend);
  border-bottom: 1px solid var(--border); margin: 8px 0 8px; padding-bottom: 3px; }
.grid-wrap { width: 100%; height: 100%; }
fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 12px; padding: 10px 14px; }
legend { color: var(--legend); font-weight: 600; padding: 0 6px; }
.hint { color: var(--text-soft); font-size: 12px; padding: 0 14px 10px; }

/* Selector de días (contratos): grilla responsive de checkboxes.
   auto-fill reflowa según el ancho disponible (sin scroll horizontal);
   se resetea el width/text-align que .form-row label impone por defecto. */
.dias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px 10px; width: 100%; }
.dias-grid label.dia-chk { width: auto; min-width: 0; text-align: left; margin: 0;
  display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px;
  color: var(--text); cursor: pointer; }
.dias-grid label.dia-chk input { flex: 0 0 auto; margin: 0; }

/* MsgBox (diálogo modal estilo .NET) */
.msgbox { flex: 1 1 auto; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 6px; }
.msgbox-ico { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.msgbox-text { line-height: 1.5; color: var(--text); padding-top: 3px; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }

/* ====== Dashboard Ejecutivo (neón, fondo oscuro propio) ====== */
.dash { display: flex; flex-direction: column; height: 100%;
  background: radial-gradient(1200px 600px at 20% -10%, #16183a 0%, #0a0a16 55%, #06060e 100%);
  color: #e8ecff; }
.dash-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid #ffffff1a; background: #0c0c1aee; }
.dash-top .dash-title { font-weight: 700; letter-spacing: .4px;
  background: linear-gradient(90deg, #00eaff, #9b5cff); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px #00eaff44; }
.dash-top label { font-size: 12px; color: #8ea0c8; }
.dash-top input[type="date"] { padding: 4px 7px; border: 1px solid #2a2f55; border-radius: 5px; background: #11132a; color: #e8ecff; }
.dash-top .dash-now { margin-left: auto; color: #6f7aa0; font-size: 12px; }
.dash-body { flex: 1 1 auto; overflow: auto; padding: 14px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.dash-kpi { border-radius: 14px; padding: 14px 16px; background: #11132aaa; border: 1px solid #ffffff1f;
  box-shadow: 0 0 22px #00000066; position: relative; overflow: hidden; }
.dash-kpi .v { font-size: 30px; font-weight: 800; line-height: 1.1; }
.dash-kpi .l { color: #8ea0c8; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.dash-kpi.c1 { border-color: #00eaff66; box-shadow: 0 0 26px #00eaff22, inset 0 0 18px #00eaff14; }
.dash-kpi.c1 .v { color: #00eaff; text-shadow: 0 0 16px #00eaff88; }
.dash-kpi.c2 { border-color: #ff2bd666; box-shadow: 0 0 26px #ff2bd622, inset 0 0 18px #ff2bd614; }
.dash-kpi.c2 .v { color: #ff5cdf; text-shadow: 0 0 16px #ff2bd688; }
.dash-kpi.c3 { border-color: #b6ff0066; box-shadow: 0 0 26px #b6ff0022, inset 0 0 18px #b6ff0014; }
.dash-kpi.c3 .v { color: #c6ff3a; text-shadow: 0 0 16px #b6ff0088; }
.dash-kpi.c4 { border-color: #ff8a0066; box-shadow: 0 0 26px #ff8a0022, inset 0 0 18px #ff8a0014; }
.dash-kpi.c4 .v { color: #ffa235; text-shadow: 0 0 16px #ff8a0088; }
/* Variación vs. período anterior y sublíneas de los tiles de tesorería. */
.dash-kpi .d { font-size: 11px; margin-top: 3px; color: #8ea0c8; }
.dash-kpi .d.up { color: #b6ff00; }
.dash-kpi .d.down { color: #ff5470; }
.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card { background: #0d0f22aa; border: 1px solid #ffffff14; border-radius: 14px; padding: 10px 12px 4px;
  box-shadow: 0 0 24px #00000055; }
.dash-card.big { grid-column: 1 / -1; }
.dash-card h4 { margin: 0 0 6px; font-size: 13px; color: #9fb4ff; font-weight: 600; letter-spacing: .4px; }

/* ====== Torre de Control — tableros ====== */
.tc-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); color: var(--text); }
.tc-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tc-top input[type="date"] { padding: 5px 7px; border: 1px solid var(--input-border);
  border-radius: 4px; background: var(--input-bg); color: var(--text); }
.tc-top .tc-now { margin-left: auto; color: var(--text-soft); font-size: 12px; }
.tc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-chip { font-size: 12px; padding: 3px 9px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--border); color: #fff; }
.tc-chip.rojo { background: #c0392b; } .tc-chip.amarillo { background: #d49a00; }
.tc-chip.verde { background: #2a8a4a; } .tc-chip.gris { background: #7a7a8a; }
.tc-board { flex: 1 1 auto; overflow: auto; padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; }
.tc-card { border: 1px solid var(--border); border-left: 6px solid var(--text-soft);
  border-radius: 8px; background: var(--surface); padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tc-card.rojo { border-left-color: #c0392b; } .tc-card.amarillo { border-left-color: #d49a00; }
.tc-card.verde { border-left-color: #2a8a4a; } .tc-card.gris { border-left-color: #7a7a8a; }
.tc-card h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.tc-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--text-soft); flex: 0 0 auto; }
.tc-card.rojo .tc-dot { background: #c0392b; } .tc-card.amarillo .tc-dot { background: #d49a00; }
.tc-card.verde .tc-dot { background: #2a8a4a; } .tc-card.gris .tc-dot { background: #7a7a8a; }
.tc-sub { color: var(--text-soft); font-size: 12px; margin-bottom: 6px; }
.tc-motivo { font-size: 13px; margin: 6px 0; }
.tc-accion { font-size: 12px; color: var(--text-soft); font-style: italic; margin-bottom: 8px; }
.tc-row { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0; }
.tc-row b { font-weight: 600; }
.tc-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.tc-bar > span { display: block; height: 100%; background: var(--accent); }
.tc-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.tc-empty { padding: 30px; text-align: center; color: var(--text-soft); }

/* Badge de frescura GPS (Torre Central) */
.tc-gps { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.tc-gps.verde    { color: #0f7a35; border-color: #16a34a55; background: #16a34a18; }
.tc-gps.amarillo { color: #8a6300; border-color: #d9a30055; background: #d9a30018; }
.tc-gps.rojo     { color: #b91c1c; border-color: #dc262655; background: #dc262618; }
.tc-gps.gris     { color: var(--text-soft); }

/* Mapa en vivo (Leaflet) */
.tc-mapa { flex: 1 1 auto; min-height: 300px; }
.tc-mapa .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); }
.tc-mapa-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.tc-mapa-chk input { margin: 0; }

/* Picker de ubicación (elegirEnMapa) */
.geo-pick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.geo-pin { background: transparent; border: 0; font-size: 24px; line-height: 24px; text-align: center; cursor: grab; }
.geo-search { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
.geo-search input { flex: 1; padding: 6px 8px; border: 1px solid var(--input-border);
  border-radius: 4px; background: var(--input-bg); color: var(--text); font-size: 13px; }
.geo-results { flex: 0 0 auto; max-height: 132px; overflow: auto; background: var(--surface); }
.geo-results:empty { display: none; }
.geo-item { padding: 6px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.geo-item:hover { background: var(--surface-2); }
.geo-hint { padding: 8px 10px; font-size: 12px; color: var(--text-soft); }
.geo-map { flex: 1 1 auto; min-height: 200px; }
.geo-map .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); }
.geo-coords { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; color: var(--text-soft);
  border-top: 1px solid var(--border); background: var(--surface-2); }

/* Libro diario */
.tc-libro-body { flex: 1 1 auto; display: flex; min-height: 0; }
.tc-libro-main { flex: 1 1 auto; overflow: auto; padding: 12px; }
.tc-libro-aside { flex: 0 0 230px; border-left: 1px solid var(--border); overflow: auto;
  padding: 12px; background: var(--surface-2); }
.tc-libro-aside h3 { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.tc-jor { border: 1px solid var(--border); border-left: 6px solid var(--text-soft);
  border-radius: 8px; margin-bottom: 12px; background: var(--surface); }
.tc-jor.rojo { border-left-color: #c0392b; } .tc-jor.amarillo { border-left-color: #d49a00; }
.tc-jor.verde { border-left-color: #2a8a4a; } .tc-jor.gris { border-left-color: #7a7a8a; }
.tc-jor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tc-jor-title { font-weight: 600; }
.tc-jor-motivo { font-size: 12px; color: var(--text-soft); }
.tc-jor-accion { margin-left: auto; font-size: 12px; font-style: italic; color: var(--text-soft); }
.tc-srv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tc-srv th, .tc-srv td { text-align: left; padding: 5px 9px; border-top: 1px solid var(--border); vertical-align: middle; }
.tc-srv th { color: var(--text-soft); font-weight: 600; }
.tc-postas { display: flex; gap: 5px; }
.tc-pdot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--input-border);
  background: var(--surface-2); font-size: 9px; line-height: 12px; text-align: center; color: #fff; cursor: default; }
.tc-pdot.ok { background: #2a8a4a; border-color: #2a8a4a; }
.tc-pdot.vencida { background: #c0392b; border-color: #c0392b; }
.tc-pdot.pronta { background: #d49a00; border-color: #d49a00; }
.tc-pdot.next { box-shadow: 0 0 0 2px var(--accent); }
.tc-pdot[role="button"] { cursor: pointer; }
.tc-pdot[role="button"]:hover { filter: brightness(1.15); transform: scale(1.12); }
.tc-alerta { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px;
  font-size: 12px; background: var(--surface); }
.tc-alerta b { display: block; }

/* Calendario */
.tc-cal-title { font-weight: 600; margin-left: 4px; }
/* Bandeja de pedidos habilitados sin jornada (cronograma) */
.tc-pendientes { flex: 0 0 auto; border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--surface)); padding: 8px 12px; max-height: 132px; overflow: auto; }
.tc-pend-hd { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; }
.tc-pend-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-pend-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 170px; max-width: 240px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-left: 5px solid #4a6cf7; border-radius: 6px;
  padding: 6px 9px; background: var(--surface); color: var(--text); font: inherit; }
.tc-pend-card:hover { border-color: #4a6cf7; box-shadow: 0 1px 6px rgba(74,108,247,.25); }
.tc-pend-cod { font-weight: 600; font-size: 12px; }
.tc-pend-cli { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tc-pend-meta { color: var(--text-soft); font-size: 10.5px; }

.tc-aviso-badge { display: inline-block; font-size: 10px; font-weight: 600; color: #fff;
  background: #d49a00; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }

.tc-cal-body { flex: 1 1 auto; overflow: auto; padding: 12px; }
.tc-cal-day { display: flex; flex-direction: column; gap: 6px; }
.tc-evt { border: 1px solid var(--border); border-left: 5px solid var(--text-soft); border-radius: 6px;
  padding: 6px 10px; background: var(--surface); font-size: 12.5px; }
.tc-evt.rojo { border-left-color: #c0392b; } .tc-evt.amarillo { border-left-color: #d49a00; }
.tc-evt.verde { border-left-color: #2a8a4a; } .tc-evt.gris { border-left-color: #7a7a8a; }
.tc-evt .h { font-weight: 600; } .tc-evt .m { color: var(--text-soft); font-size: 11px; }
.tc-mini { margin: 3px 4px; padding: 3px 6px; border-radius: 4px; font-size: 11px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.tc-mini.rojo { background: #c0392b; } .tc-mini.amarillo { background: #d49a00; }
.tc-mini.verde { background: #2a8a4a; } .tc-mini.gris { background: #7a7a8a; }
.tc-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tc-cal-week .col { border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  min-height: 130px; display: flex; flex-direction: column; }
.tc-cal-week .col > .hd { padding: 5px 7px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text-soft); text-align: center; }
.tc-cal-week .col.hoy > .hd { color: var(--accent); font-weight: 700; }
.tc-cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tc-cal-month .dow { text-align: center; font-size: 11px; color: var(--text-soft); font-weight: 600; padding: 2px; }
.tc-cal-month .cell { border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  min-height: 88px; padding: 3px; overflow: hidden; }
.tc-cal-month .cell.off { background: var(--surface-2); opacity: .5; }
.tc-cal-month .cell.hoy { outline: 2px solid var(--accent); }
.tc-cal-month .cell .dnum { font-size: 11px; color: var(--text-soft); text-align: right; }
.tc-cal-month .cell.hoy .dnum { color: var(--accent); font-weight: 700; }
.tc-cal-more { font-size: 10px; color: var(--text-soft); margin: 2px 4px; }
.tc-edit { border: none; cursor: pointer; border-radius: 3px; font-size: 11px; line-height: 1; padding: 2px 5px; }
.tc-mini { display: flex; align-items: center; gap: 4px; }
.tc-mini .tc-mini-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mini .tc-edit { flex: 0 0 auto; background: rgba(255, 255, 255, .25); color: #fff; }
.tc-mini .tc-edit:hover { background: rgba(255, 255, 255, .5); }
.tc-evt { position: relative; padding-right: 34px; }
.tc-evt .tc-edit { position: absolute; top: 7px; right: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.tc-evt .tc-edit:hover { border-color: var(--accent); color: var(--accent); }
.tc-mini[draggable="true"] { cursor: grab; }
.tc-mini[draggable="true"]:active { cursor: grabbing; }
.tc-cal-week .col.drag-over, .tc-cal-month .cell.drag-over {
  outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(74, 108, 247, .10); }

/* Ítems "en construcción" en los menús del topbar */
.menu-dropdown a.is-obra { opacity: .5; }

/* =====================================================
   Mensajería interna (js/mensajeria.js)
   ============================================================ */
/* Botón del topbar con el contador de no leídos */
#topbar .msg-boton {
  position: relative; cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 15px;
}
#topbar .msg-boton:hover { background: var(--bar-hover); }
/* Drop global de "Procesar un archivo" (js/automatizacion.js): aviso mientras se
   arrastra un archivo sobre la pantalla. pointer-events:none para que las zonas
   propias (adjuntos, asistente) sigan recibiendo el drop cuando corresponde. */
.aut-drop-global {
  position: fixed; inset: 0; z-index: 99990; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 3px dashed var(--accent); outline-offset: -10px;
}
.aut-drop-global > div {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.aut-drop-global > div > span { font-size: 26px; }
#topbar .msg-badge {
  position: absolute; top: -1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Ventana: carpetas | lista | lectura */
.msg-wrap { display: grid; grid-template-columns: 168px 300px 1fr; height: 100%; background: var(--surface); }
.msg-carpetas {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 6px;
  border-right: 1px solid var(--border); overflow: auto;
}
.msg-carpetas a {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 5px; cursor: pointer; color: var(--text); font-size: 13px;
}
.msg-carpetas a:hover { background: color-mix(in srgb, var(--accent), transparent 88%); }
.msg-carpetas a.sel { background: color-mix(in srgb, var(--accent), transparent 80%); font-weight: 600; }
.msg-carpetas-pie { margin-top: auto; padding-top: 10px; }
.msg-carpetas-pie .btn { width: 100%; }

.msg-lista-col { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
.msg-buscar {
  margin: 8px; padding: 6px 9px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--text); font-size: 12px;
}
.msg-lista { flex: 1 1 auto; overflow: auto; }
.msg-item { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.msg-item:hover { background: color-mix(in srgb, var(--accent), transparent 92%); }
.msg-item.sel { background: color-mix(in srgb, var(--accent), transparent 84%); }
.msg-item.no-leido .msg-de, .msg-item.no-leido .msg-item-l2 { font-weight: 700; }
.msg-item.no-leido { border-left: 3px solid var(--accent); padding-left: 7px; }
.msg-item-l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text); }
.msg-item-l2 { font-size: 13px; margin-top: 2px; color: var(--text);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-l3 { font-size: 11px; color: var(--text-soft); margin-top: 2px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fecha { color: var(--text-soft); font-size: 11px; white-space: nowrap; }
.msg-de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-prio {
  display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
}

.msg-lectura { display: flex; flex-direction: column; overflow: auto; min-width: 0; }
.msg-cab { padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
.msg-cab-asunto { font-size: 15px; font-weight: 600; color: var(--text); }
.msg-cab-meta { margin-top: 5px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.msg-cuerpo { padding: 14px; flex: 1 1 auto; font-size: 13px; line-height: 1.6;
              color: var(--text); white-space: normal; word-break: break-word; }
.msg-acciones { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px;
                border-top: 1px solid var(--border); }
.msg-vacio { padding: 24px; color: var(--text-soft); font-size: 13px; text-align: center; }

@media (max-width: 860px) {
  .msg-wrap { grid-template-columns: 130px 1fr; }
  .msg-lectura { grid-column: 1 / -1; border-top: 1px solid var(--border); }
}

/* Tokens del mensaje: @menciones y #referencias (fase 2) */
.msg-ref {
  color: var(--accent); cursor: pointer; text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent), transparent 50%);
}
.msg-ref:hover { text-decoration: none; border-bottom-style: solid; }
.msg-mencion {
  background: color-mix(in srgb, var(--accent), transparent 85%);
  color: var(--accent); border-radius: 3px; padding: 0 3px; font-weight: 600;
}
/* La mención propia se resalta: es lo que hace que el usuario la encuentre */
.msg-mencion.yo { background: var(--accent); color: #fff; }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-ref.chip {
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; background: var(--surface);
}
/* Popup de autocompletado del editor (reusa el look de .lookup-list) */
.msg-autoc { max-height: 232px; }

/* =====================================================
   Tom Select con los colores del sistema.
   El CSS de vendor/ trae fondo blanco y textos oscuros fijos: en tema
   noche el campo quedaba blanco y lo que se tipeaba, casi invisible.
   Se ata todo a las variables del tema, así sirve en claro y en oscuro
   y para cualquier combo del sistema, no sólo el de mensajería.
   ============================================================ */
.ts-wrapper .ts-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* El input que se tipea hereda el color del navegador si no se fuerza: era el bug */
.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control > input::placeholder {
  color: var(--text);
}
.ts-wrapper .ts-control > input::placeholder { color: var(--text-soft); opacity: 1; }
.ts-wrapper.focus .ts-control { border-color: var(--accent); }
.ts-wrapper.disabled .ts-control { background: var(--surface-2, var(--surface)); opacity: .7; }

.ts-dropdown {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.ts-dropdown .option { color: var(--text); }
.ts-dropdown .active { background: color-mix(in srgb, var(--accent), transparent 80%); color: var(--text); }
.ts-dropdown .optgroup-header {
  background: var(--surface); color: var(--text-soft);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.ts-dropdown .no-results { color: var(--text-soft); }

/* Ítems ya elegidos (modo múltiple) */
.ts-wrapper.multi .ts-control > div {
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
}
.ts-wrapper.multi .ts-control > div.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.ts-wrapper.plugin-remove_button .item .remove { border-left-color: color-mix(in srgb, var(--accent), transparent 60%); }
.ts-wrapper.plugin-remove_button .item .remove:hover { background: color-mix(in srgb, var(--danger), transparent 70%); }

/* Hilos de conversación y acuse de recibo (fase 3) */
.msg-hilo { flex: 1 1 auto; overflow: auto; }
.msg-post { padding: 10px 14px; border-bottom: 1px solid var(--border); }
/* El mensaje que se abrió desde la lista se distingue del resto del hilo */
.msg-post.principal {
  background: color-mix(in srgb, var(--accent), transparent 94%);
  border-left: 3px solid var(--accent); padding-left: 11px;
}
.msg-post .msg-cuerpo { padding: 6px 0 0; }
.msg-post-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
/* "De:" / "Para:" — el rótulo apagado, el nombre destacado. Sin el rótulo, el
   nombre del remitente se leía como un título suelto y no se entendía qué era. */
.msg-rot { color: var(--text-soft); font-size: 11px; }
.msg-post-meta { font-size: 11px; color: var(--text-soft); margin-top: 2px;
                 display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-acuse-tag {
  border: 1px solid var(--legend); color: var(--legend);
  border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700;
}
.msg-acuse-pedido {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--legend), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--legend), transparent 65%);
  font-size: 12px; color: var(--text);
}
.msg-acuse-ok { margin-top: 8px; font-size: 12px; color: #2a8a4a; }
.msg-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.msg-tabla th, .msg-tabla td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.msg-tabla th { color: var(--text-soft); font-weight: 600; }
.msg-pend { color: var(--danger); }
.msg-aviso {
  padding: 5px 10px; font-size: 11px; color: var(--text-soft);
  background: color-mix(in srgb, var(--accent), transparent 93%);
  border-bottom: 1px solid var(--border);
}

/* Chatter: mensajes de un registro (fase 4.a) */
.msg-chat { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.msg-chat-barra {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-soft);
}
.msg-chat-seg { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-chat-hilo { flex: 1 1 auto; overflow: auto; }
.msg-chat-nuevo {
  border-top: 1px solid var(--border); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px; background: var(--surface-2);
}
.msg-chat-nuevo textarea {
  font-family: inherit; font-size: 13px; padding: 7px 8px; resize: vertical;
  border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--text);
}
.msg-chat-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* =====================================================
   Adjuntos (js/archivos.js) — widget de archivos por registro
   ============================================================ */
.adj { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adj-zona {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px; text-align: center;
  border: 1px dashed var(--input-border); border-radius: 6px;
  background: var(--surface-2); color: var(--text-soft); font-size: 12px;
}
.adj-zona.adj-drag { border-color: var(--accent); border-style: solid;
  background: color-mix(in srgb, var(--accent), transparent 90%); }
.adj-zona.adj-off { opacity: .5; pointer-events: none; }
.adj-zona-txt { color: var(--text); }
.adj-progreso { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.adj-barra { height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.adj-lista { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow: auto; }
.adj-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
.adj-item:hover { border-color: var(--accent); }
.adj-ico { flex: 0 0 auto; font-size: 15px; }
.adj-nom {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); text-decoration: none; font-size: 13px;
}
.adj-nom:hover { text-decoration: underline; }
.adj-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-soft); }

/* =====================================================
   Soporte (js/soporte.js) — reporte de problemas y seguimiento
   ============================================================ */
.sop-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.sop-barra {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.sop-aviso { margin-left: auto; color: var(--danger); }
.sop-lista { flex: 1 1 auto; overflow: auto; }
.sop-item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sop-item:hover { background: var(--surface-2); }
.sop-item-top { display: flex; align-items: center; gap: 8px; }
.sop-ref { font-family: monospace; font-size: 11px; color: var(--text-soft); flex: 0 0 auto; }
.sop-tit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-chip {
  flex: 0 0 auto; font-size: 11px; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-soft);
}
.sop-e-rec { border-color: #6b7280; color: #6b7280; }
.sop-e-cur { border-color: #d49a00; color: #d49a00; }
.sop-e-ok  { border-color: #2a8a4a; color: #2a8a4a; }
.sop-e-no  { border-color: #c0392b; color: #c0392b; }
.sop-e-pen { border-color: #8a6d3b; color: #8a6d3b; }
.sop-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.sop-check input { width: 16px; height: 16px; flex: 0 0 auto; }
.sop-cuerpo {
  white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 8px;
}
.sop-upd { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }

/* =====================================================
   Automatización (js/automatizacion.js)
   ============================================================ */
.aut-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.aut-zona {
  margin: 16px; padding: 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 2px dashed var(--input-border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
}
.aut-zona.aut-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); }
.aut-zona-ico { font-size: 34px; }
/* Contexto opcional (asunto/detalle): mismo par de datos que trae la vía mail */
.aut-contexto { display: flex; flex-direction: column; gap: 6px; width: min(480px, 100%); margin-top: 6px; text-align: left; }
.aut-contexto input, .aut-contexto textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--surface); color: var(--text); font: inherit; resize: vertical;
}
/* Entradas recibidas por mail, pendientes de revisión */
.aut-pendientes { width: min(560px, 100%); margin-top: 12px; text-align: left; }
.aut-pend {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
}
.aut-pend-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aut-pend-info .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aut-pend-acciones { display: flex; gap: 6px; flex: 0 0 auto; }
.aut-badge { margin-right: 4px; }
.aut-mail-banner {
  padding: 8px 10px; margin-bottom: 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.aut-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.aut-cabecera { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.aut-cuerpo { flex: 1 1 auto; overflow: auto; padding: 10px 14px; }
.aut-acciones {
  flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end;
  padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.aut-archivo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aut-eleccion { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.aut-eleccion select { flex: 1 1 auto; }
.aut-ia {
  margin-top: 6px; font-size: 12px; padding: 5px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent), transparent 90%); color: var(--text);
}
.aut-alerta {
  margin: 6px 0; font-size: 12px; padding: 6px 9px; border-radius: 4px;
  background: color-mix(in srgb, #d49a00, transparent 85%); color: var(--text);
}
.aut-error { color: var(--danger); }
.aut-ok { font-size: 14px; color: #2a8a4a; }
.aut-obs { margin: 6px 0 6px 18px; font-size: 13px; }
.aut-info {
  margin: 6px 0; padding: 6px 9px 6px 24px; font-size: 13px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

/* ---- RRHH: calendario anual de vacaciones/licencias ---- */
.rrhh-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rrhh-cal-mes { border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.rrhh-cal-mes-tit { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.rrhh-cal-sem, .rrhh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rrhh-cal-sem span { font-size: 10px; color: var(--text-soft); text-align: center; }
.rrhh-cal-dia {
  font-size: 11px; text-align: center; padding: 3px 0; border-radius: 4px;
  cursor: pointer; user-select: none;
}
.rrhh-cal-dia:hover:not(.vacio) { outline: 1px solid var(--accent); }
.rrhh-cal-dia.vacio { cursor: default; }
.rrhh-cal-dia.personal { font-weight: 700; }
.rrhh-cal-dia.t-feriado, .rrhh-cal-chip.t-feriado { background: color-mix(in srgb, #8e44ad, transparent 70%); }
.rrhh-cal-dia.t-gremial, .rrhh-cal-chip.t-gremial { background: color-mix(in srgb, #8e44ad, transparent 45%); }
.rrhh-cal-dia.t-vacaciones, .rrhh-cal-chip.t-vacaciones { background: color-mix(in srgb, #2a8a4a, transparent 55%); }
.rrhh-cal-dia.t-licencia, .rrhh-cal-chip.t-licencia { background: color-mix(in srgb, #d4762c, transparent 55%); }
.rrhh-cal-dia.t-certificado, .rrhh-cal-chip.t-certificado { background: color-mix(in srgb, #2c7bd4, transparent 55%); }
.rrhh-cal-dia.t-trabajo_remoto, .rrhh-cal-chip.t-trabajo_remoto { background: color-mix(in srgb, #8a55d6, transparent 55%); }
.rrhh-cal-dia.t-otro, .rrhh-cal-chip.t-otro { background: color-mix(in srgb, #888, transparent 55%); }
.rrhh-cal-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; }
.aut-tabla-wrap { overflow: auto; max-height: 340px; border: 1px solid var(--border); border-radius: 4px; }
.aut-tabla { border-collapse: collapse; font-size: 12px; width: 100%; }
.aut-tabla th, .aut-tabla td {
  border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: left; white-space: nowrap;
}
.aut-tabla th { background: var(--surface-2); position: sticky; top: 0; }
.aut-log {
  white-space: pre-wrap; word-break: break-word; font-family: monospace; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 8px;
}
.aut-corridas { flex: 1 1 auto; overflow: auto; }
.aut-corrida { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.aut-corrida:hover { background: var(--surface-2); }
.aut-corrida-top { display: flex; align-items: center; gap: 8px; }

/* El atributo `hidden` tiene que ganarle al display de la clase: sin esto, un
   contenedor flex marcado como hidden se sigue viendo (pasó con la zona de
   arrastre de Automatización y con el panel de resultados). */
.adj-zona[hidden], .adj-progreso[hidden], .aut-zona[hidden], .aut-panel[hidden] { display: none !important; }
/* El texto del tilde de captura se partía en tres renglones: que ocupe el ancho. */
.sop-check { flex: 1 1 auto; }

/* Bloque de adjuntos al pie del editor (lo arma crudEditar cuando el config
   tiene un campo type:'adjuntos'). Toma el alto sobrante de la ventana; la
   lista scrollea adentro en vez de estirar el formulario. */
.form-adjuntos {
  flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column;
  padding: 0 14px 4px; overflow: hidden;
}
.form-adjuntos .form-section { flex: 0 0 auto; margin-top: 0; }
.form-adjuntos .adj-host { flex: 1 1 auto; min-height: 0; display: flex; }
.form-adjuntos .adj { flex: 1 1 auto; min-height: 0; }
.form-adjuntos .adj-lista { flex: 1 1 auto; max-height: none; }

/* ====== Asistente IA ====== */
.ia-chat { display:flex; flex-direction:column; height:100%; }
.ia-top { display:flex; gap:6px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--border); flex:0 0 auto; }
.ia-top select { padding:2px 4px; }
.ia-cuerpo { display:flex; flex:1 1 auto; min-height:0; }
.ia-lateral { width:260px; flex:0 0 auto; border-right:1px solid var(--border); display:flex; flex-direction:column; background:var(--surface-2); }
.ia-lat-tit { padding:6px 8px; font-weight:600; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.ia-lat-lista { overflow:auto; flex:1 1 auto; }
.ia-lat-item { padding:6px 8px; border-bottom:1px solid var(--border); cursor:pointer; }
.ia-lat-item:hover, .ia-lat-item.activa { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ia-lat-fecha { font-size:11px; color:var(--text-soft); display:flex; justify-content:space-between; }
.ia-lat-borrar { border:0; background:none; cursor:pointer; opacity:.5; }
.ia-lat-borrar:hover { opacity:1; }
.ia-lat-txt { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-lista { flex:1 1 auto; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.ia-msg { max-width:92%; padding:8px 12px; border-radius:10px; line-height:1.4; font-size:13px; }
.ia-user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:2px; }
.ia-assistant { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:2px; max-width:98%; }
.ia-error { align-self:flex-start; background:color-mix(in srgb, var(--danger) 12%, var(--surface)); border:1px solid var(--danger); }
.ia-html p { margin:4px 0; }
.ia-html ul, .ia-html ol { margin:4px 0 4px 18px; }
.ia-html table { border-collapse:collapse; margin:6px 0; font-size:12px; }
.ia-html td, .ia-html th { border:1px solid var(--border); padding:2px 6px; }
.ia-html pre, .ia-pasos pre { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:6px; font-size:11px; overflow:auto; white-space:pre-wrap; margin:4px 0; }
.ia-pasos { margin-top:6px; font-size:12px; color:var(--text-soft); }
.ia-pasos summary { cursor:pointer; }
.ia-pasos ul { margin:4px 0 0 16px; }
.ia-paso-error { color:var(--danger); }
.ia-aviso { margin-top:6px; color:var(--danger); font-size:12px; }
.ia-bloque { margin-top:8px; border:1px solid var(--border); border-radius:6px; padding:6px; background:var(--surface); }
.ia-bloque-tit { font-weight:600; margin-bottom:4px; font-size:12px; }
.ia-grid-inline { height:280px; width:100%; }
.ia-ficha { border-collapse:collapse; font-size:12px; }
.ia-ficha th { text-align:left; padding:2px 10px 2px 2px; color:var(--text-soft); font-weight:500; white-space:nowrap; vertical-align:top; }
.ia-ficha td { padding:2px 4px; }
.ia-calif { margin-top:6px; font-size:12px; display:flex; gap:4px; align-items:center; }
.ia-thumb { border:1px solid var(--border); background:var(--surface); border-radius:4px; cursor:pointer; padding:1px 6px; }
.ia-thumb:hover { border-color:var(--accent); }
.ia-input { display:flex; gap:6px; padding:8px; border-top:1px solid var(--border); flex:0 0 auto; }
.ia-input textarea { flex:1; resize:none; }
.ia-estado { padding:0 10px 6px; min-height:16px; font-size:11px; }
.ia-dots span { animation: ia-blink 1.2s infinite; }
.ia-dots span:nth-child(2) { animation-delay:.2s; } .ia-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes ia-blink { 0%,100% { opacity:.2 } 50% { opacity:1 } }
.ia-radios { display:flex; flex-direction:column; gap:4px; }
.ia-radio { cursor:pointer; }
/* admin */
.ia-adm-filtros { display:flex; gap:8px; align-items:flex-end; padding:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.ia-adm-filtros label { display:flex; flex-direction:column; font-size:11px; color:var(--text-soft); gap:2px; }
.ia-adm-filtros input, .ia-adm-filtros select { padding:3px 4px; }
.ia-adm-resumen { padding:6px 8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; }
.ia-chip { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; }
.ia-chip-ok { background:color-mix(in srgb, #2a8a4a 18%, var(--surface)); }
.ia-chip-mal { background:color-mix(in srgb, var(--danger) 18%, var(--surface)); }
.ia-fila-mala { background:color-mix(in srgb, var(--danger) 14%, transparent) !important; }
.ia-fila-borrada { color:var(--text-soft) !important; font-style:italic; }
.ia-rp { padding:6px 8px; margin:4px 0; border-radius:6px; font-size:12px; border:1px solid var(--border); }
.ia-rp-user { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.ia-rp-asst { background:var(--surface-2); }
.ia-rp-tool { background:var(--surface); border-style:dashed; }
.ia-rp-res { background:var(--surface); color:var(--text-soft); }
.ia-rp-res .ia-rp-txt { white-space:pre-wrap; font-family:monospace; font-size:11px; }
.ia-rp-err { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.ia-rp-meta { float:right; font-size:10px; color:var(--text-soft); }
.ia-rp-com { font-style:italic; margin-top:4px; }
.ia-rp-cab { padding:8px; border-bottom:1px solid var(--border); font-size:12px; }
.ia-rp pre { margin:4px 0; white-space:pre-wrap; font-size:11px; }

/* Asistente IA: archivos */
.ia-archivos { padding:4px 10px; border-top:1px solid var(--border); font-size:12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ia-arch { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.ia-arch.nuevo { border-color:var(--accent); }
.ia-arch-dl { color:inherit; text-decoration:none; }
.ia-arch-dl:hover { text-decoration:underline; }
.ia-arch-x { border:0; background:none; cursor:pointer; opacity:.5; padding:0 2px; }
.ia-arch-x:hover { opacity:1; }
.ia-chat { position:relative; }
.ia-drop { display:none; position:absolute; inset:0; background:color-mix(in srgb, var(--accent) 18%, var(--surface)); border:2px dashed var(--accent); border-radius:8px; z-index:5; align-items:center; justify-content:center; font-size:16px; pointer-events:none; }
.ia-drop.on { display:flex; }

/* Asistente IA: acciones con confirmación */
.ia-sistema { align-self:center; background:var(--surface-2); border:1px dashed var(--border); color:var(--text-soft); font-size:12px; max-width:80%; }
.ia-accion { border-left:3px solid var(--accent); }
.ia-accion-ejecutada { border-left-color:#2a8a4a; }
.ia-accion-rechazada, .ia-accion-vencida { border-left-color:var(--text-soft); opacity:.8; }
.ia-accion-error { border-left-color:var(--danger); }
.ia-accion-chip { font-weight:normal; font-size:11px; margin-left:6px; color:var(--text-soft); }
.ia-accion-res { font-size:13px; margin:2px 0 4px; }
.ia-accion-det { white-space:pre-wrap; font-size:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:6px; margin:4px 0; max-height:220px; overflow:auto; }
.ia-accion-out { font-size:12px; margin-top:4px; }
.ia-accion-btns { margin-top:6px; display:flex; gap:6px; align-items:center; }

/* ====== Pestañas de editor (js/tabs.js) ====== */
.tabs { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tabs-bar {
  flex: 0 0 auto; display: flex; gap: 2px; padding: 6px 10px 0;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  overflow-x: auto; scrollbar-width: thin;
}
.tab-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; background: none; cursor: pointer;
  color: var(--text-soft); font-size: 13px; font-family: inherit; white-space: nowrap;
}
.tab-btn:hover { color: var(--text); background: var(--surface); }
.tab-btn.on {
  color: var(--accent); background: var(--surface);
  border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent);
}
.tab-btn .tab-cont {
  min-width: 17px; padding: 0 5px; border-radius: 9px; font-size: 11px;
  background: var(--border); color: var(--text); text-align: center;
}
.tab-btn.on .tab-cont { background: var(--accent); color: #fff; }
.tabs-body { flex: 1 1 auto; min-height: 0; background: var(--surface); }
/* Variante: barra de pestañas VERTICAL al costado (pedido de Hugo 2026-09-08
   para Originación: separar leads / cotizaciones / clientes / pendientes en un
   panel fijo). Se activa con la clase extra .tabs-vder en el contenedor .tabs.
   Va a la IZQUIERDA y grande (feedback de Fede: a la derecha quedaba chica). */
.tabs.tabs-vder { flex-direction: row !important; }
/* Riel de navegación: angosto, plano, sin cajas. El activo lleva una barra de
   acento a la izquierda y un tinte suave; el contador es una píldora al borde. */
.tabs.tabs-vder > .tabs-bar {
  flex-direction: column; align-items: stretch; gap: 2px;
  width: 168px; padding: 10px 8px;
  border-bottom: none; border-right: 1px solid var(--border);
  overflow-x: visible; overflow-y: auto; background: var(--surface-2);
}
.tabs.tabs-vder > .tabs-bar > .tab-btn {
  position: relative; justify-content: flex-start; width: 100%;
  padding: 9px 10px 9px 14px; border-radius: 8px; border: none;
  font-size: 13.5px; gap: 10px; box-shadow: none; transition: background .12s, color .12s;
}
.tabs.tabs-vder > .tabs-bar > .tab-btn .tab-ico { width: 20px; text-align: center; font-size: 15px; filter: grayscale(.6); opacity: .8; }
.tabs.tabs-vder > .tabs-bar > .tab-btn:hover { background: color-mix(in srgb, var(--text), transparent 93%); color: var(--text); }
.tabs.tabs-vder > .tabs-bar > .tab-btn .tab-cont { margin-left: auto; font-weight: 600; }
.tabs.tabs-vder > .tabs-bar > .tab-btn.on {
  color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%);
  border: none; box-shadow: none; font-weight: 600;
}
.tabs.tabs-vder > .tabs-bar > .tab-btn.on::before {
  content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent);
}
.tabs.tabs-vder > .tabs-bar > .tab-btn.on .tab-ico { filter: none; opacity: 1; }
.tabs-body > [data-pane] { display: none; }
.tabs-body > [data-pane].on {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto;
}
/* Grillas dentro de una pestaña: ocupan lo que sobra sin desbordar. */
.tabs-body > [data-pane] > .pane-grid { flex: 1 1 auto; min-height: 100px; width: 100%; }

/* Adjuntos en modo documentos: qué es y cuándo vence (js/archivos.js) */
.adj-tipo {
  flex: 0 0 auto; font-size: 11px; padding: 1px 7px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft);
}
.adj-venc { flex: 0 0 auto; font-size: 11px; color: var(--text-soft); }
.adj-venc-pronto { color: #d49a00; font-weight: 600; }
.adj-venc-mal { color: var(--danger); font-weight: 600; }

/* ====== Ficha de cliente: pestaña Historial (360) ====== */
.c360-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.c360-card {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  padding: 10px 12px;
}
.c360-lbl { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; }
.c360-val { font-size: 20px; font-weight: 600; color: var(--text); margin: 2px 0; }
.c360-pie { font-size: 11px; color: var(--text-soft); }
.c360-chips { margin-bottom: 8px; font-size: 12px; color: var(--text-soft); }
.c360-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.c360-chip i { color: var(--text-soft); font-style: normal; font-size: 11px; }
.c360-sec { margin: 0 0 10px; }
.c360-tabla-wrap { overflow: auto; max-height: 260px; }
.c360-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.c360-tabla th, .c360-tabla td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.c360-tabla th { color: var(--text-soft); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; }
.c360-vacio { font-size: 12px; color: var(--text-soft); padding: 2px 0; }

/* =====================================================
   Solicitudes de servicio (link al cliente)
   ============================================================ */
.sol-wrap { display: flex; flex-direction: column; height: 100%; }
.sol-emitir { overflow: auto; }
.sol-cli-nuevo { margin: 0 0 8px 118px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); }
.sol-cli-nuevo .form-row label { width: 90px; }
.sol-familias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.sol-fam { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.sol-fam:hover { background: var(--surface-2); }
.sol-fam input { margin-top: 3px; }
.sol-fam b { display: block; }
.sol-fam small { color: var(--text-soft); }
.sol-check { display: flex; gap: 8px; align-items: flex-start; width: auto !important; text-align: left !important; color: var(--text) !important; }
.sol-check input { margin-top: 3px; }
.sol-check small { display: block; color: var(--text-soft); }
.sol-resultado { margin-top: 10px; padding: 10px 12px; border: 1px solid #bfe3cd; background: #e8f5ee; border-radius: 6px; color: #1f5a3a; }
[data-theme="dark"] .sol-resultado { background: #1e3328; border-color: #2e5a41; color: #bfe3cd; }
.sol-resultado-tit { margin-bottom: 6px; }
.sol-resultado input { flex: 1; font-family: monospace; font-size: 12px; }
.sol-lista { flex: 1 1 auto; overflow: auto; }
.sol-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.sol-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-item-acciones { flex: 0 0 auto; display: flex; gap: 6px; }
.sol-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.sol-chip.azul  { background: #eef3fb; color: #2a5298; border-color: #c9d6ee; }
.sol-chip.verde { background: #e8f5ee; color: #2e7d4f; border-color: #bfe3cd; }
.sol-chip.rojo  { background: #fbe9e7; color: #b3261e; border-color: #f0c3bd; }
.sol-chip.gris  { }

/* Menú clásico del topbar (desplegable armado desde seg_nodos) */
.menu-dropdown.menu-clasico { min-width: 250px; max-height: 80vh; overflow: auto; z-index: 1000; }
.menu-dropdown .menu-seccion { padding: 8px 16px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bar-muted); }
.menu-dropdown .menu-ico { display: inline-block; width: 22px; }
.menu-dropdown a.is-future { opacity: .55; }
.menu-dropdown a small { color: var(--bar-muted); }
.menu-dropdown a:hover small { color: #fff; }

/* Revisión de una solicitud */
.sol-det { display: flex; flex-direction: column; height: 100%; }
.sol-det-cab { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sol-det-cab > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sol-det-acc { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.sol-chip.ambar { background: #fdf3e1; color: #7a5112; border-color: #f1d9a6; }
/* Tema noche: los chips de color se veían con fondo pastel claro (pensados para
   el tema día). Fondo translúcido + texto claro del mismo tono. */
[data-theme="dark"] .sol-chip.azul  { background: rgba(74, 108, 247, .18); color: #a9bcff; border-color: rgba(74, 108, 247, .45); }
[data-theme="dark"] .sol-chip.verde { background: rgba(46, 125, 79, .22); color: #8fe0b4; border-color: rgba(46, 125, 79, .5); }
[data-theme="dark"] .sol-chip.rojo  { background: rgba(220, 53, 69, .2); color: #ff9a92; border-color: rgba(220, 53, 69, .5); }
[data-theme="dark"] .sol-chip.ambar { background: rgba(245, 158, 11, .18); color: #f5c76a; border-color: rgba(245, 158, 11, .5); }
.sol-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.sol-tabla th { text-align: left; color: var(--text-soft); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.sol-tabla td { padding: 4px 6px; border-bottom: 1px dashed var(--border); vertical-align: top; }
.sol-tabla tr.dif td:nth-child(3) { color: var(--accent); font-weight: 600; }
.sol-tabla td i { color: var(--text-soft); }
.sol-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sol-2col select { width: 100%; margin-top: 4px; }
.sol-lugar, .sol-svc { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; transition: box-shadow .3s; }
.sol-svc.sol-svc-sug { box-shadow: 0 0 0 2px #4a6cf7 inset; }
/* Pestaña Servicios: líneas a la izquierda, resumen de la cotización a la derecha */
.sol-split { display: flex; height: 100%; min-height: 0; }
.sol-split-izq { flex: 1 1 auto; min-width: 0; }
.sol-split-der { flex: 0 0 380px; border-left: 1px solid var(--border); overflow: auto; padding: 8px 10px; background: var(--surface-2); }
.sol-split.sin-cot .sol-split-izq { flex: 1 1 100%; }
.sol-cot-cab { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.sol-cot-tot { font-size: 12.5px; }
.sol-cot-items { display: flex; flex-direction: column; gap: 6px; }
.sol-cot-item { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--surface); font-size: 12.5px; cursor: default; }
.sol-cot-item.con-linea { cursor: pointer; }
.sol-cot-item.con-linea:hover { border-color: #4a6cf7; }
select.sol-falta { border-color: var(--cuit-bad, #c62828); }
.sol-cot-desc { line-height: 1.3; }
.sol-cot-num { color: var(--text-soft); margin-top: 2px; }
.sol-cot-sug { margin-top: 3px; }
.sol-cot-est { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .sol-split { flex-direction: column; } .sol-split-der { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--border); max-height: 45%; } }
.sol-lugar-tit { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.sol-kvs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; }
.sol-kv { font-size: 12.5px; }
.sol-kv > span { color: var(--text-soft); margin-right: 4px; text-transform: capitalize; }
.sol-ver { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.sol-dif { margin: 4px 0 0 16px; padding: 0; font-size: 12.5px; }
.aviso-ok { margin: 8px 14px 0; padding: 6px 10px; border-radius: 6px; background: #e8f5ee; color: #1f5a3a; border: 1px solid #bfe3cd; font-size: 13px; }
[data-theme="dark"] .aviso-ok { background: #1e3328; border-color: #2e5a41; color: #bfe3cd; }
.aviso-ok a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .aviso-ok a { color: #8fe0b4; }

/* ---------- Ayuda en línea (js/ayuda.js) ---------- */
.jsPanel-btn-ayuda {
  font-weight: 700; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 14px;
  border-radius: 6px; background: rgba(255,255,255,.14); opacity: .9;
}
.jsPanel-btn-ayuda:hover { opacity: 1; background: rgba(255,255,255,.28); }
.jsPanel.ayuda-modo, .jsPanel.ayuda-modo * { cursor: help !important; }
.jsPanel.ayuda-modo .jsPanel-btn-ayuda { background: rgba(255,255,255,.4); }
.ayuda-target { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.ayuda-globo {
  position: absolute; z-index: 99999; width: 380px; max-width: calc(100% - 16px);
  background: var(--surface); color: var(--text); border: 1px solid var(--accent);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 13px;
  display: flex; flex-direction: column; max-height: 70vh;
}
.ayuda-globo-tit { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; font-weight: 600; color: var(--legend); border-bottom: 1px solid var(--border); }
.ayuda-globo-tit span { flex: 1; }
.ayuda-x { background: none; border: none; color: var(--text-soft); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.ayuda-x:hover { color: var(--text); }
.ayuda-globo-cuerpo { padding: 8px 12px; overflow: auto; line-height: 1.45; }
.ayuda-globo-cuerpo p { margin: 0 0 8px; }
.ayuda-globo-cuerpo ul, .ayuda-globo-cuerpo ol { margin: 0 0 8px; padding-left: 20px; }
.ayuda-globo-cuerpo li { margin: 2px 0; }
.ayuda-globo-cuerpo h4 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-soft); }
.ayuda-globo-cuerpo code { background: var(--input-bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 12px; }
.ayuda-globo-cuerpo a { color: var(--accent); }
.ayuda-falta { color: var(--text-soft); font-style: italic; }
.ayuda-globo-pie { display: flex; gap: 14px; align-items: center; padding: 6px 12px 8px; border-top: 1px solid var(--border); font-size: 12px; }
.ayuda-globo-pie a { color: var(--accent); text-decoration: none; }
.ayuda-globo-pie a:hover { text-decoration: underline; }
.ayuda-clave { margin-left: auto; color: var(--text-soft); opacity: .55; font-family: monospace; font-size: 10px; }

/* Selector de modo en Nueva solicitud */
.sol-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.sol-modo-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; }
.sol-modo-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); }
.sol-modo-opt input { margin-top: 3px; }
.sol-modo-opt small { display: block; color: var(--text-soft); }

/* ===== Originación: secciones colapsables y panel de clientes plegable ===== */
.orig-sec { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 8px; padding: 0 10px 6px; }
.orig-sec > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center;
  padding: 7px 0 5px; font-weight: 600; font-size: 13px; color: var(--legend); user-select: none; }
.orig-sec > summary::before { content: '▸'; transition: transform .15s; flex: 0 0 auto; }
.orig-sec[open] > summary::before { transform: rotate(90deg); }
.orig-sec > summary::-webkit-details-marker { display: none; }
.orig-sec > summary .sol-chip { font-weight: 400; }
.orig-colapsada { flex: 0 0 30px !important; cursor: pointer; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 10px; border-right: 1px solid var(--border); }
.orig-colapsada span { writing-mode: vertical-rl; color: var(--text-soft); font-size: 12px; }
.orig-colapsada[hidden], [data-cli-col][hidden] { display: none !important; }

/* ===== Ficha de cliente: carga por botones (estilo formulario de solicitud) ===== */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill { border: 1px solid var(--border); background: var(--panel-bg); border-radius: 18px;
  padding: 5px 14px; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.2; }
.pill:hover { border-color: var(--legend); }
.pill.on { background: #2e4a9e; border-color: #2e4a9e; color: #fff; font-weight: 600; }
.ficha-owner { font-weight: 400; font-size: 12px; }

/* ===== Tesorería: informe de gastos ===== */
/* Fila "(SIN CLASIFICAR)": alerta suave, translúcida (sirve en tema día y noche). */
.tes-fila-pend { background: color-mix(in srgb, #d49a00 16%, transparent) !important; }
/* Celda con desvío: gasto muy por encima del promedio del rubro. */
.tes-celda-desvio { background: color-mix(in srgb, #d9534f 22%, transparent) !important; }
.tes-leyenda-desvio { background: color-mix(in srgb, #d9534f 22%, transparent); border-radius: 3px; padding: 0 4px; }
/* Header de semana en dos líneas: "Semana 1" / rango de fechas. */
.tes-hdr-2l .ag-header-cell-text { white-space: pre-line; text-align: center; line-height: 1.3; }
/* Tablero: tarjetas sobrias (nada del neón del dashboard BDM) e importes negativos. */
.tes-kpis { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 14px 8px; }
.tes-kpi { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; }
.tes-kpi .v { font-size: 17px; font-weight: 700; }
.tes-kpi .l { font-size: 11px; color: var(--text-soft); }
.tes-kpi.alerta { border-color: #d49a00; }
.tes-imp-neg { color: #e05a4d; }
/* Importes que abren su Composición con un clic (en la grilla, el
   número; en la tarjeta, toda la tarjeta): se subrayan al pasar el
   mouse, como un enlace. */
.tes-link { cursor: pointer; }
.tes-link:hover { text-decoration: underline; color: var(--legend); }
.tes-kpi.tes-click { cursor: pointer; }
.tes-kpi.tes-click:hover { border-color: var(--legend); }
.tes-kpi.tes-click:hover .v { text-decoration: underline; }
/* Operación: cabecera del origen y el movimiento del que se vino. */
.tes-op-cab { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.55; }
.tes-op-num { font-size: 14px; }
.tes-op-marca { color: var(--legend); }
.tes-fila-marcada { background: color-mix(in srgb, var(--legend) 22%, transparent) !important; }
/* Composición: pie con la suma de control contra el valor clicado. */
.tes-comp-pie { padding: 6px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-soft); }
/* Composición: barra de título con sus botones ARRIBA (en ventana y acoplada) */
.tes-comp { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto; }
.tes-comp-cab { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tes-comp-tit { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tes-comp-res { color: var(--text-soft); }
.tes-comp-acc { flex: 0 0 auto; display: flex; gap: 5px; }
.tes-comp-ico { background: none; border: 0; color: var(--text); cursor: pointer; font-size: 14px; padding: 0 4px; }
.tes-comp-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Split del Tablero: resumen arriba, Composición acoplada abajo */
.tes-split { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tes-split-det { min-height: 0; flex-direction: column; overflow: hidden; border-top: 2px solid var(--accent); }
.tes-comp-pie b { color: var(--text); }
.tes-comp-ok { color: #27ae60; font-weight: 600; margin-left: 6px; }
.tes-comp-dif { color: #e05a4d; font-weight: 600; margin-left: 6px; }
/* Dashboard gerencial: bloques RESUMEN por empresa con badge de cuadre. */
.tes-ger-bloque { margin: 8px 4px 18px; }
.tes-ger-titulo { display: flex; align-items: baseline; gap: 12px; padding: 4px 2px; font-size: 15px; }
.tes-ger-badge { font-size: 12px; color: var(--danger); }
.tes-ger-badge.ok { color: #27ae60; }
.tes-ger-grafico { margin: 2px 4px 6px; }
/* Pendientes: placeholder de la columna Clasificación y su editor. */
.tes-elegir { color: var(--text-soft); font-style: italic; cursor: pointer; }
.tes-rubro-editor { padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.tes-rubro-editor input { width: 280px; padding: 5px 8px; }

/* Mini-alta de lead: CUIT en rojo mientras no es válido, y panel lateral
   con lo que ya sabemos del cliente (bloqueo e historial). */
input.cuit-invalido { color: var(--cuit-bad) !important; border-color: var(--cuit-bad) !important; }
:root, [data-theme="light"] { --cuit-bad: #c0392b; }
[data-theme="dark"] { --cuit-bad: #ff7b72; }
/* Originación: los inputs sueltos (buscar, registrar contacto, fecha) no están en
   .form-row y quedaban con el blanco del navegador en tema noche. */
.orig-win input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.orig-win textarea, .orig-win select {
  padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 13px; background: var(--input-bg); color: var(--text); font-family: inherit;
}
.orig-win textarea { resize: vertical; line-height: 1.35; }
.orig-win input::placeholder, .orig-win textarea::placeholder { color: var(--text-soft); }
/* Grilla de leads: aire entre "Cotizado" (a la derecha) y "Asignado" */
.orig-gap { padding-left: 18px !important; }
.lead-cuit-panel { flex: 0 0 300px; border-left: 1px solid var(--border); padding: 8px 10px; overflow-y: auto; font-size: 12.5px; }
.lead-cuit-panel h4 { margin: 0 0 6px; font-size: 13px; }
.lead-cuit-panel .hint { padding: 0; }
.lead-cuit-panel .bloq { background: #c0392b; color: #fff; border-radius: 6px; padding: 8px 10px; margin: 6px 0 10px; font-weight: 600; }
.lead-cuit-panel .bloq small { display: block; font-weight: 400; margin-top: 3px; }
.lead-cuit-panel .ok-nuevo { background: #1e7d4a; color: #fff; border-radius: 6px; padding: 8px 10px; margin: 6px 0; }
.lead-cuit-panel .sec { margin: 8px 0 2px; font-weight: 600; color: var(--legend); }
.lead-cuit-panel ul { margin: 0; padding-left: 16px; }
.lead-cuit-panel li { margin: 1px 0; }

/* ============================================================
   Comercial v2: Gestión de Leads + Gestión de Cotizaciones
   (js/comercial_comun.js, js/leads.js, js/originacion.js)
   ============================================================ */
.cm-win { display: flex; flex-direction: column; height: 100%; }
.cm-barra { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap; }
.cm-busc { flex: 0 1 460px; min-width: 220px; }
.cm-busc input { width: 100%; }
.cm-busc-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 360px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; }
.cm-busc-fila { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cm-busc-fila:hover { background: var(--surface-2); }
.cm-busc-pie { border-top: 1px solid var(--border); padding: 6px 4px 2px; }
.cm-toggle { display: inline-flex; gap: 0; }
.cm-toggle .btn { border-radius: 0; }
.cm-toggle .btn:first-child { border-radius: 6px 0 0 6px; }
.cm-toggle .btn:last-child { border-radius: 0 6px 6px 0; }
.cm-lista-barra { display: flex; gap: 6px; align-items: center; padding: 6px 10px; flex: 0 0 auto; flex-wrap: wrap; }

.cm-split { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cm-split-top { flex: 0 0 42%; display: flex; flex-direction: column; min-height: 80px; }
.cm-split-bar { flex: 0 0 6px; cursor: row-resize; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cm-split-bar:hover { background: var(--accent); opacity: .5; }
.cm-split-bottom { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }

.cm-ficha-cab { display: flex; gap: 8px; align-items: center; padding: 6px 10px; flex: 0 0 auto; flex-wrap: wrap; }
.cm-ficha-tit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; flex: 1 1 auto; }
.cm-ficha-acc { display: flex; gap: 5px; flex-wrap: wrap; }
.cm-ficha-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cm-ficha-tabs > .tabs-body { flex: 1 1 auto; min-height: 0; }
.cm-sec-cab { display: flex; gap: 6px; align-items: center; padding: 4px 0; }
.cm-datos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .cm-datos-grid { grid-template-columns: 1fr; } }

.cm-log { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; background: var(--surface-2); }
.cm-log-tipos { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 5px; }
.cm-log textarea { width: 100%; }
.cm-log-paso { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 12px; }
.cm-sin-paso { display: inline-flex; gap: 3px; align-items: center; color: var(--text-soft); }
.cm-paso-pend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 8px;
  border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 6px; }
.cm-paso-pend.vacio { border-left-color: var(--danger); }
.cm-tl-filtros { display: flex; gap: 5px; margin: 4px 0 6px; }
.cm-tl-filtros .sol-chip { cursor: pointer; }
.cm-tl-dia { font-weight: 600; color: var(--legend); margin: 10px 0 4px; font-size: 12px; }
.cm-tl-item { display: flex; gap: 8px; padding: 4px 0 6px; border-bottom: 1px dashed var(--border); }
.cm-tl-item.evento { opacity: .85; }
.cm-tl-item.evento .cm-tl-cab b { font-weight: 500; }
.cm-tl-ico { flex: 0 0 22px; text-align: center; }
.cm-tl-cuerpo { flex: 1 1 auto; min-width: 0; }
.cm-tl-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cm-tl-det { white-space: pre-wrap; margin-top: 2px; font-size: 12.5px; }
.cm-tl-paso { font-size: 12px; color: var(--accent); margin-top: 2px; }
.cm-tl-paso.hecho { color: var(--text-soft); text-decoration: line-through; }

.cm-hoy-fila { display: flex; gap: 8px; align-items: center; padding: 4px 0; flex-wrap: wrap; }
.cm-check-barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 4px 0; }
.cm-check-barra > div { height: 100%; background: #2e7d4f; }
.cm-check-fila { display: flex; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border); }

.cm-embudo { display: flex; gap: 10px; padding: 10px; align-items: flex-start; flex-wrap: wrap; }
.cm-col { flex: 1 1 260px; min-width: 240px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.cm-col.sobre { outline: 2px dashed var(--accent); }
.cm-col-cab { padding: 6px 8px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; }
.cm-col-cuerpo { padding: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; }
.cm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.cm-card:not(.trabado):hover { border-color: var(--accent); }
.cm-card.trabado { border-left: 4px solid #d33; }
.cm-embudo-nota { flex: 1 1 100%; }

.cm-apr-sec { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.cm-apr-sec.alerta { border-color: #f0c3bd; background: rgba(220, 53, 69, .06); }
.cm-apr-tit { font-weight: 600; margin-bottom: 6px; }
.cm-apr-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cm-apr-tabla th { text-align: left; color: var(--text-soft); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.cm-apr-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cm-apr-tabla tr.off td { opacity: .55; }
.cm-apr-tabla select { max-width: 200px; }
.cm-dias { display: flex; gap: 3px; margin-top: 3px; }
.cm-dias label { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; }

/* ============================================================
   RRHH v2 (2026-09-28): acciones a la vista, avisos de una línea,
   filtros con listas y ausencias como eventos. Usa SOLO las variables
   del tema (acento, superficies, texto): se ve igual que el resto del
   sistema, en día y en noche. Los colores de estado son los mismos
   tonos que ya usaba el calendario de licencias (.rrhh-cal-*).
   ============================================================ */
.rrhh-win { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--text); background: var(--surface); }
/* `hidden` tiene que ganarle a los display:flex de estas clases. */
.rrhh-win [hidden], .rrhh-filtros [hidden] { display: none !important; }
.rrhh-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.rrhh-pad { padding: 12px 14px; }
.rrhh-row { display: flex; align-items: center; gap: 8px; }
.rrhh-sp { flex: 1 1 auto; }
.rrhh-soft { color: var(--text-soft); }
.rrhh-small { font-size: 12px; }
.rrhh-h { font-size: 17px; font-weight: 600; margin: 0; }
.rrhh-h3 { font-size: 14px; font-weight: 600; margin: 0; }
.rrhh-num { font-variant-numeric: tabular-nums; }

/* Barra de filtros: etiqueta arriba, control abajo; filtra al elegir. */
.rrhh-filtros { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rrhh-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rrhh-campo > label { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.rrhh-campo select, .rrhh-campo input { padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 13px; background: var(--input-bg); color: var(--text); font-family: inherit; }
.rrhh-campo .ts-wrapper { min-width: 0; }
.rrhh-campo .ts-control { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.rrhh-rango { display: flex; gap: 6px; }
.rrhh-rango input { width: 140px; }
.ts-dropdown.rrhh-dd { z-index: 20000; font-size: 13px; }
.ts-dropdown.rrhh-dd .option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.rrhh-opt-sub { font-size: 11.5px; color: var(--text-soft); }
.rrhh-opt-der { margin-left: auto; font-size: 11.5px; color: var(--text-soft); }

/* Chips de estado: texto corto sobre un tono suave (sirve en día y noche). */
.rrhh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap;
  background: color-mix(in srgb, var(--c, #888) 16%, transparent); color: color-mix(in srgb, var(--c, #888) 78%, var(--text)); }
.rrhh-chip.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rrhh-chip.warn { --c: #d49a00; } .rrhh-chip.bad { --c: #c0392b; } .rrhh-chip.ok { --c: #27ae60; }
.rrhh-chip.acc { --c: var(--accent); } .rrhh-chip.neu { --c: #888; }
.rrhh-chip.t-vacaciones { --c: #2a8a4a; } .rrhh-chip.t-licencia { --c: #d4762c; }
.rrhh-chip.t-certificado { --c: #2c7bd4; } .rrhh-chip.t-otro { --c: #888; } .rrhh-chip.t-trabajo_remoto { --c: #8a55d6; }
.rrhh-chip.t-feriado, .rrhh-chip.t-gremial { --c: #8e44ad; }

/* Aviso de una línea: número + contexto + botón. */
.rrhh-aviso { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, var(--surface)); font-size: 13px; }
.rrhh-aviso b { font-weight: 600; }
.rrhh-aviso.warn { --c: #d49a00; } .rrhh-aviso.ok { --c: #27ae60; } .rrhh-aviso.info { --c: var(--accent); }
.rrhh-aviso .ico { font-size: 14px; }
.rrhh-avisos { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 0; }
.rrhh-avisos:empty { display: none; }

/* Botones extra, sobre la base .btn del sistema. */
.btn.btn-xs { padding: 3px 9px; font-size: 12px; }
.btn.ok { background: #27ae60; } .btn.ok:hover { background: #229954; }
.btn.link { background: none; color: var(--accent); padding-left: 4px; padding-right: 4px; }
.btn.link:hover { background: none; text-decoration: underline; }
.btn.borde { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); }
.btn.borde:hover { background: var(--surface-2); }
.btn.borde.rojo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Iniciales de la persona. */
.rrhh-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 1;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent); }
.rrhh-persona { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; line-height: 1.25; }
.rrhh-persona .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrhh-persona .s { font-size: 11.5px; color: var(--text-soft); }

/* Tarjetas KPI (mismo criterio que .tes-kpi). */
.rrhh-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.rrhh-kpi { flex: 1 1 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.rrhh-kpi .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rrhh-kpi .v small { font-size: 12px; font-weight: 500; color: var(--text-soft); }
.rrhh-kpi .l { font-size: 11.5px; color: var(--text-soft); }

/* Cierre del mes: pasos en orden. */
.rrhh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.rrhh-pasos .paso { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.rrhh-pasos .paso:last-child { border-bottom: none; }
.rrhh-pasos .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 700; font-size: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.rrhh-pasos .paso.listo .num { background: #27ae60; color: #fff; }
.rrhh-pasos .txt { flex: 1 1 auto; min-width: 0; }
.rrhh-pasos .txt b { font-weight: 600; font-size: 13.5px; }
.rrhh-pasos .txt div { font-size: 12px; color: var(--text-soft); margin-top: 1px; }
.rrhh-barra { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.rrhh-barra > span { display: block; height: 100%; background: var(--accent); }
.rrhh-drop { border: 2px dashed var(--border); border-radius: 8px; padding: 10px; text-align: center; color: var(--text-soft);
  font-size: 12.5px; cursor: pointer; }
.rrhh-drop.sobre { border-color: var(--accent); color: var(--accent); }

/* Revisión: lista de personas + días como tarjetas con la corrección en línea. */
.rrhh-rev { display: flex; flex: 1 1 auto; min-height: 0; }
.rrhh-rev-lista { flex: 0 0 270px; border-right: 1px solid var(--border); overflow: auto; padding: 6px; background: var(--surface-2); }
.rrhh-rev-lista .p { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 6px; cursor: pointer; }
.rrhh-rev-lista .p:hover { background: var(--surface); }
.rrhh-rev-lista .p.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.rrhh-rev-lista .vacio { padding: 20px 10px; text-align: center; color: var(--text-soft); }
.rrhh-rev-det { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rrhh-dia { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.rrhh-dia.activo { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.rrhh-dia.hecho { opacity: .55; }
.rrhh-dia .fecha { font-weight: 700; width: 100px; }
.rrhh-marcas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rrhh-marca { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.rrhh-marca.manual { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.rrhh-marca.anulada, .rrhh-marca.doble { text-decoration: line-through; color: var(--text-soft); font-weight: 400; }
.rrhh-marca.falta { border: 1.5px dashed #d49a00; color: color-mix(in srgb, #d49a00 80%, var(--text)); background: transparent; }
.rrhh-marcas .ln { width: 10px; height: 1px; background: var(--border); }
.rrhh-dia input[type="time"] { width: 105px; padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--text); font-family: inherit; }
.rrhh-dia select { padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg);
  color: var(--text); font-family: inherit; font-size: 13px; }
.rrhh-mas { border-top: 1px dashed var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rrhh-mas .m { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rrhh-kbd { display: inline-block; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
  font-size: 11px; background: var(--surface); }

/* Acciones dentro de una grilla (AG Grid): botones compactos en la celda. */
.rrhh-cel-acc { display: flex; gap: 4px; align-items: center; height: 100%; }
.rrhh-cel-acc .btn { line-height: 1.2; }

/* Barra que aparece al seleccionar filas (Horas extra). */
.rrhh-seleccion { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 8px 14px 0; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 13px; }
.rrhh-seleccion .btn { background: #fff; color: var(--accent); }
.rrhh-seleccion .btn.sec { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }

/* Selector segmentado (pestañas de estado dentro de una ventana). */
.rrhh-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; }
.rrhh-seg button { border: none; background: none; padding: 5px 11px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-soft); }
.rrhh-seg button.on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.rrhh-seg button em { font-style: normal; margin-left: 4px; color: var(--text-soft); font-weight: 400; }

/* Ausencias: panel lateral dentro de la ventana. */
.rrhh-panel-lat { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -8px 0 22px rgba(0,0,0,.18); display: flex; flex-direction: column; z-index: 5; }
.rrhh-panel-lat .cab { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.rrhh-panel-lat .cuerpo { flex: 1 1 auto; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.rrhh-panel-lat .pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.rrhh-velo { position: absolute; inset: 0; background: rgba(0,0,0,.18); z-index: 4; }
.rrhh-panel-lat textarea { width: 100%; min-height: 56px; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 13px; resize: vertical; }

/* Ausencias: calendario del equipo (personas x días del mes). */
.rrhh-gantt { display: grid; font-size: 11.5px; min-width: 900px; }
.rrhh-gantt .h { padding: 4px 0; text-align: center; color: var(--text-soft); font-weight: 600; border-bottom: 1px solid var(--border);
  line-height: 1.25; background: var(--surface-2); }
.rrhh-gantt .h.nm { text-align: left; padding-left: 10px; }
.rrhh-gantt .nm { padding: 0 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; white-space: nowrap; overflow: hidden; background: var(--surface); position: sticky; left: 0; z-index: 2; }
.rrhh-gantt .c { border-bottom: 1px solid var(--border); border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  height: 34px; position: relative; cursor: pointer; }
.rrhh-gantt .c:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rrhh-gantt .we { background: color-mix(in srgb, var(--text-soft) 7%, transparent); }
.rrhh-gantt .fe { background: color-mix(in srgb, #8e44ad 30%, transparent); }
.rrhh-gantt .h.fe { background: #8e44ad; color: #fff; border-bottom-color: #8e44ad; }
:root[data-theme="dark"] .rrhh-gantt .fe { background: color-mix(in srgb, #b370e0 38%, transparent); }
:root[data-theme="dark"] .rrhh-gantt .h.fe { background: #a45bd0; color: #fff; }
.rrhh-gantt .barra { position: absolute; top: 7px; height: 20px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; z-index: 1; cursor: pointer; }
.rrhh-gantt .barra.t-vacaciones { background: #2a8a4a; } .rrhh-gantt .barra.t-licencia { background: #d4762c; }
.rrhh-gantt .barra.t-certificado { background: #2c7bd4; } .rrhh-gantt .barra.t-otro { background: #888; } .rrhh-gantt .barra.t-trabajo_remoto { background: #8a55d6; }

/* Confirmación breve (rrhhToast): abajo a la derecha, no bloquea y se va sola. */
#rrhh-toasts { position: fixed; right: 18px; bottom: 46px; display: flex; flex-direction: column; gap: 8px; z-index: 30000; pointer-events: none; }
.rrhh-toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid #27ae60;
  border-radius: 6px; padding: 9px 14px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.22); max-width: 380px;
  transition: opacity .35s, transform .35s; }
.rrhh-toast.err { border-left-color: #d49a00; }
.rrhh-toast.fuera { opacity: 0; transform: translateY(6px); }
.rrhh-panel-lat .rrhh-aviso { flex-wrap: wrap; row-gap: 2px; }

/* Cierre del mes: tira de días del mes con el estado de la importación. */
.rrhh-cob-fila { margin-top: 7px; }
.rrhh-cob { display: flex; gap: 2px; flex-wrap: wrap; }
.rrhh-cob i { display: block; width: 11px; height: 16px; border-radius: 2px; }
.rrhh-cob i.completo { background: #27ae60; }
.rrhh-cob i.parcial { background: #d49a00; }
.rrhh-cob i.sin_marcas { background: #c0392b; }
.rrhh-cob i.futuro { background: var(--surface-2); border: 1px solid var(--border); }
.rrhh-cob i.no_laborable { background: transparent; border: 1px dashed var(--border); }

/* Empleados del reloj: celdas editables con un clic y dato faltante resaltado. */
.rrhh-cel-edit { cursor: pointer; }
.rrhh-cel-edit::after { content: '▾'; float: right; color: var(--text-soft); margin-left: 6px; }
.rrhh-cel-falta { color: #b9770e; font-style: italic; }
.rrhh-cel-editor { width: 100%; height: 100%; border: 1px solid var(--accent); border-radius: 3px; background: var(--input-bg);
  color: var(--text); font: inherit; padding: 0 4px; }

/* ============================================================
   PLANIFICACIÓN LOGÍSTICA — design system (mockup de Marcelo, 2026-09-29).
   Los valores oscuros son los del mockup; los claros son su equivalente
   para el modo día, porque el resto del sistema respeta el toggle.
   Prefijo pl- para no chocar con .btn/.panel/.chip que ya existen.
   ============================================================ */
:root, [data-theme="light"] {
  --pl-bg: #f5f6f8;          /* fondo de la ventana */
  --pl-bar: #ffffff;         /* barra superior */
  --pl-panel: #ffffff;       /* panel */
  --pl-row: #f2f3f6;         /* fila / tarjeta sobre el panel */
  --pl-line: #e2e4ea;        /* borde de panel */
  --pl-line-2: #d3d6de;      /* borde de fila */
  --pl-line-3: #b9bdc8;      /* borde de input */
  --pl-fg: #1f1e1d;
  --pl-fg-soft: #6b7280;
  --pl-fg-mid: #4b5563;
  --pl-pri: #3a63c8;         /* primario, contraste AA sobre blanco */
  --pl-pri-fg: #ffffff;
  --pl-pri-soft: #e6ecfb;    /* fondo de tab activa / aviso */
  --pl-pri-soft-fg: #1e3a8a;
  --pl-link: #2b52ad;
  /* Estados: píldora (fondo/texto) y tarjeta (fondo/borde) */
  --pl-prog: #f5d97f;        --pl-prog-fg: #3d3300;
  --pl-prog-bg: #fdf6e0;     --pl-prog-bd: #e4c86a;
  --pl-conf: #4da368;        --pl-conf-fg: #ffffff;
  --pl-conf-bg: #e8f6ed;     --pl-conf-bd: #a8d9b8;
  --pl-done: #64748b;        --pl-done-fg: #ffffff;
  --pl-done-bg: #eef0f3;     --pl-done-bd: #cdd3dc;
  --pl-late: #c0392b;        --pl-late-fg: #ffffff;
  --pl-late-bg: #fdeceb;     --pl-late-bd: #efb3ad;
  --pl-repro: #8b90a0;       --pl-repro-fg: #ffffff;
  --pl-repro-bg: #f2f3f6;    --pl-repro-bd: #a9aebd;
  --pl-info: #3a63c8;        --pl-info-fg: #ffffff;
  --pl-tag-red-bg: #fdeceb;  --pl-tag-red-fg: #98241a;
  --pl-tag-blue-bg: #e6ecfb; --pl-tag-blue-fg: #1e3a8a;
  --pl-tag-grey-bg: #eef0f3; --pl-tag-grey-fg: #495261;
  --pl-off-bg: #fdeceb;      --pl-off-bd: #efb3ad;   /* recurso no disponible */
  --pl-off-fg: #98241a;
  --pl-lift-bg: #dbe5fa;     --pl-lift-bd: #3a63c8;  /* recurso arrastrándose */
  --pl-warn-fg: #8a6d1f;     /* "faltan 2 documentos" */
  --pl-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
[data-theme="dark"] {
  --pl-bg: #14171F;
  --pl-bar: #171A23;
  --pl-panel: #1B1F2A;
  --pl-row: #222736;
  --pl-line: #272C3A;
  --pl-line-2: #2E3446;
  --pl-line-3: #3A4156;
  --pl-fg: #E8EAF0;
  --pl-fg-soft: #A3A9B8;
  --pl-fg-mid: #C9CEDA;
  --pl-pri: #5B8DEF;
  --pl-pri-fg: #0B1020;
  --pl-pri-soft: #22335E;
  --pl-pri-soft-fg: #DCE6FF;
  --pl-link: #8FB0F5;
  --pl-prog: #F0D56A;        --pl-prog-fg: #2A2400;
  --pl-prog-bg: #2F2A12;     --pl-prog-bd: #5C5220;
  --pl-conf: #7FD08E;        --pl-conf-fg: #04200C;
  --pl-conf-bg: #14301D;     --pl-conf-bd: #2D6A3F;
  --pl-done: #465A4E;        --pl-done-fg: #E3F1E7;
  --pl-done-bg: #1B2320;     --pl-done-bd: #2A3A30;
  --pl-late: #F08A82;        --pl-late-fg: #2E0A08;
  --pl-late-bg: #3A1919;     --pl-late-bd: #7A2E2E;
  --pl-repro: #C9CEDA;       --pl-repro-fg: #151821;
  --pl-repro-bg: #1E2028;    --pl-repro-bd: #5A6072;
  --pl-info: #8FB0F5;        --pl-info-fg: #07132E;
  --pl-tag-red-bg: #5A1F1F;  --pl-tag-red-fg: #FFC9C4;
  --pl-tag-blue-bg: #22335E; --pl-tag-blue-fg: #C6D6FA;
  --pl-tag-grey-bg: #2C3140; --pl-tag-grey-fg: #C9CEDA;
  --pl-off-bg: #2A1D20;      --pl-off-bd: #4A2B2E;
  --pl-off-fg: #E3B7B3;
  --pl-lift-bg: #2A3B66;     --pl-lift-bd: #5B8DEF;
  --pl-warn-fg: #F0D56A;
  --pl-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

/* ---------- Planificación: componentes ---------- */
.pl-win { display: flex; flex-direction: column; height: 100%; background: var(--pl-bg); color: var(--pl-fg); overflow: hidden; }
.pl-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* barra superior */
.pl-top { flex-shrink: 0; box-sizing: border-box; padding: 10px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--pl-line); background: var(--pl-bar); flex-wrap: wrap; }
.pl-title { font-size: 16px; font-weight: 600; }
.pl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-tab { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--pl-fg-soft);
  background: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pl-tab:hover { background: var(--pl-row); color: var(--pl-fg); }
.pl-tab-on { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); }
.pl-count { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--pl-line-2); color: var(--pl-fg); }
.pl-tab-on .pl-count { background: rgba(127, 127, 127, .25); }

/* botones */
.pl-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; min-height: 40px; border-radius: 8px;
  border: 1px solid var(--pl-line-3); background: var(--pl-row); color: var(--pl-fg); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-sizing: border-box; cursor: pointer; }
.pl-btn:hover:not(:disabled) { border-color: var(--pl-pri); }
.pl-btn-pri { background: var(--pl-pri); border-color: var(--pl-pri); color: var(--pl-pri-fg); font-weight: 600; }
.pl-btn-sm { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.pl-btn:disabled { opacity: .55; cursor: not-allowed; }

/* píldoras de estado */
.pl-pill { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.pl-pill.prog  { background: var(--pl-prog);  color: var(--pl-prog-fg); }
.pl-pill.conf  { background: var(--pl-conf);  color: var(--pl-conf-fg); }
.pl-pill.done  { background: var(--pl-done);  color: var(--pl-done-fg); }
.pl-pill.late  { background: var(--pl-late);  color: var(--pl-late-fg); }
.pl-pill.repro { background: var(--pl-repro); color: var(--pl-repro-fg); }
.pl-pill.info  { background: var(--pl-info);  color: var(--pl-info-fg); }

/* paneles y layout */
.pl-panel { background: var(--pl-panel); border: 1px solid var(--pl-line); border-radius: 12px; box-sizing: border-box; }
.pl-body { flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding: 12px 16px 16px; display: flex; gap: 16px; }
.pl-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-fg-soft); }
.pl-muted { font-size: 12px; color: var(--pl-fg-soft); line-height: 1.4; }
.pl-warn { font-size: 12px; color: var(--pl-warn-fg); line-height: 1.4; }
.pl-note { padding: 10px 12px; border-radius: 8px; background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg);
  font-size: 12px; line-height: 1.5; }
.pl-grow { flex-grow: 1; }

/* tarjeta de viaje */
.pl-trip { box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px;
  border: 1px solid transparent; cursor: grab; }
.pl-trip.prog  { background: var(--pl-prog-bg);  border-color: var(--pl-prog-bd); }
.pl-trip.conf  { background: var(--pl-conf-bg);  border-color: var(--pl-conf-bd); }
.pl-trip.done  { background: var(--pl-done-bg);  border-color: var(--pl-done-bd); cursor: default; }
.pl-trip.late  { background: var(--pl-late-bg);  border-color: var(--pl-late-bd); }
.pl-trip.repro { background: var(--pl-repro-bg); border: 1px dashed var(--pl-repro-bd); }
.pl-trip.drop  { background: var(--pl-pri-soft); border: 1.5px dashed var(--pl-pri); }
.pl-trip-hd { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pl-trip-cli { font-size: 13px; font-weight: 600; line-height: 1.25; }
.pl-trip-mat { font-size: 11.5px; color: var(--pl-fg-soft); line-height: 1.3; }
.pl-trip-ft { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 11px; color: var(--pl-fg-soft); }
.pl-drop-hint { padding: 6px 8px; border-radius: 6px; background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg);
  font-size: 11px; line-height: 1.35; white-space: pre-line; }

/* chips y etiquetas */
.pl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px;
  background: rgba(127, 127, 127, .16); font-size: 11px; color: var(--pl-fg); white-space: nowrap; }
.pl-chip.slot { background: transparent; border: 1px dashed var(--pl-line-3); color: var(--pl-fg-soft); }
.pl-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pl-tag.red  { background: var(--pl-tag-red-bg);  color: var(--pl-tag-red-fg); }
.pl-tag.blue { background: var(--pl-tag-blue-bg); color: var(--pl-tag-blue-fg); }
.pl-tag.grey { background: var(--pl-tag-grey-bg); color: var(--pl-tag-grey-fg); }

/* calendario */
.pl-cal { flex-grow: 1; min-height: 0; padding: 0 8px 8px; overflow: auto; }
.pl-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-hd { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px;
  background: var(--pl-row); min-height: 20px; }
.pl-hd-today { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); }
.pl-hd-sel { outline: 1.5px solid var(--pl-pri); outline-offset: -1.5px; }
.pl-dayzone { display: flex; flex-direction: column; gap: 6px; min-height: 60px; border-radius: 8px; padding: 2px; }
.pl-dayzone.over { background: var(--pl-pri-soft); outline: 1.5px dashed var(--pl-pri); outline-offset: -2px; }

/* recursos */
.pl-res { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--pl-row);
  border: 1px solid var(--pl-line-2); box-sizing: border-box; cursor: grab; }
.pl-res-off { background: var(--pl-off-bg); border-color: var(--pl-off-bd); cursor: not-allowed; }
.pl-res-off .pl-res-sub { color: var(--pl-off-fg); }
.pl-res-lift { background: var(--pl-lift-bg); border-color: var(--pl-lift-bd); box-shadow: var(--pl-shadow); }
.pl-res-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.pl-res-sub { font-size: 11px; color: var(--pl-fg-soft); line-height: 1.3; }
.pl-res-grip { flex-shrink: 0; width: 12px; color: var(--pl-fg-soft); }

/* filas clave-valor (detalle de viaje) */
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 8px; background: var(--pl-row); border: 1px solid var(--pl-line-2); box-sizing: border-box; font-size: 13px; }
.pl-key { color: var(--pl-fg-soft); font-size: 12px; }
.pl-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--pl-fg-soft); }
.pl-input { font: inherit; font-size: 14px; color: var(--pl-fg); background: var(--pl-row); border: 1px solid var(--pl-line-3);
  border-radius: 8px; padding: 9px 12px; min-height: 40px; box-sizing: border-box; width: 100%; }
.pl-input:focus { outline: 2px solid var(--pl-pri); outline-offset: -1px; }

/* tabla simple (métricas, reprogramaciones, recursos) */
.pl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pl-fg-soft); padding: 8px 10px; border-bottom: 1px solid var(--pl-line-2); white-space: nowrap; }
.pl-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--pl-line); vertical-align: middle; }
.pl-tbl tr:last-child td { border-bottom: 0; }

/* métricas */
.pl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pl-kpi { padding: 14px; border-radius: 10px; background: var(--pl-row); border: 1px solid var(--pl-line-2); }
.pl-kpi-n { font-size: 26px; font-weight: 600; line-height: 1.1; }
.pl-kpi-l { font-size: 12px; color: var(--pl-fg-soft); margin-top: 4px; line-height: 1.3; }
.pl-bar { height: 8px; border-radius: 999px; background: var(--pl-line-2); overflow: hidden; margin-top: 8px; }
.pl-bar > span { display: block; height: 100%; background: var(--pl-pri); }

/* columnas laterales */
.pl-side { flex-shrink: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.pl-side-l { width: 232px; }
.pl-side-r { width: 264px; }
.pl-center { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1100px) {
  .pl-body { flex-direction: column; overflow: auto; }
  .pl-side-l, .pl-side-r { width: auto; }
  .pl-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Agenda (Hoy de Leads / Pendientes de Cotizaciones) ===== */
.ag-wrap { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.ag-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ag-top h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.ag-top .ag-fecha { color: var(--text-soft); font-size: 13px; text-transform: capitalize; }
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ag-kpi { --c: var(--text-soft); display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  border-top: 3px solid var(--c); font-family: inherit; color: var(--text); }
.ag-kpi:hover { border-color: var(--c); }
.ag-kpi.on { border-color: var(--c); background: color-mix(in srgb, var(--c), transparent 88%); box-shadow: 0 0 0 1px var(--c); }
.ag-kpi.azul { --c: var(--accent); }
.ag-kpi b { font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--text); }
.ag-kpi.cero b { color: var(--text-soft); font-weight: 500; }
.ag-kpi span { font-size: 12px; color: var(--text-soft); }
.ag-kpi.rojo { --c: #d33; } .ag-kpi.ambar { --c: #e8a317; } .ag-kpi.verde { --c: #2e9d62; } .ag-kpi.gris { --c: var(--border); }
.ag-sec { display: flex; flex-direction: column; gap: 6px; }
.ag-sec-tit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-soft); padding: 2px 0; }
.ag-sec[hidden] { display: none; }
.ag-sec-tit .ag-n { font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }
.ag-sec-tit .ag-n.rojo { background: rgba(220,53,69,.14); color: #d33; border-color: rgba(220,53,69,.4); }
.ag-sec-tit .ag-n.ambar { background: rgba(232,163,23,.16); color: #b97d00; border-color: rgba(232,163,23,.45); }
.ag-card { --c: var(--border); display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 8px; background: var(--surface); }
.ag-card:hover { background: var(--surface-2); }
.ag-card.rojo { --c: #d33; } .ag-card.ambar { --c: #e8a317; } .ag-card.verde { --c: #2e9d62; } .ag-card.azul { --c: var(--accent); }
.ag-cuando { flex: 0 0 92px; font-size: 12px; font-weight: 600; color: var(--c); }
.ag-card.gris .ag-cuando, .ag-card:not(.rojo):not(.ambar):not(.verde):not(.azul) .ag-cuando { color: var(--text-soft); }
.ag-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-main a { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-main a:hover { color: var(--accent); text-decoration: underline; }
.ag-main span { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-acc { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }
.ag-vacio { padding: 10px 14px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-soft); font-size: 12.5px; }

/* ===== Alineación visual del resto de las pestañas de Leads y Cotizaciones ===== */
.cm-barra { padding: 10px 14px; gap: 10px; background: var(--surface-2); }
.cm-lista-barra { padding: 8px 14px; gap: 8px; }
.cm-toggle { padding: 2px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.cm-toggle .btn, .cm-toggle .btn:first-child, .cm-toggle .btn:last-child { border-radius: 6px; padding: 4px 12px; }
.cm-toggle .btn.sec { background: transparent; color: var(--text-soft); border-color: transparent; }
.cm-lista-barra .sol-chip[data-filtro], .cm-lista-barra .sol-chip[role="button"] { padding: 3px 11px; font-size: 12px; transition: filter .12s; }
.cm-lista-barra .sol-chip[role="button"]:hover { filter: brightness(.96); }
.orig-sec { background: var(--surface); border-radius: 10px; }
.orig-sec > summary { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.cm-split-bar { flex-basis: 8px; background: var(--surface-2); }
/* Etapas: columnas con filete de color arriba y tarjetas que se levantan al pasar */
.cm-embudo { padding: 14px 16px; gap: 14px; }
.cm-col { background: var(--surface-2); border-radius: 12px; border-top: 3px solid var(--accent); overflow: hidden; }
.cm-col-cab { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 12px; background: transparent; }
.cm-col-cuerpo { padding: 8px; gap: 8px; }
.cm-card { border-radius: 8px; padding: 9px 11px; gap: 4px; border-left: 4px solid var(--border); transition: box-shadow .12s, transform .12s; }
.cm-card:not(.trabado):hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,.12); transform: translateY(-1px); }
.cm-card.trabado { border-left-color: #d33; } .cm-card.trabado:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); transform: translateY(-1px); }
.cm-embudo-nota { padding: 0 2px; }
/* Aprobación / bloques de ficha */
.cm-apr-sec { border-radius: 10px; }
.cm-paso-pend { border-radius: 8px; }

/* Conversión (Leads · Cerrados): resumen, barras por mes y motivos en una sola franja */
.cv-sec { margin-bottom: 4px; }
.cv-grid { display: grid; grid-template-columns: auto auto minmax(220px, 1fr); gap: 28px; align-items: end; padding: 8px 4px 10px; }
@media (max-width: 1100px) { .cv-grid { grid-template-columns: 1fr; align-items: start; } }
.cv-tot { display: flex; gap: 22px; }
.cv-n { display: flex; flex-direction: column; gap: 0; }
.cv-n b { font-size: 24px; line-height: 1.1; font-weight: 700; color: var(--text); }
.cv-n span { font-size: 11px; color: var(--text-soft); line-height: 1.25; }
.cv-n.verde b { color: #2e9d62; } .cv-n.rojo b { color: #d33; } .cv-n.azul b { color: var(--accent); }
.cv-meses { display: flex; gap: 12px; align-items: flex-end; position: relative; padding-bottom: 20px; }
.cv-mes { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cv-mes > span { font-size: 11px; color: var(--text-soft); text-transform: capitalize; }
.cv-barras { display: flex; gap: 2px; align-items: flex-end; height: 54px; }
.cv-b { display: inline-block; width: 7px; border-radius: 2px 2px 0 0; }
.cv-b.ent { background: var(--accent); opacity: .55; } .cv-b.gan { background: #2e9d62; } .cv-b.per { background: #d33; }
.cv-leyenda { position: absolute; left: 0; bottom: 0; display: flex; gap: 10px; font-size: 10.5px; color: var(--text-soft); }
.cv-leyenda i { height: 7px; width: 7px; border-radius: 2px; margin-right: 4px; }
.cv-mot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-mot-tit { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.cv-mot-fila { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 22px; gap: 8px; align-items: center; font-size: 12.5px; }
.cv-mot-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cv-mot-bar > div { height: 100%; background: #d33; opacity: .7; }

/* Filtros de Leads agrupados + reprogramar rotulado */
.cm-fgrupo { align-self: center; margin: 0 2px 0 8px; padding-left: 10px; border-left: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.cm-reprog { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.cm-reprog input { flex: 0 0 140px; }

/* ===== Bitácora: próximo paso destacado + línea de tiempo vertical ===== */
/* Aviso de próximo paso: misma línea que los avisos de RRHH (franja fina, tinte suave del color) */
.cm-paso-pend { --c: var(--accent); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px 9px 14px; margin-bottom: 16px;
  border-radius: 6px; font-size: 13px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-left: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.cm-paso-pend.rojo { --c: #d33; } .cm-paso-pend.ambar { --c: #d49a00; } .cm-paso-pend.verde { --c: #27ae60; }
.cm-paso-pend b { font-weight: 600; color: var(--text); }
.cm-paso-pend .ico { font-size: 14px; }
.pp-sub { color: var(--text-soft); }
.tl { position: relative; padding: 4px 0 8px 0; }
.tl::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-dia { position: relative; display: flex; align-items: center; gap: 8px; margin: 14px 0 8px 40px; font-size: 12px; font-weight: 700; color: var(--text); }
.tl-dia em { font-style: normal; font-weight: 400; color: var(--text-soft); }
.tl-item { position: relative; display: flex; padding: 0 0 10px 40px; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--accent); font-size: 15px; }
.tl-item.evento .tl-dot { border-color: var(--border); background: var(--surface-2); filter: grayscale(.4); }
.tl-card { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.tl-item.evento .tl-card { background: transparent; border-style: dashed; }
.tl-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tl-cab b { color: var(--text); }
.tl-cab span { font-size: 12px; color: var(--text-soft); }
.tl-det { margin-top: 3px; white-space: pre-wrap; font-size: 13px; color: var(--text); }
.tl-paso { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 12px; font-size: 12px; border: 1px solid var(--border); }
.tl-paso span { opacity: .8; }
.tl-paso.hecho { color: #2e9d62; background: rgba(46,157,98,.12); border-color: rgba(46,157,98,.35); }
.tl-paso.pend { color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 90%); border-color: color-mix(in srgb, var(--accent), transparent 60%); }

/* Más aire en la ficha del lead */
.cm-ficha-cab { padding: 12px 16px 8px; gap: 10px 14px; }
.cm-ficha-tit { gap: 6px 12px; }
[data-bit] { padding: 14px 16px 8px; }
.cm-log { padding: 14px 16px; margin-bottom: 18px; border-radius: 10px; }
.cm-log-tipos { gap: 6px; margin-bottom: 10px; }
.cm-log-paso { gap: 8px; margin-top: 12px; }
.cm-tl-filtros { gap: 6px; margin: 4px 0 6px; }
.tl-item { padding-bottom: 16px; }
.tl-card { padding: 10px 14px; }
.tl-dia { margin: 18px 0 10px 40px; }

/* ===== Ficha del lead: título arriba, datos del subtítulo, pestañas subrayadas, formularios con rótulo arriba ===== */
.cm-split-bottom { background: var(--surface); }
.cm-ficha-cab { align-items: flex-start; justify-content: space-between; gap: 12px 24px; padding: 16px 20px 10px; border-bottom: 1px solid var(--border); }
.cm-ficha-tit { flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 280px; min-width: 0; }
.fh-titulo { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fh-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fh-dato { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.fh-dato i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-soft); }
.fh-dato b { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.fh-dato.vacio b { font-weight: 400; color: var(--text-soft); font-style: italic; }
.cm-ficha-acc { align-self: center; gap: 8px; }
/* pestañas de la ficha: subrayado en vez de cajas */
.cm-ficha-tabs > .tabs-bar { gap: 6px; padding: 0 16px; background: transparent; border-bottom: 1px solid var(--border); }
.cm-ficha-tabs > .tabs-bar > .tab-btn { padding: 11px 14px; border: none; border-radius: 0; font-size: 13.5px; position: relative; box-shadow: none; }
.cm-ficha-tabs > .tabs-bar > .tab-btn:hover { background: transparent; color: var(--text); }
.cm-ficha-tabs > .tabs-bar > .tab-btn.on { background: transparent; color: var(--accent); border: none; box-shadow: none; font-weight: 600; }
.cm-ficha-tabs > .tabs-bar > .tab-btn.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.cm-ficha-tabs > .tabs-body { background: var(--surface); }
/* Datos: dos tarjetas, rótulos arriba de cada campo */
.cm-datos-grid { gap: 20px; padding: 6px 2px 14px; align-items: start; }
.cm-datos-grid > div { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cm-datos-grid .cm-sec-cab { padding: 0 0 12px; font-size: 14px; }
.cm-datos-grid .form-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 12px; }
.cm-datos-grid .form-row > label { width: auto; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.cm-datos-grid .form-row select, .cm-datos-grid .form-row input, .cm-datos-grid .form-row textarea { width: 100%; }

/* ===== Etapas: tablero ===== */
.cm-embudo { padding: 18px 20px; gap: 18px; align-items: stretch; }
.et-col { --ec: var(--accent); flex: 1 1 280px; min-width: 260px; border: 1px solid var(--border); border-top: 4px solid var(--ec); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.et-cab { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.et-tit { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.et-ico { font-size: 18px; }
.et-n { margin-left: auto; min-width: 26px; padding: 1px 9px; border-radius: 12px; font-size: 13px; font-weight: 700; text-align: center; color: var(--ec); background: color-mix(in srgb, var(--ec), transparent 86%); }
.et-sub { display: flex; gap: 8px; flex-wrap: wrap; }
.et-dato { display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); min-width: 70px; }
.et-dato i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.et-dato b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.et-dato.mal { border-color: rgba(220,53,69,.45); background: rgba(220,53,69,.1); }
.et-dato.mal b { color: #d33; }
.et-avanzar { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.et-avanzar b { color: var(--text); font-weight: 600; }
.et-avanzar em { font-style: normal; }
.et-col .cm-col-cuerpo { padding: 12px; gap: 10px; max-height: none; }
.et-col .cm-card { padding: 11px 13px; gap: 6px; border-radius: 10px; border-left-width: 4px; background: var(--surface); }
.et-card-top { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.et-card-top b { font-size: 14px; color: var(--text); }
.et-card-top .sol-chip { flex: 0 0 auto; }
.et-card-serv { font-size: 12.5px; color: var(--text-soft); line-height: 1.35; }
.et-card-paso { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text); }
.et-card-pie { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-soft); }
.et-card-pie b { color: var(--text); font-variant-numeric: tabular-nums; }
.et-vacio { padding: 18px 8px; text-align: center; font-size: 12.5px; color: var(--text-soft); border: 1px dashed var(--border); border-radius: 10px; }

/* ===== Pestañas de Planificación logística: subrayado, sin cajas ===== */
.pl-top .pl-tabs.tabs-bar { background: transparent; border: none; padding: 0; gap: 2px; overflow: visible; align-self: stretch; align-items: stretch; }
.pl-top .pl-tabs .tab-btn.pl-tab { position: relative; padding: 14px 16px; border: none; border-radius: 0; background: none; box-shadow: none;
  color: var(--pl-fg-soft); font-size: 13.5px; font-weight: 500; transition: color .12s; }
.pl-top .pl-tabs .tab-btn.pl-tab:hover { background: none; color: var(--pl-fg); }
.pl-top .pl-tabs .tab-btn.pl-tab.on, .pl-top .pl-tabs .tab-btn.pl-tab.pl-tab-on { background: none; color: var(--pl-pri); font-weight: 600; border: none; box-shadow: none; }
.pl-top .pl-tabs .tab-btn.pl-tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pl-pri); }
.pl-top { padding-top: 0; padding-bottom: 0; }
.pl-top .pl-title { padding: 12px 0; }

/* ===== Tablero con horas ===== */
.pl-tg { display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); column-gap: 6px; position: relative; }
.pl-tg-corner, .pl-tg-hd { position: sticky; top: 0; z-index: 6; background: var(--pl-panel); }
.pl-tg-hd { margin-top: 8px; margin-bottom: 4px; }
.pl-tg-corner { margin-top: 8px; }
.pl-tg-axl { align-self: center; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-fg-soft); text-align: right; padding-right: 6px; }
.pl-sinhora { display: flex; flex-direction: column; gap: 4px; min-height: 30px; padding: 4px; border-radius: 8px; border: 1px dashed var(--pl-line-2); margin-bottom: 6px; }
.pl-sinhora.over { background: var(--pl-pri-soft); border-color: var(--pl-pri); }
.pl-axis { position: relative; }
.pl-axis span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10.5px; color: var(--pl-fg-soft); font-variant-numeric: tabular-nums; }
.pl-axis span:first-child { transform: none; }
.pl-tgrid { position: relative; display: block; padding: 0; min-height: 0; border-radius: 6px; border-left: 1px solid var(--pl-line-2);
  background-image: repeating-linear-gradient(to bottom, var(--pl-line-2) 0, var(--pl-line-2) 1px, transparent 1px, transparent calc(var(--px) / 2),
                    var(--pl-line) calc(var(--px) / 2), var(--pl-line) calc(var(--px) / 2 + 1px), transparent calc(var(--px) / 2 + 1px), transparent var(--px)); }
.pl-tgrid.over { background-color: var(--pl-pri-soft); outline: none; }
.pl-bl { position: absolute; box-sizing: border-box; padding: 4px 8px 6px; gap: 2px; overflow: hidden; border-radius: 6px; z-index: 2; cursor: grab; }
.pl-bl:hover { z-index: 4; box-shadow: var(--pl-shadow); }
.pl-bl-hd { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 11px; color: var(--pl-fg-mid, var(--pl-fg-soft)); line-height: 1.2; }
.pl-bl-cli { font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bl-mat { font-size: 11px; color: var(--pl-fg-soft); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-bl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pl-bl-ft { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--pl-fg-soft); margin-top: auto; }
.pl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--pl-fg-soft); }
.pl-dot.prog { background: var(--pl-prog); } .pl-dot.conf { background: var(--pl-conf); } .pl-dot.done { background: var(--pl-done); }
.pl-dot.late { background: var(--pl-late); } .pl-dot.repro { background: var(--pl-repro); }
.pl-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.pl-resize::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 22px; margin-left: -11px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .12s; }
.pl-bl:hover .pl-resize::after { opacity: .35; }
.pl-bl .pl-drop-hint { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 5; }
.pl-ghost { position: absolute; left: 2px; right: 2px; z-index: 3; box-sizing: border-box; padding: 3px 8px; border-radius: 6px; pointer-events: none;
  background: var(--pl-pri-soft); border: 1.5px dashed var(--pl-pri); color: var(--pl-pri-soft-fg); font-size: 11.5px; font-weight: 600; }
.pl-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #e5484d; z-index: 5; pointer-events: none; }
.pl-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }

/* Calendario: filtro por chofer y "+N más" para los superpuestos que no entran */
.pl-cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 2px 2px; }
.pl-cf-bar .pl-lbl { margin-right: 4px; }
.pl-cf-chip { font: inherit; font-size: 12px; min-height: 30px; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--pl-line-3); background: transparent; color: var(--pl-fg-mid); cursor: pointer; }
.pl-cf-chip .pl-mono { font-size: 11px; color: var(--pl-fg-soft); }
.pl-cf-chip:hover { border-color: var(--pl-pri); }
.pl-cf-chip.on { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); border-color: var(--pl-pri); font-weight: 600; }
.pl-cf-chip.on .pl-mono { color: inherit; }
.pl-mas { position: absolute; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: 6px 2px; border-radius: 6px; border: 1.5px dashed var(--pl-line-3); background: var(--pl-row); color: var(--pl-fg);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pl-mas span { font-size: 10.5px; font-weight: 500; color: var(--pl-fg-soft); }
.pl-mas:hover { border-color: var(--pl-pri); color: var(--pl-link); }
.pl-mas-pop { position: absolute; right: 2px; z-index: 8; width: 240px; max-width: calc(100% + 120px); box-sizing: border-box; padding: 8px;
  display: flex; flex-direction: column; gap: 4px; border-radius: 10px; background: var(--pl-panel); border: 1px solid var(--pl-line-3); box-shadow: var(--pl-shadow); }
.pl-mas-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; padding: 0 2px 4px; }
.pl-mas-hd .pl-btn { min-height: 28px; padding: 2px 8px; }
.pl-mas-it { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; font-size: 12px; cursor: grab; min-width: 0; }
.pl-mas-it:hover { background: var(--pl-row); }
.pl-mas-it .pl-mono { font-size: 11px; color: var(--pl-fg-soft); white-space: nowrap; }
.pl-mas-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pl-mas-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-mas-txt span { font-size: 11px; color: var(--pl-fg-soft); }

/* Tablero · vista "Por unidad": una fila por chofer (o camión), los viajes del día en orden */
.pl-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: var(--pl-row); border: 1px solid var(--pl-line-3); }
.pl-seg button { font: inherit; font-size: 13px; font-weight: 500; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 6px;
  background: none; color: var(--pl-fg-soft); cursor: pointer; }
.pl-seg button:hover { color: var(--pl-fg); }
.pl-seg button.on { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); font-weight: 600; }
.pl-seg-lbl { padding: 0 6px 0 8px; font-size: 12px; color: var(--pl-fg-soft); }
.pl-un-bar { position: sticky; top: 0; z-index: 6; background: var(--pl-panel); display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 10px 4px; }
.pl-un-dias { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-un-dia { flex-direction: column; gap: 0; min-width: 68px; padding: 4px 10px; line-height: 1.25; }
.pl-un-dia small { font-size: 11px; font-weight: 400; opacity: .85; }
.pl-un-busca { flex: 1 1 140px; max-width: 240px; min-height: 36px; padding: 6px 10px; font-size: 13px; }
.pl-un-fila { display: grid; grid-template-columns: 196px minmax(0, 1fr); border-top: 1px solid var(--pl-line); }
.pl-un-fila.over { background: var(--pl-pri-soft); outline: 1.5px dashed var(--pl-pri); outline-offset: -2px; }
.pl-un-hd { border-top: 0; }
.pl-un-hd > div { padding: 6px 12px; }
.pl-un-sin { background: var(--pl-prog-bg); }
.pl-un-cab { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--pl-line); min-width: 0; }
.pl-un-tit { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pl-un-tit > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-un-sub { font-size: 11.5px; color: var(--pl-fg-soft); line-height: 1.3; }
.pl-un-cambio { font-size: 11.5px; color: var(--pl-link); line-height: 1.3; }
.pl-un-ocup { position: relative; height: 8px; margin-top: 2px; border-radius: 4px; background: var(--pl-row); border: 1px solid var(--pl-line-2); }
.pl-un-ocup span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--pl-pri); }
.pl-un-ocup span.done { background: var(--pl-done); }
.pl-un-ocup span.late { background: var(--pl-late); }
.pl-un-ocup span.pisa { background: #e8890c; }
.pl-un-eje { display: flex; justify-content: space-between; font-size: 10px; color: var(--pl-fg-soft); }
/* Los viajes de una fila van en una sola línea (1 → 2 → 3), como en la planilla; si no entran, se desplaza la fila. */
.pl-un-viajes { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: stretch; gap: 8px; padding: 8px 10px; min-height: 60px; }
.pl-un-card { flex: 0 0 206px; gap: 4px; padding: 8px 10px; }
.pl-un-hora { font-size: 11px; color: var(--pl-fg-mid); white-space: nowrap; }
.pl-un-hora b { color: var(--pl-fg); }
.pl-un-ruta { font-size: 12px; color: var(--pl-fg-mid); line-height: 1.3; }
.pl-un-card .pl-tag { align-self: flex-start; }
.pl-tag.ambar { background: var(--pl-prog-bg); color: var(--pl-warn-fg); border: 1px solid var(--pl-prog-bd); }
.pl-un-pie { padding: 10px 12px; border-top: 1px solid var(--pl-line); }

/* Tablero · vista "Semana por unidad": filas por chofer (o camión), columnas por día */
.pl-se-bar { position: static; }
.pl-se-bar .pl-muted { flex: 1 1 320px; }
.pl-se { display: grid; grid-template-columns: 150px repeat(5, minmax(128px, 1fr)); min-width: 790px; }
.pl-se-hd { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pl-fg); background: var(--pl-panel);
  border: 0; border-bottom: 1px solid var(--pl-line-2); border-left: 1px solid var(--pl-line); text-align: left; cursor: pointer; }
.pl-se-hd:hover { color: var(--pl-link); }
.pl-se-hd.hoy { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); }
.pl-se-hd.sel { box-shadow: inset 0 -2px 0 var(--pl-pri); }
.pl-se-corner { border-left: 0; cursor: default; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-fg-soft); }
.pl-se-corner:hover { color: var(--pl-fg-soft); }
.pl-se-cab { padding: 8px 10px; border-top: 1px solid var(--pl-line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-se-celda { min-width: 0; min-height: 64px; box-sizing: border-box; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid var(--pl-line); border-left: 1px solid var(--pl-line); cursor: pointer; }
.pl-se-celda:hover { background: var(--pl-row); }
.pl-se-celda.sel { background: color-mix(in srgb, var(--pl-pri-soft) 50%, transparent); }
.pl-se-celda.over { background: var(--pl-pri-soft); outline: 1.5px dashed var(--pl-pri); outline-offset: -2px; }
.pl-se-sin { background: var(--pl-prog-bg); }
.pl-se-chip { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px;
  padding: 1px 6px; border-radius: 4px; background: var(--pl-tag-grey-bg); color: var(--pl-tag-grey-fg); }
.pl-se-chip.otro { background: var(--pl-tag-blue-bg); color: var(--pl-tag-blue-fg); font-weight: 600; }
.pl-se-viaje { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 1px 3px; border-radius: 4px; font-size: 12px; line-height: 1.35; cursor: grab; }
.pl-se-viaje:hover { background: var(--pl-row); box-shadow: 0 0 0 1px var(--pl-line-3); }
.pl-se-viaje .pl-mono { font-size: 11px; color: var(--pl-fg-soft); }
.pl-se-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-se-txt b { font-weight: 600; }
.pl-se-txt span { color: var(--pl-fg-soft); }
.pl-se-libre { margin: auto; font-size: 11px; color: var(--pl-fg-soft); opacity: .7; }

/* Tablero · "Filas por VDP": la planilla Programa de Viajes Diarios, una columna por chofer
   (vehículo y enganche en el encabezado) y una fila por viaje con Origen / Destino / Servicio / Manifiesto */
.pl-vdp { display: grid; width: max-content; min-width: 100%; }
.pl-vdp-celda { min-width: 0; box-sizing: border-box; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--pl-line); border-left: 1px solid var(--pl-line); }
.pl-vdp-celda.over { background: var(--pl-pri-soft); outline: 1.5px dashed var(--pl-pri); outline-offset: -2px; }
.pl-vdp-celda.vacia { min-height: 56px; }
.pl-vdp-celda .pl-muted { font-size: 12px; padding: 4px 2px; }
.pl-vdp-cab { background: var(--pl-panel); padding: 8px 10px; gap: 3px;
  border-top: 0; border-bottom: 1px solid var(--pl-line-2); }
.pl-vdp-cab.pl-un-sin { background: var(--pl-prog-bg); }
.pl-vdp-cab .pl-un-ocup { margin-top: 4px; }
.pl-vdp-lbl { position: sticky; left: 0; z-index: 3; background: var(--pl-panel); border-left: 0; padding: 8px 8px 6px;
  font-size: 10.5px; line-height: 1.4; color: var(--pl-fg-soft); text-transform: uppercase; letter-spacing: .04em; }
.pl-vdp-lbl span { display: block; white-space: nowrap; }
.pl-vdp-corner { border-top: 0; border-bottom: 1px solid var(--pl-line-2); justify-content: flex-end; }
.pl-vdp-n { font-size: 18px; font-weight: 700; color: var(--pl-fg); margin-bottom: 4px; }
.pl-vdp-card { gap: 3px; padding: 8px 10px; height: 100%; }
.pl-vdp-card .pl-tag { align-self: flex-start; }
.pl-vdp-r { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px; font-size: 12px; line-height: 1.3; min-width: 0; }
.pl-vdp-r > span { font-size: 10.5px; color: var(--pl-fg-soft); text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.pl-vdp-r > b { font-weight: 500; color: var(--pl-fg); overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-vdp-r.falta > b { color: var(--pl-late); font-weight: 600; }
.pl-vdp-r.defecto > b { color: var(--pl-fg-soft); font-weight: 400; font-style: italic; }
.pl-cf-sep { margin-left: 14px; }

/* Tablero · vista "Semana por cliente": una fila por servicio habitual del cliente, una columna por día */
.pl-sc .pl-se-hd.pl-sc-hd { cursor: default; }
.pl-sc .pl-se-hd.pl-sc-hd:hover { color: var(--pl-fg); }
.pl-sc-cab { gap: 4px; border-top: 1px solid var(--pl-line); }
.pl-sc-cab.pl-sc-primera { border-top: 2px solid var(--pl-line-2); }
.pl-sc-cab + .pl-sc-celda, .pl-sc-primera ~ .pl-sc-celda { border-top-width: 1px; }
.pl-sc-sub { font-size: 12px; color: var(--pl-fg-mid); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sc-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pl-sc-chips .pl-se-chip { align-self: auto; }
.pl-se-chip.fijo { background: var(--pl-conf-bg); color: var(--pl-conf-fg, var(--pl-fg)); border: 1px solid var(--pl-conf-bd); font-weight: 600; }
.pl-se-chip.demanda { background: var(--pl-row); color: var(--pl-fg-mid); border: 1px solid var(--pl-line-3); }
.pl-sc-dias { font-size: 11px; color: var(--pl-fg-soft); }
.pl-sc-celda { position: relative; min-height: 52px; cursor: default; }
.pl-sc-celda.hoy { background: color-mix(in srgb, var(--pl-pri-soft) 35%, transparent); }
.pl-sc-celda.pl-sc-prevista { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--pl-line-2) 55%, transparent) 6px 8px); }
.pl-sc-prev { font: inherit; font-size: 11.5px; color: var(--pl-link); background: var(--pl-panel); border: 1px dashed var(--pl-line-3); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; text-align: left; }
.pl-sc-prev:hover { border-color: var(--pl-pri); }
.pl-sc-mas { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--pl-line-3);
  background: var(--pl-panel); color: var(--pl-fg-mid); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.pl-sc-celda:hover .pl-sc-mas, .pl-sc-mas:focus { opacity: 1; }
.pl-sc-mas:hover { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); border-color: var(--pl-pri); }
.pl-sc-sr { color: var(--pl-late); font-size: 11px; margin-left: 4px; }

/* "+ Pedido" rápido (Bandeja de Planificación logística) */
.pl-pr-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--pl-panel); border: 1px solid var(--pl-line-3);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 260px; overflow: auto; }
.pl-pr-lista button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--pl-fg); text-align: left; cursor: pointer; }
.pl-pr-lista button:hover { background: var(--pl-pri-soft); color: var(--pl-pri-soft-fg); }
.pl-pr-lista .pl-mono { color: var(--pl-fg-soft); font-size: 12px; }
.pl-pr-lineas td { vertical-align: top; }
.pl-pr-lineas .pl-input { min-height: 32px; padding: 4px 8px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
.pl-pr-lineas select.pl-input { min-width: 120px; }

/* Consulta de órdenes de compra del cliente */
.pl-oc-sit { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--pl-row); color: var(--pl-fg-mid); }
.pl-oc-sit.vigente { background: var(--pl-conf); color: var(--pl-conf-fg); }
.pl-oc-sit.anulada, .pl-oc-sit.observada { background: var(--pl-late); color: var(--pl-late-fg); }
/* Documento de la OC: botón propio en lugar del input file nativo, y el nombre entero. */
.pl-oc-archivo { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pl-oc-archivo-nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--pl-fg); }
.pl-oc-archivo-nom.vacio { color: var(--pl-fg-mid); }
.pl-row-sel { align-items: center; }
.pl-row-sel select.pl-input { max-width: 60%; min-width: 220px; }
.pl-oc-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pl-conf); color: var(--pl-conf-fg); font-weight: 700; font-size: 13px; }
.pl-btn.pl-btn-falta { border-color: var(--pl-late); color: var(--pl-late); }
.pl-lugar { align-items: flex-start; }
.pl-lugar .pl-key { padding-top: 8px; }
.pl-lugar-ctl { display: flex; flex-direction: column; gap: 6px; flex: 0 1 65%; min-width: 240px; }
.pl-lugar-atajos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Cronograma: la fila de filtros de la vista, entre la barra de semana/vista y los paneles. */
.pl-filtros { flex-shrink: 0; padding: 0 16px; }
.pl-filtros:empty { display: none; }
.pl-filtros .pl-un-bar { position: static; background: transparent; padding: 10px 0 0; }
.pl-filtros .pl-cf-bar { padding: 10px 0 0; }
/* Confirmar plan de mañana, arriba de Recursos en el panel derecho. */
.pl-manana { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--pl-line-2); }
.pl-manana .pl-btn { width: 100%; justify-content: center; }
.pl-bj-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 0 8px 10px; }
.pl-bj-filtros .pl-field { min-width: 180px; }
.pl-sc-oc { cursor: pointer; font: inherit; font-size: 11px; }
.pl-oc-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr); gap: 10px; padding: 12px; border: 1px dashed var(--pl-line-3); border-radius: 8px; }
.pl-vdp-cab .pl-vdp-r > b { font-weight: 600; }

/* ===== Ficha del cliente: cabecera, avance, secciones plegables y rótulos arriba ===== */
.cli-ficha > .form-body { padding: 16px 20px 4px !important; row-gap: 12px; }
.cli-ficha .form-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cli-ficha .form-row > label { width: auto; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.cli-ficha .form-row input:not([type="checkbox"]):not([type="radio"]), .cli-ficha .form-row select, .cli-ficha .form-row textarea { width: 100%; max-width: none; box-sizing: border-box; }
.cli-ficha .form-row input[data-f="codigo"] { max-width: 110px; }
.cli-ficha .form-row .with-btn { display: flex; gap: 6px; }
.cli-ficha .form-row .pill-group { padding-top: 2px; }
/* Avance: "Listo para operar" */
.cli-avance { margin: 6px 20px 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cli-avance-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.cli-avance-cab span { font-size: 12px; color: var(--text-soft); }
.cli-barra { height: 6px; border-radius: 3px; background: var(--border); margin: 8px 0 10px; overflow: hidden; }
.cli-barra > div { height: 100%; background: #2e9d62; border-radius: 3px; transition: width .25s; }
.cli-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cli-chips .sol-chip { padding: 3px 11px; font-size: 12px; }
.cli-falta { cursor: pointer; border-style: dashed !important; font-family: inherit; }
.cli-falta:hover { filter: brightness(1.08); }
/* Pestañas de la ficha: subrayado */
.cli-tabs > .tabs-bar { gap: 6px; padding: 0 16px; background: transparent; border-bottom: 1px solid var(--border); }
.cli-tabs > .tabs-bar > .tab-btn { padding: 11px 14px; border: none; border-radius: 0; font-size: 13.5px; position: relative; box-shadow: none; }
.cli-tabs > .tabs-bar > .tab-btn:hover { background: transparent; color: var(--text); }
.cli-tabs > .tabs-bar > .tab-btn.on { background: transparent; color: var(--accent); border: none; box-shadow: none; font-weight: 600; }
.cli-tabs > .tabs-bar > .tab-btn.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
/* Secciones de Datos como tarjetas plegables */
.cli-sec { margin: 0 20px 12px !important; padding: 0 16px 12px !important; border-radius: 12px !important; background: var(--surface); }
.cli-sec > summary { padding: 14px 0 12px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700; flex-wrap: wrap; }
.cli-sec .ficha-owner { margin-left: 2px; }
.cli-cuenta { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-soft); padding: 2px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.cli-cuenta.vacio { color: #b97d00; border-color: rgba(232,163,23,.5); }
.cli-sec fieldset { border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 8px 0 0 !important; padding: 10px 0 4px; }
.cli-sec fieldset > legend { padding: 0 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.cli-sec .form-grid2 { column-gap: 18px; row-gap: 12px; }

/* ===== Ficha del cliente: título y grupos de datos en solapas ===== */
.cli-titulo { flex: 0 0 auto; padding: 16px 22px 4px; }
.cli-titulo-nom { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.cli-titulo-sub { margin-top: 3px; font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; min-height: 16px; }
.cli-grupo { padding: 14px 22px 18px; }
.cli-grupo-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cli-grupo fieldset { border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 10px 0 0 !important; padding: 12px 0 4px; }
.cli-grupo fieldset:first-of-type { border-top: none; margin-top: 0 !important; }
.cli-grupo fieldset > legend { padding: 0 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.cli-grupo .form-grid2 { column-gap: 20px; row-gap: 12px; }
.cli-tabs > .tabs-bar > .tab-btn .tab-cont { font-weight: 600; }

/* ===== Ficha del cliente: filas de datos (ícono de estado · rótulo · valor · botón) ===== */
.cli-grupo { max-width: 980px; }
.cli-grupo-cab { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.cli-grupo-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.cli-grupo-tit b { font-size: 16px; }
.fr-prog { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.fr-prog > div { height: 100%; width: 0; background: #2e9d62; border-radius: 3px; transition: width .25s; }
.fr-prog-txt { font-size: 12.5px; color: var(--text-soft); }
.cli-grupo .form-grid2 { display: block !important; padding: 0 !important; }
.cli-grupo .form-row.fr { display: grid; grid-template-columns: 30px minmax(130px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 8px 2px; border-bottom: 1px solid var(--border); min-height: 36px; }
.cli-grupo .form-row.fr > label { grid-column: 2; width: auto; text-align: left; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.fr-ico { grid-column: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1px solid var(--border); }
.fr-ico.ok { background: rgba(46,157,98,.18); border-color: rgba(46,157,98,.55); color: #4fd08a; }
.fr-ico.mal { background: rgba(220,53,69,.18); border-color: rgba(220,53,69,.55); color: #ff8a82; }
.fr-ico.op { background: transparent; color: var(--text-soft); }
.fr-val { grid-column: 3; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.fr-val.vacio { color: var(--text-soft); }
.fr-ctl { grid-column: 3; display: none; min-width: 0; }
.form-row.fr.editando .fr-ctl { display: block; }
.form-row.fr.editando .fr-val { display: none; }
.fr-btn { grid-column: 4; min-width: 78px; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font: inherit; font-size: 13px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.fr-btn:hover { border-color: var(--accent); color: var(--accent); }
.form-row.fr.editando .fr-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.cli-grupo .fr-ctl .form-row, .cli-grupo .fr-ctl .with-btn { width: 100%; }
.cli-grupo .fr-ctl input:not([type="checkbox"]), .cli-grupo .fr-ctl select, .cli-grupo .fr-ctl textarea { max-width: 100%; }
.cli-grupo .hint { padding: 6px 2px 0; }


/* ===== Bandeja de Planificación: revisión del pedido (js/pl_revision.js) =====
   Lo completable usa las mismas filas de datos que la ficha del cliente (.fr: ícono · rótulo · valor · botón). */
.rvp { display: flex; flex-direction: column; gap: 14px; }
.rvp-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.rvp-caja { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; background: var(--surface-2); }
.rvp-caja-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.rvp-caja-cab .rvp-link { margin-left: auto; }
.rvp-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 18px; }
.rvp-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rvp-dato i { font-style: normal; font-size: 11px; color: var(--text-soft); }
.rvp-dato b { font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.rvp-sin { color: var(--text-soft); }
.rvp-mal { color: #b3261e; font-weight: 600; }
.rvp-aviso { margin-top: 10px; font-size: 12.5px; color: #b3261e; }
[data-theme="dark"] .rvp-mal, [data-theme="dark"] .rvp-aviso { color: #ff8a82; }
.rvp-link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.rvp-cotizado { border: 1px solid var(--border); border-radius: 10px; padding: 0 14px 10px; }
.rvp-cotizado > summary { cursor: pointer; padding: 10px 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); }
.rvp-peds { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.rvp-ped { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; color: var(--text-soft); font: inherit; font-size: 13px; cursor: pointer; }
.rvp-ped b { color: var(--text); }
.rvp-ped:hover { color: var(--text); }
.rvp-ped.activo { border-bottom-color: var(--accent); color: var(--text); }
.rvp-grupo { max-width: 980px; display: flex; flex-direction: column; gap: 6px; }
.rvp-grupo + .rvp-grupo { border-top: 1px solid var(--border); padding-top: 14px; }
.rvp-grupo .cli-grupo-tit b { font-size: 16px; }
.rvp-filas { margin-top: 4px; }
.rvp-grupo .form-row.fr { display: grid; grid-template-columns: 30px minmax(150px, 260px) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 8px 2px; margin: 0; border-bottom: 1px solid var(--border); min-height: 36px; }
.rvp-grupo .form-row.fr > label { grid-column: 2; width: auto; text-align: left; font-size: 14px; font-weight: 500; color: var(--text); display: flex; flex-direction: column; }
.rvp-grupo .form-row.fr .rvp-btns { grid-column: 4; display: flex; gap: 6px; }
.rvp-grupo .form-row.fr .fr-btn { grid-column: auto; }
.rvp-grupo .rvp-cancelar { min-width: 0; }
.rvp-grupo .form-row.fr.editando .rvp-cancelar { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.rvp-grupo .form-row.fr.editando .fr-ctl { display: flex; flex-direction: column; gap: 6px; }
.rvp-grupo .fr-ctl input, .rvp-grupo .fr-ctl select, .rvp-grupo .fr-ctl textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.rvp-sub { font-size: 11.5px; font-weight: 400; color: var(--text-soft); }
.rvp-origen { font-size: 11px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); white-space: nowrap; }
.rvp-nota { font-size: 12px; color: var(--text-soft); }
.rvp-par { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 13px; }
.rvp-par input { width: 120px !important; }
.rvp-linea { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.rvp-linea label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-soft); }
.rvp-nuevo > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.rvp-nuevo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; margin: 6px 0; }
.rvp-lugar { padding: 8px 2px 0 44px; }
.rvp-lugar-cab { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; }
.rvp-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.rvp-mini { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.rvp-mini i { font-style: normal; font-size: 10.5px; color: var(--text-soft); margin-right: 5px; }
.rvp-mini.falta { color: var(--text-soft); border-style: dashed; }
.rvp-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; max-width: 980px; }
@media (max-width: 640px) {
  .rvp-grupo .form-row.fr { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .rvp-grupo .form-row.fr > label { grid-column: 2; }
  .rvp-grupo .form-row.fr .fr-val, .rvp-grupo .form-row.fr .fr-ctl { grid-column: 2 / -1; }
  .rvp-grupo .form-row.fr .rvp-btns { grid-column: 3; grid-row: 1; }
  .rvp-lugar { padding-left: 0; }
}
/* Pestañas de área de la revisión del pedido (Operativo · Administrativo · Comercial · Servicio) */
.rvp-areas { margin-top: 2px; }
.rvp-areas .rvp-ped { font-size: 14px; padding: 9px 14px; }
.rvp-areas .tab-cont { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); }
.rvp-punto { width: 8px; height: 8px; border-radius: 50%; background: #dc3545; display: inline-block; }
.rvp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); margin-right: 10px; }
.rvp-chk input { width: auto !important; }
.rvp-grupo .rvp-par .pill { padding: 4px 10px; }
/* Ficha del cliente: identidad mínima al dar de alta (lo demás se carga en la Bandeja de Planificación). */
.cli-ident { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.cli-ident[hidden] { display: none; }
.cli-ident label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }
.cli-ident input[data-f="nombre"] { min-width: 260px; }