@layer legado {
/* estilos/08-agenda-flat-y-look-saas.css · fichero 8/11 de la hoja HEREDADA (líneas 18745-19841 del antiguo styles.css).
   Agenda command center, agenda flat global, pulido y look SaaS. Tramos internos, en este orden:
     · 26-agenda-command-center (18745-18910): Agenda «Command Center» (r108)
     · 27-agenda-flat-global (18911-19494): «Agenda flat» aplicada a todo el sistema: lienzo, cabeceras, chips, modales, menú, rail derecho, vistas financieras
     · 28-pulido-y-look-saas (19495-19841): Pulido 3 y look «Partes SaaS»: tablas, labels, KPI con icono, pestañas con contador, banner de actualización
   El orden ES la cascada: va tras 07-compras-cristal-y-parte-modal.css y antes de 09-shell-claro-inventario-y-modales.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 26-agenda-command-center (líneas 18745-18910 del antiguo styles.css): Agenda «Command Center» (r108) ── */
/* ============================================================
   AGENDA "COMMAND CENTER" (rediseño r108) — blanco, limpio, calendario protagonista.
   Estilos portados del mockup aprobado, fluidos (el shell ya pone sidebar + barra superior).
   ============================================================ */
.agenda-cc{
  --cc-page:#f6f7fb;--cc-surface:#fff;--cc-soft:#f9fafb;
  --cc-border:rgba(15,23,42,.08);--cc-border2:rgba(15,23,42,.14);
  --cc-text:#0f172a;--cc-muted:#475569;--cc-faint:#64748b;   /* #64748b daba 4,04:1 sobre el papel */
  --cc-orange:#c24200;--cc-orange-soft:#fff3ec;   /* era #ff5f1f: 2,79:1 y lo lleva texto encima */
  --cc-blue:#3b82f6;--cc-blue-soft:#eff6ff;--cc-green:#22c55e;--cc-green-soft:#ecfdf5;
  --cc-red:#b91c1c;--cc-red-soft:#fef2f2;   /* era #ef4444; el texto rojo se quedaba en 4,41:1 */--cc-amber:#f59e0b;--cc-amber-soft:#fffbeb;
  color:var(--cc-text);
}
.agenda-cc *{box-sizing:border-box}
.agenda-cc .cc-intro{padding:2px 2px 4px}
.agenda-cc .cc-bc{font-size:12px;color:var(--cc-faint)}
.agenda-cc .cc-intro h1{margin:4px 0 2px;font-size:23px;letter-spacing:-.4px;color:var(--cc-text)}
.agenda-cc .cc-intro p{margin:0;color:var(--cc-muted);font-size:13.5px}
/* control bar */
.agenda-cc .cc-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 10px}
.agenda-cc .cc-scope{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:10px;font-size:12.5px;color:var(--cc-text);padding:8px 12px}
.agenda-cc .cc-seg{display:flex;background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:11px;padding:3px}
.agenda-cc .cc-seg button{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--cc-muted);padding:6px 13px;border-radius:8px;cursor:pointer;font-weight:600}
.agenda-cc .cc-seg button.on{background:var(--cc-orange-soft);color:var(--cc-orange)}
.agenda-cc .cc-range{display:flex;align-items:center;gap:6px;background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:11px;padding:5px 6px}
.agenda-cc .cc-range b{font-size:12.5px;padding:0 6px;font-weight:600}
.agenda-cc .cc-range .nav,.agenda-cc .cc-today{height:30px;border-radius:8px;border:1px solid var(--cc-border);background:#fff;color:var(--cc-muted);cursor:pointer;font-size:13px}
.agenda-cc .cc-range .nav{width:30px}
.agenda-cc .cc-today{padding:0 13px;font-size:12.5px;font-weight:600;color:var(--cc-text)}
.agenda-cc .cc-kpis{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.agenda-cc .cc-kpi{border-radius:10px;padding:6px 11px;font-size:12px;display:flex;flex-direction:column;line-height:1.15;border:1px solid transparent;min-width:60px;cursor:pointer;text-align:left}
.agenda-cc .cc-kpi b{font-size:16px;font-weight:750}
.agenda-cc .cc-kpi span{font-size: 12px;font-weight:600;opacity:.85}
.agenda-cc .cc-kpi.blue{background:var(--cc-blue-soft);color:#1d4ed8;border-color:#bfdbfe}
.agenda-cc .cc-kpi.red{background:var(--cc-red-soft);color:#b91c1c;border-color:#fecaca}
.agenda-cc .cc-kpi.amber{background:var(--cc-amber-soft);color:#b45309;border-color:#fde68a}
.agenda-cc .cc-kpi.rsoft{background:#fff5f5;color:#9f1239;border-color:#fecdd3}   /* #e11d48: 4,39:1 */
.agenda-cc .cc-kpi.gray{background:var(--cc-surface);color:var(--cc-muted);border-color:var(--cc-border)}
.agenda-cc .cc-filter{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:10px;font-size:12.5px;color:var(--cc-text);padding:8px 13px;cursor:pointer;font-weight:600}
.agenda-cc .cc-filter.on{background:var(--cc-orange-soft);color:var(--cc-orange);border-color:#ffd3bd}
/* content grid */
.agenda-cc .cc-content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
/* calendar */
.agenda-cc .cc-cal{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:18px;overflow:hidden}
.agenda-cc .cc-grid{display:grid}
.agenda-cc .cc-grid>div{border-right:1px solid var(--cc-border);border-bottom:1px solid var(--cc-border);min-width:0}
.agenda-cc .cc-colh{padding:11px 8px;text-align:center;font-size: 12px;color:var(--cc-muted);font-weight:700;background:var(--cc-soft)}
.agenda-cc .cc-colh b{display:block;color:var(--cc-text);font-size:14px;font-weight:700;margin-top:2px}
.agenda-cc .cc-colh.wknd{color:var(--cc-blue)}
.agenda-cc .cc-colh.today{position:relative}
.agenda-cc .cc-colh.today::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--cc-orange);border-radius:2px}
.agenda-cc .cc-corner{background:var(--cc-soft)}
.agenda-cc .cc-rowh{padding:11px 12px;display:flex;flex-direction:column;gap:6px;background:var(--cc-surface)}
.agenda-cc .cc-rowh .row{display:flex;align-items:center;gap:9px}
.agenda-cc .cc-rowh .av{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size: 12px;flex:0 0 auto;background:#475569}
.agenda-cc .cc-rowh .nm{font-size:13px;font-weight:650;line-height:1.05}
.agenda-cc .cc-rowh .meta{font-size: 12px;color:var(--cc-muted)}
.agenda-cc .cc-rowh .load{height:4px;border-radius:3px;background:#eef2f7;overflow:hidden;margin-top:2px}
.agenda-cc .cc-rowh .load i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ff7a1a,#ff5f1f)}
.agenda-cc .cc-rowh .warn{margin-left:auto;color:var(--cc-amber);font-size:13px}
.agenda-cc .cc-cell{min-height:92px;padding:7px;position:relative}
.agenda-cc .cc-cell.todaycol{background:#fff8f4}
.agenda-cc .cc-cell .add{position:absolute;inset:0;border:none;background:none;cursor:pointer;opacity:0;font-size:18px;color:var(--cc-faint)}
.agenda-cc .cc-cell:hover .add{opacity:.5}
.agenda-cc .cc-ev{display:block;width:100%;text-align:left;border-radius:10px;padding:7px 9px;font-size: 12px;border:1px solid transparent;margin-bottom:6px;cursor:pointer;line-height:1.25;font-family:inherit;position:relative}
.agenda-cc .cc-ev .no,.agenda-cc .cc-ev .cl,.agenda-cc .cc-ev .tm{display:block}
.agenda-cc .cc-ev .no{font-weight:750;font-size: 12px}
.agenda-cc .cc-ev .cl{font-weight:600}
.agenda-cc .cc-ev .tm{opacity:.8;font-size: 12px}
.agenda-cc .cc-ev.blue{background:var(--cc-blue-soft);border-color:#bfdbfe;color:#1e3a8a}
.agenda-cc .cc-ev.green,.agenda-cc .cc-ev.done{background:var(--cc-green-soft);border-color:#bbf7d0;color:#166534}
.agenda-cc .cc-ev.amber,.agenda-cc .cc-ev.materials{background:var(--cc-amber-soft);border-color:#fde68a;color:#92400e}
.agenda-cc .cc-ev.red,.agenda-cc .cc-ev.unfinished{background:var(--cc-red-soft);border-color:#fecaca;color:#991b1b}
.agenda-cc .cc-ev.gray,.agenda-cc .cc-ev.planned{background:var(--cc-blue-soft);border-color:#bfdbfe;color:#1e3a8a}
.agenda-cc .cc-ev.confirmed{background:var(--cc-amber-soft);border-color:#fde68a;color:#92400e}
.agenda-cc .cc-ev .conf{display:inline-flex;align-items:center;gap:4px;font-size: 12px;font-weight:700;margin-top:3px}
.agenda-cc .cc-ev.focus{box-shadow:0 6px 18px rgba(255,95,31,.18);outline:2px solid var(--cc-orange);outline-offset:-1px}
.agenda-cc .cc-ev.focus::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--cc-orange);border:2px solid #fff}
/* Tramos de una visita de varios días: forman UNA barra continua. Los márgenes negativos que la
   empalman van en línea (los calcula el renderizador según de qué lado sigue la visita). Aquí solo
   lo que es igual para todos los tramos: la misma altura, para que la barra no salga escalonada
   entre un día con rótulo y otro sin él. */
/* El ensanchado de cada tramo va EN LÍNEA (`width: calc(100% + Npx)` con su margen negativo), que
   lo calcula el renderizador según de qué lado sigue la visita. No se puede hacer con `width:auto`:
   `.cc-ev` es un <button> y un botón con ancho automático se ajusta a su contenido, así que el
   tramo que solo lleva la hora quedaba en 82px y el tramo vacío en 20px.
   La altura es FIJA para que la barra salga recta: el tramo rotulado es más alto que el que solo
   lleva la hora, y con `min-height` la barra salía escalonada. El nombre del cliente se corta a dos
   líneas, que es lo que cabe en el ancho de un día. */
.agenda-cc .cc-ev-tramo{height:72px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.agenda-cc .cc-ev-tramo .cl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.agenda-cc .cc-ev-tramo .tm{opacity:.9}
/* Foco ("proxima visita") en una barra de varios dias: con `outline` se dibujaba un aro alrededor
   de CADA tramo -- linea naranja vertical en medio de la barra y un punto por tramo. En los tramos
   se marca con el BORDE: los lados que empalman llevan `border-*-color:transparent` en linea (gana
   al ser inline), asi que el aro sale continuo por fuera de toda la barra. El punto, solo al final. */
.agenda-cc .cc-ev-tramo.focus{outline:none;border-color:var(--cc-orange);box-shadow:0 6px 18px rgba(255,95,31,.18)}
.agenda-cc .cc-ev-tramo.focus::after{display:none}
.agenda-cc .cc-ev-tramo.focus.cc-ev-fin::after{display:block}
.agenda-cc .cc-leg{display:flex;gap:16px;flex-wrap:wrap;padding:11px 16px;font-size: 12px;color:var(--cc-muted)}
.agenda-cc .cc-leg span{display:inline-flex;align-items:center;gap:6px}
.agenda-cc .cc-leg i{width:9px;height:9px;border-radius:3px;display:inline-block}
/* ops panel */
.agenda-cc .cc-ops{display:flex;flex-direction:column;gap:14px}
.agenda-cc .cc-card{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:16px;padding:16px}
.agenda-cc .cc-card h3{margin:0 0 12px;font-size:12px;text-transform: none;color:var(--cc-muted);font-weight:700}
.agenda-cc .cc-opb{padding:11px 0;border-bottom:1px solid var(--cc-border)}
.agenda-cc .cc-opb:last-child{border-bottom:none;padding-bottom:0}
.agenda-cc .cc-opb .lb{font-size:12px;color:var(--cc-muted);font-weight:600}
.agenda-cc .cc-opb .big{font-size:22px;font-weight:750;margin:3px 0 1px;color:var(--cc-text)}
.agenda-cc .cc-opb .sub{font-size:12px;color:var(--cc-faint)}
.agenda-cc .cc-opb.warn .big{color:var(--cc-red)}
.agenda-cc .cc-qa{display:flex;flex-direction:column;gap:8px}
.agenda-cc .cc-qa button{display:flex;align-items:center;gap:10px;background:var(--cc-soft);border:1px solid var(--cc-border);border-radius:11px;padding:11px 13px;font-size:13px;font-family:inherit;color:var(--cc-text);cursor:pointer;text-align:left;font-weight:600}
.agenda-cc .cc-qa button .ic{width:18px;color:var(--cc-orange);font-weight:700;text-align:center}
.agenda-cc .cc-qa button.primary{background:var(--cc-orange-soft);border-color:#ffd3bd;color:var(--cc-orange)}
/* focus card */
.agenda-cc .cc-focus{margin-top:16px;background:var(--cc-surface);border:1px solid var(--cc-border);border-left:4px solid var(--cc-orange);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.agenda-cc .cc-focus .ey{font-size: 12px;font-weight:800;letter-spacing:1px;color:var(--cc-orange)}
.agenda-cc .cc-focus h2{margin:4px 0 1px;font-size:18px;color:var(--cc-text)}
.agenda-cc .cc-focus .who{font-size:12.5px;color:var(--cc-muted)}
.agenda-cc .cc-facts{display:flex;gap:24px;flex:1;flex-wrap:wrap}
.agenda-cc .cc-fact .k{font-size: 12px;color:var(--cc-faint);font-weight:600}
.agenda-cc .cc-fact .v{font-size:13px;font-weight:650;margin-top:1px;color:var(--cc-text)}
.agenda-cc .cc-fact .v.warnv{color:var(--cc-red)}
.agenda-cc .cc-focus-actions{display:flex;flex-wrap:wrap;gap:7px;flex:0 0 auto}
.agenda-cc .cc-focus-actions button{font-size:12.5px;font-family:inherit;border-radius:9px;padding:7px 14px;border:1px solid var(--cc-border);background:#fff;color:var(--cc-text);cursor:pointer;font-weight:600}
.agenda-cc .cc-focus-actions .primary{background:var(--cc-orange);color:#fff;border-color:var(--cc-orange)}
.agenda-cc .cc-focus-actions .danger{color:var(--cc-red);border-color:#fecaca}
/* tray */
.agenda-cc .cc-tray{margin-top:16px;background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:16px;overflow:hidden}
.agenda-cc .cc-tabs{display:flex;gap:2px;border-bottom:1px solid var(--cc-border);padding:4px 8px 0;overflow-x:auto}
.agenda-cc .cc-tabs button{border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--cc-muted);padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer;font-weight:600;white-space:nowrap;margin-bottom:-1px}
.agenda-cc .cc-tabs button .c{font-size: 12px;font-weight:700;background:var(--cc-soft);border:1px solid var(--cc-border);border-radius:20px;padding:0 7px;color:var(--cc-muted);margin-left:6px}
.agenda-cc .cc-tabs button.on{color:var(--cc-orange);border-bottom-color:var(--cc-orange)}
.agenda-cc .cc-tabs button.on .c{background:var(--cc-orange-soft);color:var(--cc-orange);border-color:#ffd3bd}
.agenda-cc .cc-trow{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--cc-border);cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font-family:inherit}
.agenda-cc .cc-trow:last-child{border-bottom:none}
.agenda-cc .cc-trow:hover{background:var(--cc-soft)}
.agenda-cc .cc-trow .date{font-size:12px;color:var(--cc-muted);width:118px;flex:0 0 auto}
.agenda-cc .cc-trow .date b{display:block;color:var(--cc-text);font-size:13px}
.agenda-cc .cc-trow .ttl{font-weight:650;font-size:13.5px;flex:1;min-width:0;color:var(--cc-text)}
.cc-trow .ttl small{font-size:12px}  /* el <small> del navegador caia a 11,25px: bajo el suelo */
.agenda-cc .cc-trow .ttl small{color:var(--cc-muted);font-weight:500}
.agenda-cc .cc-chip{font-size: 12px;font-weight:650;border-radius:20px;padding:2px 10px;white-space:nowrap}
.agenda-cc .cc-chip.amber{background:var(--cc-amber-soft);color:#b45309}
.agenda-cc .cc-chip.red{background:var(--cc-red-soft);color:#b91c1c}   /* #dc2626: 4,41:1 */
.agenda-cc .cc-tray-empty{padding:22px 18px;color:var(--cc-faint);font-size:13px;text-align:center}
/* filter drawer (colapsable) */
.agenda-cc .cc-filters{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:14px;padding:14px 16px;margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.agenda-cc .cc-filters label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--cc-muted);font-weight:600}
.agenda-cc .cc-filters .search-input{border:1px solid var(--cc-border);border-radius:10px;padding:8px 10px;font-size:13px;background:var(--cc-soft)}
@media(max-width:1100px){
  .agenda-cc .cc-content{grid-template-columns:1fr}
  .agenda-cc .cc-cal{overflow-x:auto}
}

/* "Volver otro día" — cabecera del panel de días con acción de cierre */
.wo-sessions-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.wo-sessions-head-actions .btn.compact{padding:6px 12px;font-size:12px;font-weight:700}
/* Los dos botones de un dia (Editar / Borrar) en la misma linea: partidos se leen como dos filas. */
.wo-session-actions{white-space:nowrap}
.wo-session-actions .btn.compact{margin-left:4px}
/* El aviso de dias duplicados va PEGADO a la tabla que describe, no flotando en el panel. */
.wo-sessions-aviso{margin:0 0 12px}

/* ── tramo 27-agenda-flat-global (líneas 18911-19494 del antiguo styles.css): «Agenda flat» aplicada a todo el sistema: lienzo, cabeceras, chips, modales, menú, rail derecho, vistas financieras ── */
/* ═══════════════════════════════════════════════════════════════════════════
   AGENDA FLAT — el diseño de la Agenda de equipo aplicado a TODO el sistema.
   ADN (de las capturas de la agenda): página PLANA gris muy claro, paneles
   BLANCOS con borde fino, cabecera compacta (miga + título 20px + subtítulo
   gris), chips de estado pequeños con número tonal, segmentos tipo
   Semana/Día/Mes, títulos de sección en mini-etiquetas naranjas
   ("Resumen operativo"; eran MAYÚSCULAS espaciadas hasta el 22-oct-2026, cuando se quitaron de toda la
   app por la revisión de interfaz: se leían peor y eran el adorno más repetido), botones compactos. Nada de tarjetas cálidas con
   degradado, ni heros gigantes, ni bandas numeradas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --page-background: #f6f7f8;
  --surface: #ffffff;
  --surface-warm: #ffffff;
  --hairline: #e6e8ea;
  --hairline-strong: #d8dbdf;
}

/* ── Lienzo: página plana, paneles blancos con borde fino ── */
.app-shell, .layout { background: var(--page-background); }
.panel {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.panel .panel { border-radius: 12px; }

/* ── Cabecera de vista: compacta como la agenda (miga + título + subtítulo) ── */
.page-intro-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-intro-v2 .page-intro-copy .eyebrow {
  display: block;
  margin-bottom: 2px;
  /* El color, el peso, las mayusculas y el interletraje los pone el sistema
     (`.page-intro-v2 .eyebrow`, mas abajo). Estaban aqui, y como este selector es (0,3,0) contra
     (0,2,0), ganaba aunque el del sistema fuera despues: la migaja salia gris y en minusculas en
     TODAS las secciones menos Facturacion, que tiene cabecera propia. */
  font-size: 12px;
}
.page-intro-v2 h2 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.page-intro-v2 .page-intro-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  max-width: 78ch;
}
.page-intro-v2 .status-row .status-pill { background: #fff; border-color: var(--hairline-strong); }

/* ── Chips de estado (como "24 Conflictos · 0 Sin hora" de la agenda) ── */
 .critical-item-v2.warning > strong { color: #b45309; }
 .critical-item-v2.danger  > strong { color: #dc2626; }
 .critical-item-v2.success > strong { color: #15803d; }
 .critical-item-v2.info    > strong { color: #1d4ed8; }

/* ── Segmentos (como Semana/Día/Recursos/Mes): activo naranja suave ── */
.saved-view-bar-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  width: fit-content;
  max-width: 100%;
}
.saved-view-bar-v2 button {
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
}
.saved-view-bar-v2 button:hover { background: #f6f7f8; }
.saved-view-bar-v2 button.active { background: #ffedd5; color: #c2410c; font-weight: 700; box-shadow: none; border: 0; }
.saved-view-bar-v2 button b {
  margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: #fff; border: 1px solid var(--hairline-strong);
  color: var(--text-secondary); font-size: 12px;
}
.saved-view-bar-v2 button.active b { border-color: #fdba74; color: #c2410c; }

/* ── Títulos de sección: mini-etiquetas naranjas (como "Resumen operativo"; sin mayúsculas desde el 22-oct-2026) ── */
.section-header-v2, .panel-head {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 8px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-header-v2 h3, .section-header-v2 h2, .panel-head h3, .panel-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: #d9631e;
}
.section-header-v2 h3::before, .section-header-v2 h2::before,
.panel-head h3::before, .panel-head h2::before { content: none; }
.section-header-v2 .eyebrow { display: none; }
.section-header-v2 p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* ── Cabecera de MODALES ────────────────────────────────────────────────────
   La regla global `.panel-head h2` convierte los títulos en micro-etiquetas naranjas
   (pensadas para cabeceras de sección; en mayúsculas hasta el 22-oct-2026). Dentro de un modal el h2 ES el
   título del diálogo → lo devolvemos a título real. Scoped a .modal-card, así el modal
   de partes (.wo-modal, tema oscuro propio) NO se ve afectado. */
.modal-card .panel-head { align-items: flex-start; min-height: 0; padding: 22px 24px 16px; }
.modal-card .panel-head h2,
.modal-card .panel-head h3 {
  font-size: 1.45rem; font-weight: 800; text-transform: none; letter-spacing: 0;
  color: var(--ink); line-height: 1.2; margin: 2px 0 0;
}
.modal-card .panel-head h2::before,
.modal-card .panel-head h3::before { content: none; }
.modal-card .panel-head .section-kicker {
  display: block; font-size: 12px; font-weight: 800;
  text-transform: none; color: var(--muted);
}
.modal-card .panel-head > div > p { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
/* Botón de cierre del modal → icono ✕ compacto (solo botones de cierre reales, por data-action,
   para no tocar otros botones que puedan vivir en la cabecera). */
.modal-card .panel-head .btn[data-action^="close"],
.modal-card .panel-head .btn[data-action$="-cancel"],
.modal-card .panel-head .btn[data-action$="-close"] {
  flex: none; width: 36px; height: 36px; min-width: 0; padding: 0; border-radius: 10px; font-size: 0; position: relative;
}
.modal-card .panel-head .btn[data-action^="close"]::after,
.modal-card .panel-head .btn[data-action$="-cancel"]::after,
.modal-card .panel-head .btn[data-action$="-close"]::after {
  content: "✕"; font-size: 15px; line-height: 1; color: var(--muted);
  position: absolute; inset: 0; display: grid; place-items: center;
}
.modal-card .panel-head .btn[data-action^="close"]:hover::after,
.modal-card .panel-head .btn[data-action$="-cancel"]:hover::after,
.modal-card .panel-head .btn[data-action$="-close"]:hover::after { color: var(--danger, #c63726); }

/* ── Botones: compactos y planos como la agenda ── */
.btn {
  border-radius: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--hairline-strong);
  background: #fff;
  box-shadow: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.btn:hover { background: #f6f7f8; box-shadow: none; transform: none; }
.btn.primary {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
.btn.primary:hover { background: #ea580c; border-color: #ea580c; box-shadow: none; }
.btn.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.btn.danger.ghost { background-color: #fef2f2; color: var(--cr-t-danger-ink); border-color: #fecaca; }   /* #dc2626 se quedaba en 4,41:1 */
.btn.ghost { background: transparent; }

/* ── Formularios: campos limpios con foco naranja fino ── */
.field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}
.field input, .field select, .field textarea,
form input:where(:not([type="checkbox"]):not([type="radio"])), form select, form textarea {
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus,
form input:focus, form select:focus, form textarea:focus {
  /* Sin `outline: none` (22-oct-2026): esta regla pesa más que el anillo de foco común de
     coherencia.css y lo apagaba en todos los campos de formulario; la sombra al 12 % no se veía. */
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgb(249 115 22 / 12%);
}

/* ── Tablas: hairline, cabecera gris discreta, hover suave ── */
.data-table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  background: #fff;
  border-bottom: 1px solid var(--hairline-strong);
}
.data-table tbody tr:hover { background: #fafafa; }
/* `overflow: hidden` + `overflow-x: auto` deja el eje VERTICAL apagado, y las tablas con altura
   tope escondian sus filas SIN forma de llegar a ellas: en Equipos, 27.237px de tabla dentro de
   una caja de 650 — 239 de los 254 equipos eran inalcanzables. Lo mismo en Usuarios y roles.
   `auto` en los dos ejes recorta igual contra las esquinas redondeadas, que era lo que se
   buscaba con `hidden`, y devuelve el desplazamiento donde hace falta. */
.table-wrap { border: 1px solid var(--hairline); border-radius: 12px; overflow: auto; }

/* ── Modales propios: tarjeta blanca plana ── */









/* ── Menú lateral: plano, activo naranja suave ── */
.sidebar { background: #fff; border-right: 1px solid var(--hairline); }
.nav-section-title { font-size: 12px; font-weight: 800; text-transform: none; color: var(--text-muted); }
.nav-section-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 10px; color: var(--text-muted); text-align: left; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.nav-section-link > b { font-size: 16px; line-height: 1; font-weight: 500; opacity: .55; }
.nav-section-link:hover, .nav-section-link:focus-visible { color: #c2410c; background: #fff6ef; outline: 0; }
.nav-section-link.active { color: #c2410c; background: #ffedd5; }
.nav-section-items { display: grid; gap: 1px; padding: 2px 0 3px; }
.nav-section-items[hidden] { display: none; }
.nav-item { border-radius: 10px; font-weight: 600; }
.nav-item:hover { background: #f6f7f8; }
.nav-item.active { background: #ffedd5; border: 0; color: #c2410c; font-weight: 700; }
.sidebar-user-card, .sync-mini { border: 1px solid var(--hairline); border-radius: 12px; background: #fff; }

/* ── Topbar: barra plana con borde fino (como la de la agenda) ── */
.command-topbar {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.command-topbar button { border-radius: 10px; font-weight: 600; }

/* ── Centro de mando y heros a medida → plano compacto ── */
.system-vision-metric {
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  padding: 7px 12px;
}
.system-vision-metric > strong { font-size: 16px; font-weight: 800; }
.system-vision-metric > span { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
/* Heros CLAROS de página (office/command/sync). EXCLUIMOS el hero del MODAL de parte
   (.detail-hero.wo-hero): es de tema oscuro y este bloque lo forzaba a blanco ‹important›
   con texto var(--text-primary) que dentro del modal es CLARO → texto claro sobre blanco,
   ilegible ("la cabecera clara no se ve", 4-jul-2026). */
.office-hero, .command-hero, .sync-hero, .detail-hero:not(.wo-hero) {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  color: var(--text-primary);
}
.office-hero p, .command-hero p, .sync-hero p, .detail-hero:not(.wo-hero) p { color: var(--text-secondary); opacity: 1; }
.office-hero h1, .office-hero h2, .command-hero h1, .command-hero h2, .sync-hero h2, .detail-hero:not(.wo-hero) h2 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.office-hero .eyebrow, .command-hero .eyebrow, .sync-hero .eyebrow, .detail-hero:not(.wo-hero) .eyebrow {
  color: var(--cr-orange-ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
   /* era #d9631e: 3,65:1 */
}

/* ── Papeleras/avisos/scroll ── */
details.customer-trash, details.workorder-trash { border: 1px solid var(--hairline); border-radius: 12px; background: #fff; padding: 10px 14px; }
.notice { border: 1px solid #86efac; border-radius: 10px; background: #f0fdf4; font-weight: 600; }
.error { border: 1px solid #fca5a5; border-radius: 10px; background: #fef2f2; font-weight: 600; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(17 24 39 / 14%); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Arquitectura agenda: lienzo + COLUMNA DERECHA (Resumen operativo / Acciones rápidas) ── */
.workorders-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) { .workorders-overview-grid { grid-template-columns: 1fr; } }
.agenda-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rail-card { padding: 14px 16px; }
.rail-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: #d9631e;
}
.rail-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  text-align: left;
  font: inherit;
}
.rail-metric:last-child { border-bottom: 0; }
button.rail-metric { cursor: pointer; }
button.rail-metric:hover span { color: var(--text-primary); }
.rail-metric span { font-size: 12.5px; color: var(--text-secondary); }
.rail-metric strong { font-size: 18px; font-weight: 800; }
.rail-metric strong.warning { color: #b45309; }
.rail-metric strong.danger { color: #dc2626; }
.rail-metric strong.success { color: #15803d; }
.rail-metric strong.info { color: #1d4ed8; }
.rail-actions { display: flex; flex-direction: column; gap: 8px; }
.rail-actions .btn { width: 100%; justify-content: center; }
.workorders-analytics-collapsed { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 10px; }

/* ── Shell con columna derecha automática: TODAS las vistas con anatomía agenda ── */
.command-module.has-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.command-module.has-rail > .module-canvas { min-width: 0; }
.command-module.has-rail > .module-rail { position: sticky; top: 12px; }
@media (max-width: 1150px) {
  .command-module.has-rail { grid-template-columns: 1fr; }
  .command-module.has-rail > .module-rail { position: static; }
}

/* ── Centro de mando: anatomía agenda (lienzo + columna derecha propia) ── */
.ops-control-tower.has-rail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.ops-control-tower.has-rail-layout > .module-canvas {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ops-control-tower.has-rail-layout > .module-rail { position: sticky; top: 12px; }
@media (max-width: 1150px) {
  .ops-control-tower.has-rail-layout { grid-template-columns: 1fr; }
  .ops-control-tower.has-rail-layout > .module-rail { position: static; }
}

/* ── Pulido post-rail (de las capturas de producción) ── */
/* 1) Con columna derecha, la fila de chips duplica pestañas+columna → fuera del lienzo */

/* ── Sistema de vistas ERPY · misma anatomía que Facturas de proveedor ───────────────────────
   Una pantalla útil siempre responde en este orden: dónde estoy, qué requiere decisión, filtros
   y registro. Esta capa unifica las vistas históricas sin reescribir ni cambiar sus flujos. */
.command-module {
  --view-surface: linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
  --view-line: rgba(20,22,26,.09);
  --view-shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 22px 52px -34px rgba(20,26,40,.34);
}
.command-module > :is(.panel, .section-panel, .entity-list-panel, .entity-detail-panel),
.command-module > .module-canvas > :is(.panel, .section-panel, .entity-list-panel, .entity-detail-panel) {
  border-color: var(--view-line);
  background: var(--view-surface);
  box-shadow: var(--view-shadow);
}
.command-module :is(.billing-kpi-grid, .workcenter-kpi-strip, .decision-list-v2) > * {
  min-width: 0;
}

/* IA financiera: mismos paneles-resumen que Facturación, pero sin ser botones. */
.financial-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 14px;
}
.financial-kpi-grid > .financial-kpi {
  min-height: 126px;
  cursor: default;
  justify-content: center;
}
.financial-kpi-grid > .financial-kpi:hover {
  transform: none;
  box-shadow: var(--soft-shadow);
}
.financial-monitor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.financial-monitor-meta > div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--view-line);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
}
.financial-monitor-meta span,
.financial-monitor-history { color: var(--text-muted); font-size: 12px; }
.financial-monitor-meta strong { color: var(--ink); font-size: 13px; }
.financial-monitor-history { display: grid; gap: 4px; margin-top: 12px; }

/* El panel de la IA financiera tenia `padding: 0` con `overflow: hidden`, y la ultima linea de
   «Ultimas revisiones» quedaba a UN pixel del borde: las colas de las g, j, p e y se las comia el
   borde redondeado (lo vio Ruben, 28-ago). El panel lleva su relleno, como todos los demas. */
.panel.financial-monitor { padding: 18px 20px; }
.financial-monitor-history strong { color: var(--ink); }
@media (max-width: 1080px) {
  .financial-kpi-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .financial-monitor-meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .financial-kpi-grid { grid-template-columns: 1fr; }
}
.command-module .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(250,250,251,.97);
  box-shadow: 0 1px 0 var(--view-line);
}
.command-module .data-table tbody tr[data-action],
.command-module .data-table tbody tr[data-action] td {
  cursor: pointer;
}
.command-module .data-table tbody tr[data-action]:hover td {
  background: rgba(255,90,0,.045);
}
.command-module .empty,
.command-module .empty-state {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(20,22,26,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.5);
}
.command-module .row-actions { gap: 8px; }
.command-module :is(button, input, select, textarea, a.btn):focus-visible {
  outline: 3px solid rgba(255,90,0,.35);
  outline-offset: 2px;
}
/* Finanzas, fiscal y laboral comparten una rail útil: dejar contexto y accesos a mano evita
   que el usuario pierda el hilo al abrir diario, modelos o nóminas. */
.command-module[data-view="accounting"] .module-rail,
.command-module[data-view="labor"] .module-rail,
.command-module[data-view="financialAdvisor"] .module-rail,
.command-module[data-view="vatBooks"] .module-rail,
.command-module[data-view="treasury"] .module-rail,
.command-module[data-view="supplierInvoices"] .module-rail,
.command-module[data-view="purchaseDeliveryNotes"] .module-rail {
  border-color: rgba(255,90,0,.16);
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,246,240,.78));
  box-shadow: var(--view-shadow);
}
@media (max-width: 760px) {
  .command-module { gap: 10px; }
  .command-module .section-header-v2,
  .command-module .panel-head { align-items: flex-start; flex-direction: column; }
  .command-module .section-header-v2 .row-actions,
  .command-module .panel-head .row-actions { width: 100%; }
  .command-module .section-header-v2 .row-actions .btn,
  .command-module .panel-head .row-actions .btn { flex: 1 1 auto; }
  .command-module .data-table { min-width: 680px; }
  .command-module .empty,
  .command-module .empty-state { min-height: 120px; }
}

/* 2) Maestro-detalle sin detalle seleccionado: el panel maestro ocupa el ancho útil */
.entity-master-detail > :only-child { grid-column: 1 / -1; max-width: 980px; }

/* 3) Desplegables: afordancia clara (chevron + contador visible + hover) */
.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-summary::after {
  content: "▸";
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.12s ease;
}
details[open] > .collapsible-summary::after { transform: rotate(90deg); }
.collapsible-summary:hover { background: #fafafa; border-radius: 12px; }
.collapsible-summary h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: var(--cr-orange-ink);   /* era #d9631e: 3,65:1 sobre blanco; el rotulo del sistema da 5,16 */
}

/* ── tramo 28-pulido-y-look-saas (líneas 19495-19841 del antiguo styles.css): Pulido 3 y look «Partes SaaS»: tablas, labels, KPI con icono, pestañas con contador, banner de actualización ── */
/* ============================================================
   PULIDO 3 (capturas 2-jul tarde): tablas legibles, formularios
   apilados, botones compactos, gráfico plano, auditoría
   ============================================================ */

/* 1) Tablas: nunca partir palabras ni importes; scroll horizontal antes que aplastar */
.data-table th { white-space: nowrap; }
.data-table td { overflow-wrap: break-word; word-break: normal; }
.status-pill,
.pill,
.data-table .btn,
.row-actions .btn { white-space: nowrap; }
.equipment-workbench-table { min-width: 1080px; }
.data-table td strong { overflow-wrap: normal; }

/* 2) Labels sueltos (<label>Texto<control>) → campo apilado estilo agenda.
      No afecta a checkboxes/radios ni a .field (ahí el control es hermano, no hijo). */
label:where(:not(.checkline):not(.check-row):not(.checkbox-row):not(.range-select):has(> select)),
label:where(:not(.checkline):not(.check-row):not(.checkbox-row):not(.range-select):has(> textarea)),
label:where(:not(.checkline):not(.check-row):not(.checkbox-row):not(.range-select):has(> input:not([type="checkbox"]):not([type="radio"]))) {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
label:not(.range-select) > select,
label:not(.range-select) > textarea,
label:not(.range-select) > input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 3) Botones de formulario compactos (no barras naranjas a todo el ancho) */
.form-grid > .btn,
.field > .btn { justify-self: start; }

/* 4) Checkbox de opción con texto largo (p. ej. "Albarán valorado") alineado */
.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.checkline input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #f97316;
}

/* 5) Filas de material del albarán: 5 campos = 5 columnas (Series ya no baila) */
.delivery-notes-panel .form-line-row {
  grid-template-columns: minmax(150px, 1.25fr) minmax(76px, 0.45fr) minmax(150px, 1fr) minmax(104px, 0.55fr) minmax(110px, 0.65fr);
  align-items: start;
  border-bottom: 0;
  padding: 8px 0;
}
@media (max-width: 980px) {
  .delivery-notes-panel .form-line-row { grid-template-columns: 1fr 1fr; }
}

/* 6) Mini-gráfico de barras plano (sin montículos degradados) */
.mini-bars {
  grid-template-columns: repeat(auto-fit, minmax(48px, 84px));
  justify-content: start;
  gap: 14px;
}
.mini-bar-track {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #f6f7f8;
  padding: 3px;
}
.mini-bar-track i {
  border-radius: 5px;
  background: #f97316;
  box-shadow: none;
}

/* 7) Cabecera del gestor de tarifas al tamaño de título de vista */
.tariff-page-header h2 { font-size: 20px; font-weight: 800; }

/* 8) Detalle de auditoría: texto secundario legible, sin JSON crudo desbordado */
.audit-detail {
  max-width: 460px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ============================================================
   LOOK "PARTES SAAS" (maqueta 2-jul): tarjetas KPI con icono,
   pestañas con badge, tablas aireadas, avatares, panel
   seleccionado en columna. Aplica a los primitivos globales.
   ============================================================ */

/* Tarjetas KPI con icono tonal */
/* El contenedor de medida: la banda se adapta al hueco QUE TIENE, no al ancho de la pantalla. */
.module-canvas { container-type: inline-size; }

/* Aire entre los bloques de una seccion. Sin esto se tocan borde con borde y se leen como
   tarjetas encima de otras. */
.module-canvas > * + * { margin-top: 16px; }

.kpi-strip-v3,
.billing-kpi-grid,
.kpi-cta-strip,
.equipment-kpi-grid,
.labor-kpi-grid,
.customer-command-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

/* Reparto sin huerfanas, por CANTIDAD de tarjetas. Se lee: «si la ultima es la cuarta, son cuatro».
   `:where(:has(...))` y no `:has(...)` a secas, y la diferencia era un fallo real: `:has()` APORTA
   la especificidad de lo que lleva dentro, asi que esta regla valia (0,3,0) y la de «≤460px, una
   columna» solo (0,1,0). Resultado: en Cobros, con sus cuatro tarjetas, ganaba esta hasta en una
   pantalla de 492px y la banda se salia 8px. `:where()` no aporta especificidad, asi que las tres
   consultas valen lo mismo y decide el ORDEN — que es como estan escritas: de ancha a estrecha. */
@container (max-width: 1040px) {
  :is(.kpi-strip-v3, .billing-kpi-grid, .kpi-cta-strip, .equipment-kpi-grid, .labor-kpi-grid, .customer-command-metrics):where(:has(> :nth-child(4):last-child)) { grid-template-columns: repeat(2, 1fr); }
  :is(.kpi-strip-v3, .billing-kpi-grid, .kpi-cta-strip, .equipment-kpi-grid, .labor-kpi-grid, .customer-command-metrics):where(:has(> :nth-child(5):last-child)) { grid-template-columns: repeat(3, 1fr); }
}

@container (max-width: 700px) {
  :is(.kpi-strip-v3, .billing-kpi-grid, .kpi-cta-strip, .equipment-kpi-grid, .labor-kpi-grid, .customer-command-metrics):where(:has(> :nth-child(5):last-child)) { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 460px) {
  :is(.kpi-strip-v3, .billing-kpi-grid, .kpi-cta-strip, .equipment-kpi-grid, .labor-kpi-grid, .customer-command-metrics) { grid-template-columns: 1fr; }
}
.kpi-card-v3 {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px 18px;
  text-align: left;
  background-image: var(--cr-kpi-wash);
  border: 1px solid var(--hairline);
  border-radius: 22px;   /* el radio de la tarjeta KPI del sistema */
  box-shadow: var(--cr-lift-card);
  font: inherit;
  cursor: default;
}
button.kpi-card-v3 { cursor: pointer; }
button.kpi-card-v3:hover { border-color: #fdba74; }
.kpi-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;   /* el chip de icono del sistema */
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-body { display: grid; gap: 2px; min-width: 0; }
.kpi-label { color: rgba(20,22,26,0.72); font-size: 12px; font-weight: 750; text-transform: none; }
.kpi-value { color: #111827; font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; font-weight: 700; }
.kpi-card-v3.tone-warning .kpi-icon { background: #fff3e6; color: #a33800; }
.kpi-card-v3.tone-warning .kpi-sub { color: #a33800; }  /* era #ea580c: 3,02:1 */
.kpi-card-v3.tone-violet .kpi-icon { background: #f1edff; color: #3d2a92; }
.kpi-card-v3.tone-violet .kpi-sub { color: #3d2a92; }
.kpi-card-v3.tone-amber .kpi-icon { background: #fff8e1; color: #a33800; }
.kpi-card-v3.tone-amber .kpi-sub { color: #a33800; }
.kpi-card-v3.tone-success .kpi-icon { background: #e8f7ee; color: #05532f; }
.kpi-card-v3.tone-success .kpi-sub { color: #05532f; }  /* era #178a4c: 4,0:1 */
.kpi-card-v3.tone-info .kpi-icon { background: #e8f1fd; color: #26438f; }
.kpi-card-v3.tone-info .kpi-sub { color: #26438f; }  /* era #2563eb: 4,3:1 */

/* Pestañas con badge de contador (todas las vistas). Sin alto fijo: se dimensiona por
   contenido (padding + line-height) para que cifras de 2-3 dígitos como "147" no se salgan. */
.saved-view-bar-v2 button b {
  min-width: 22px;
  height: auto;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.saved-view-bar-v2 button.active b { background: #c2410c; color: #ffffff; border: 0; }

/* Tablas aireadas y con jerarquía (todas las vistas) */
.data-table thead th {
  background: #f8fafc;
  font-size: 12px;
  text-transform: none;
  color: #6b7280;
}
.data-table td { padding: 13px 16px; vertical-align: middle; }
.data-table tbody tr:hover { background: #fafbfc; }
.data-table td strong { font-weight: 800; color: #111827; }
.data-table td small,
.data-table td .muted { font-size: 12px; }

/* Avatar de persona (técnicos en tablas y columnas) */
.person-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-chip .avatar-dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffedd5;
  color: #c2410c;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

/* Panel "seleccionado" de la columna */
.rail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-card-head .muted { font-size: 12px; }
.workorder-selected-card { display: grid; gap: 8px; }
.workorder-selected-card .selected-number { font-size: 20px; font-weight: 800; color: #111827; }
.workorder-selected-card .selected-subline { color: #6b7280; font-size: 13px; font-weight: 600; }
.workorder-selected-card .selected-meta { display: grid; gap: 6px; padding: 4px 0; }
.workorder-selected-card .selected-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-subtitle {
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: #9ca3af;
  margin-top: 4px;
}
.rail-actions-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rail-actions-split .btn { width: 100%; justify-content: center; }

/* Lista "Acción inmediata" (tarjetas tonales clicables) */
.action-now-list { display: grid; gap: 10px; }
.action-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.action-now span { display: grid; gap: 2px; min-width: 0; }
.action-now strong { font-size: 13.5px; font-weight: 800; color: #111827; }
.action-now small { color: #6b7280; font-size: 12px; font-weight: 600; }
.action-now b { font-size: 22px; font-weight: 800; }
.action-now.danger { background: #fff5f4; border-color: #ffd3cd; }
.action-now.danger b { color: #e11d48; }
.action-now.warning { background: #fff9f0; border-color: #ffe3c2; }
.action-now.warning b { color: #ea580c; }
.action-now.info b { color: #2563eb; }
.action-now:hover { border-color: #fdba74; }

/* KPIs existentes (equipos, tarifas…) alineados al mismo lenguaje */
.tariff-kpi-card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
}
.tariff-kpi-card strong { font-size: 24px; font-weight: 800; color: #111827; }
.tariff-kpi-card span { color: #6b7280; font-size: 12.5px; font-weight: 700; }

/* ── Vuelta profunda global (maqueta SaaS en todas las vistas) ── */

/* Estado vacío del strip de KPIs */
.kpi-strip-v3.clean { display: flex; align-items: center; }

/* Métricas de columna como tarjetas tonales ("Acción inmediata" de la maqueta) */
.rail-metric {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: #ffffff;
}
.rail-metric:last-child { border-bottom: 1px solid var(--hairline); margin-bottom: 0; }
.rail-metric strong { font-size: 20px; }
.rail-metric:has(> strong.danger) { background: #fff5f4; border-color: #ffd3cd; }
.rail-metric:has(> strong.warning) { background: #fff9f0; border-color: #ffe3c2; }
.rail-metric:has(> strong.success) { background: #f2fbf5; border-color: #cdeedd; }
button.rail-metric:hover { border-color: #fdba74; }

/* Banner de autoactualización (aparece cuando hay build nuevo en el servidor) */
.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  /* Iba a 9999 y `.wo-save-bar` a 10000, asi que con un parte abierto y cambios sin guardar el
     banner quedaba DEBAJO: el aviso que sirve para que lleguen los arreglos era el unico que no se
     podia pulsar. Este banner tiene que estar por encima de todo, sin excepcion. El numero sigue
     siendo magico, como los otros 31 del fichero; la escala con nombre llega en la Fase 1. */
  z-index: 10010;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #111827;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.35);
}
.app-update-banner button {
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  /* EL NARANJA ACCESIBLE, no el de marca. Blanco sobre #f97316 da 2,8:1 y hace falta 4,5. Medido
     en las 31 secciones: era el UNICO fallo de contraste que quedaba en todo el ERP, y salia en
     todas porque este banner es global — 104 apariciones del mismo boton.
     Es ademas el peor sitio posible para no leerse: es el aviso que sirve para que lleguen los
     arreglos. Si no se lee, no se pulsa, y el usuario se queda con la version vieja.
     #c05600 da 4,59:1 y es el mismo tono de accion que el resto del sistema. */
  background: #c05600;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
/* Al pasar por encima se OSCURECE (6,05:1). Antes aclaraba a #ea580c, que baja a 3,56:1: el
   contraste empeoraba justo cuando el raton esta encima y el usuario va a pulsar. */
.app-update-banner button:hover { background: #a14900; }
}

@layer utilidades {
  .page-intro-v2 .page-intro-copy p { color: var(--text-secondary); }
  .office-hero, .command-hero, .sync-hero, .detail-hero:not(.wo-hero) { border: 1px solid var(--hairline); border-radius: 14px; background: #fff; box-shadow: none; }
  .office-hero p, .command-hero p, .sync-hero p, .detail-hero:not(.wo-hero) p { color: var(--text-secondary); opacity: 1; }
  .office-hero h1, .office-hero h2, .command-hero h1, .command-hero h2, .sync-hero h2, .detail-hero:not(.wo-hero) h2 { color: var(--text-primary); }
  .office-hero .eyebrow, .command-hero .eyebrow, .sync-hero .eyebrow, .detail-hero:not(.wo-hero) .eyebrow { color: var(--cr-orange-ink); }
}