@layer legado {
/* estilos/03-vision-fichas-cliente-e-inicio.css · fichero 3/11 de la hoja HEREDADA (líneas 6644-9382 del antiguo styles.css).
   Visión del sistema, fichas y fusión de clientes, inicio y portadas. Tramos internos, en este orden:
     · 10-vision-sistema (6644-7354): Visión del sistema (piloto) y sus responsive
     · 11-fichas-y-fusion-clientes (7355-8642): Rejilla y ficha de cliente, diálogo de líneas de factura, fusión de clientes, editor de cliente, guardia de subcontrata, tablero de revisión
     · 12-inicio-y-portadas (8643-9382): Workcenter/inicio por rol, resumen ERPY, portadas de departamento, heros, dashboard, filas de mando, radar de negocio
   El orden ES la cascada: va tras 02-presupuestos-y-clientes.css y antes de 04-agenda-y-capa-industrial.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 10-vision-sistema (líneas 6644-7354 del antiguo styles.css): Visión del sistema (piloto) y sus responsive ── */
.system-vision-pilot {
  display: grid;
  gap: 20px;
  color: #0f172a;
}






















.system-vision-metric {
  min-height: 102px;
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  color: #0f172a;
  background: linear-gradient(180deg, #fff, #f8fafc);
  text-align: left;
}

button.system-vision-metric {
  cursor: pointer;
}

.system-vision-metric:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgb(15 23 42 / 8%);
}

.system-vision-metric strong {
  color: #0b1220;
  font-size: clamp(22px, calc(1vw * 1.8), 32px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.system-vision-metric span {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.12;
}

.system-vision-metric small {
  color: #64748b;
  font-size: 12px;
  font-weight: 780;
}

.system-vision-metric.danger {
  background: linear-gradient(180deg, #fff, #fff1f2);
}

.system-vision-metric.success {
  background: linear-gradient(180deg, #fff, #ecfdf5);
}

.system-vision-metric.info {
  background: linear-gradient(180deg, #fff, #eff6ff);
}

.system-vision-metric.warning {
  background: linear-gradient(180deg, #fff, #fff7ed);
}

.system-vision-metric.purple {
  background: linear-gradient(180deg, #fff, #f5f3ff);
}

.system-vision-metric.money {
  background: linear-gradient(180deg, #fff, #f8fafc);
}






















.system-vision-mini-list {
  display: grid;
  gap: 8px;
}

.system-vision-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  color: #111827;
  background: #fff;
  text-align: left;
}

button.system-vision-status-row {
  cursor: pointer;
}

.system-vision-status-row strong,
.system-vision-profile strong {
  display: block;
  min-width: 0;
  color: #111827;
  font-size: 12px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.system-vision-status-row small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.system-vision-status-row em {
  border-radius: 999px;
  padding: 5px 8px;
  color: #166534;
  background: #dcfce7;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.system-vision-status-row em.warning {
  color: #9a3412;
  background: #ffedd5;
}

.system-vision-status-row em.info {
  color: #1d4ed8;
  background: #dbeafe;
}

.system-vision-status-row b {
  grid-column: 2;
  color: #ea580c;
  font-size: 12px;
  font-weight: 950;
}

.system-vision-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px;
  color: #64748b;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 850;
}






















@media (max-width: 1700px) {


}

@media (max-width: 1180px) {




}

@media (max-width: 760px) {








}

/* ── tramo 11-fichas-y-fusion-clientes (líneas 7355-8642 del antiguo styles.css): Rejilla y ficha de cliente, diálogo de líneas de factura, fusión de clientes, editor de cliente, guardia de subcontrata, tablero de revisión ── */

















.compact-action {
  min-height: 34px;
  white-space: nowrap;
}

.entity-detail-panel {
  position: sticky;
  top: 92px;
}









.list-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 18px 18px;
}

.list-footer-actions .muted {
  margin-right: auto;
}

.detail-hero.compact {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px 20px 16px;
}

.detail-hero.compact h2 {
  margin: 4px 0 2px;
}

.compact-relations {
  margin-top: 16px;
}

.compact-relations .empty.compact {
  min-height: 0;
  padding: 10px 12px;
}

.action-list .action-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.customer-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  border-bottom: 0;
  background: transparent;
  margin: 0 20px 8px;
}

.customer-summary-grid > div {
  min-height: 74px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgb(255 255 255 / 72%);
}


.customer-fiscal-ai-section {
  margin: 0 20px 16px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(255 247 238 / 80%)),
    radial-gradient(circle at 100% 0, rgb(228 103 1 / 10%), transparent 32%);
  border: 1px solid rgb(226 216 204 / 92%);
}

.customer-fiscal-ai-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.customer-fiscal-ai-head h3 {
  margin-bottom: 4px;
}

.customer-fiscal-ai-meta,
.customer-fiscal-ai-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.customer-fiscal-ai-meta span,
.customer-fiscal-ai-warnings span,
.customer-fiscal-ai-empty {
  border: 1px solid rgb(226 216 204 / 86%);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
}

.customer-fiscal-ai-warnings span {
  border-color: rgb(245 143 32 / 24%);
  color: #925315;
}

.customer-fiscal-ai-empty {
  border-radius: 14px;
  display: inline-block;
  margin-top: 12px;
}

.customer-fiscal-ai-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 14px;
}

.customer-fiscal-ai-grid > div {
  border: 1px solid rgb(226 216 204 / 86%);
  border-radius: 14px;
  background: rgb(255 255 255 / 74%);
  padding: 12px;
}

.customer-fiscal-ai-grid span,
.customer-fiscal-ai-sources strong {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.customer-fiscal-ai-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.customer-fiscal-ai-sources {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.customer-fiscal-ai-sources a,
.customer-fiscal-ai-sources span {
  color: var(--typy-text);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.customer-fiscal-ai-section .row-actions {
  margin-top: 14px;
}



.customer-editor-overlay {
  z-index: 1300;
  align-content: center;
  align-items: center;
  overflow: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}

.customer-editor-dialog {
  width: min(1200px, calc(1vw * 94));
  max-height: calc(calc(1vh * 100) - 48px);
  overflow: auto;
  min-width: 0;
  max-width: calc(calc(1vw * 100) - 48px);
  padding: 0;
}






.invoice-lines-dialog {
  width: min(1200px, calc(1vw * 94));
  max-height: calc(calc(1vh * 100) - 48px);
  overflow: auto;
  padding: 0;
}

.invoice-lines-editor-body {
  display: grid;
  gap: 8px;
  padding: 18px 24px;
}

.invoice-line-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 64px 130px 150px 40px;
  gap: 8px;
  align-items: center;
}

.invoice-line-editor-head span {
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: var(--muted);
}

.invoice-line-editor-row input,
.invoice-line-editor-row select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 0.92rem;
  min-width: 0;
}

.invoice-line-editor-row input[data-line-field="quantity"],
.invoice-line-editor-row input[data-line-field="unitPrice"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.invoice-line-remove {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 13px;
}

.invoice-lines-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.invoice-lines-base {
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .invoice-line-editor-head { display: none; }
  .invoice-line-editor-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
  }
  .invoice-line-editor-row input[data-line-field="description"] { grid-column: 1 / -1; }
}

/* La tarjeta NO scrollea: es una rejilla cabecera / cuerpo / pie. El cuerpo es lo único que se
   desplaza, así el pie siempre está entero y a la vista (antes el pie iba al final de un
   contenedor con overflow y las esquinas redondeadas le comían el botón "Cancelar"). */
/* `.modal-card` se declara más abajo con width/max-height/overflow propios: hace falta doble
   clase para que este layout gane sin depender del orden del fichero. */








/* Mismo botón de cerrar que el resto de modales del sistema. */
.cm-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.cm-close:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: transparent;
  color: #fff;
  transform: rotate(90deg);
}

.customer-merge-body {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 22px 28px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cm-step {
  display: grid;
  gap: 14px;
  align-content: start;
}

.cm-step + .cm-step {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.cm-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cm-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cm-step-title > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--brand-soft, rgba(255, 122, 26, 0.16));
  color: var(--typy-copper-dark, #ff944f);
  font-size: 0.8rem;
  font-weight: 800;
}

.cm-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cm-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
}

.cm-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1.5px solid var(--border-soft);
  border-radius: 18px;
  padding: 18px 20px;
  background: var(--panel, rgba(255, 255, 255, 0.045));
  min-width: 0;
}

.cm-card.keep {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.09);
}

.cm-card.absorb {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.08);
}

/* El desplegable ES el nombre del cliente: se elige quién sobrevive desde la propia tarjeta.
   Lleva su flecha dibujada para que se vea que es elegible y no una simple etiqueta. */
.cm-pick {
  width: 100%;
  min-width: 0;
  padding: 9px 34px 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.16));
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.25;
  cursor: pointer;
}

.cm-pick:hover {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.28);
}

/* La regla de `option` vive ahora al final del fichero, global y para toda la app: esta era la
   unica que existia y solo cubria este selector. */

.cm-swap {
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.16));
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cm-swap:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Elección campo a campo ─────────────────────────────────────────────── */
.cm-fields {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
}

.cm-field-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1px;
  background: var(--line);
}

.cm-field-row + .cm-field-row {
  margin-top: 1px;
}

.cm-field-head > span {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: var(--muted);
}

.cm-field-group {
  padding: 11px 14px 7px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  color: var(--typy-copper-dark, #ff944f);
}

.cm-field-name {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.cm-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  background: var(--panel-solid, #161b2b);
  font-size: 0.92rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.14s ease;
  min-width: 0;
}

.cm-choice:hover {
  background: rgba(255, 255, 255, 0.07);
}

.cm-choice input {
  flex: none;
  margin-top: 2px;
  accent-color: var(--typy-copper-dark, #ff944f);
}

.cm-choice > span {
  min-width: 0;
  word-break: break-word;
  color: var(--muted);
}

.cm-choice > span.is-empty {
  font-style: italic;
  opacity: 0.55;
}

.cm-choice:has(input:checked) {
  background: rgba(255, 122, 26, 0.14);
}

.cm-choice:has(input:checked) > span {
  color: var(--ink);
  font-weight: 700;
}

.cm-choice-target:has(input:checked) {
  background: rgba(34, 197, 94, 0.16);
}

.cm-hint {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Documentos ─────────────────────────────────────────────────────────── */
.cm-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, 0.045));
  cursor: pointer;
}

.cm-toggle input {
  flex: none;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--typy-copper-dark, #ff944f);
}

.cm-toggle > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cm-toggle strong {
  font-size: 0.95rem;
  color: var(--ink);
}

.cm-toggle small {
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.cm-locked {
  margin: 0;
  padding: 13px 16px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.1);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--muted);
}

.cm-locked strong {
  color: var(--ink);
}

/* Casilla con explicación debajo (ficha de cliente: "exige nº de pedido"…). */
.check-field {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--panel, rgba(255, 255, 255, 0.045));
  cursor: pointer;
}

.check-field input[type="checkbox"] {
  flex: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--typy-copper-dark, #ff944f);
}

.check-field > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.check-field strong {
  font-size: 0.94rem;
  color: var(--ink);
}

.check-field small {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

/* El pie es una fila fija de la rejilla: nunca lo recorta la tarjeta. */


.cm-role {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: none;
}

.cm-card.keep .cm-role {
  color: #4ade80;
}

.cm-card.absorb .cm-role {
  color: #fbbf24;
}

.cm-fiscal {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 700;
}

.cm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.cm-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.cm-stat b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.cm-stat span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.cm-stat.has {
  background: rgba(255, 255, 255, 0.12);
}

.cm-stat.has b {
  color: var(--ink);
}

.cm-arrow {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  color: var(--muted);
  font-weight: 800;
}

.cm-arrow > span {
  font-size: 1.5rem;
  line-height: 1;
}

.cm-arrow small {
  font-size: 12px;
  text-transform: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .cm-compare {
    grid-template-columns: 1fr;
  }
  .cm-arrow {
    grid-auto-flow: column;
    gap: 10px;
    padding: 2px 0;
  }
  .cm-arrow > span {
    transform: rotate(90deg);
  }
  .cm-field-row {
    grid-template-columns: 1fr;
    row-gap: var(--ty-e-2); /* apiladas, las dos opciones con aire (29-oct-2026) */
  }
  .cm-field-head {
    display: none;
  }
  .cm-field-name {
    padding-bottom: 4px;
  }
}



.customer-editor-overlay[data-dialog-overlay="quote-import-editor"] {
  z-index: 1400;
  align-content: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
}























































.customer-editor-dialog .customer-editor-panel {
  margin: 0;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  background: transparent;
}

.customer-editor-dialog .customer-editor-panel > .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgb(252 248 242 / 98%), rgb(252 248 242 / 92%));
  backdrop-filter: blur(12px);
}

.customer-editor-dialog .customer-editor-panel > .panel-head,
.customer-editor-dialog .customer-editor-panel > .readiness-banner,
.customer-editor-dialog .customer-editor-panel > .form-grid {
  margin-left: 0;
  margin-right: 0;
}

.customer-editor-dialog .customer-editor-panel > .form-grid {
  padding: 0 18px 20px;
}

.subcontractor-guard-panel {
  margin-top: 14px;
  border: 1px dashed rgb(201 95 42 / 28%);
  background: linear-gradient(180deg, rgb(255 248 241 / 92%), rgb(255 255 255 / 92%));
}

.subcontractor-guard-panel p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-weight: 760;
  line-height: 1.38;
}

.subcontractor-guard-panel .row-actions {
  margin-top: 12px;
}

.compact-section h3 {
  margin-bottom: 12px;
}

.review-board {
  display: grid;
  gap: 12px;
}

.review-row {
  align-items: center;
  gap: 16px;
}

.action-row .row-actions,
.document-row .row-actions,
.review-row .row-actions {
  flex-wrap: nowrap;
}

@media (max-width: 980px) {
  .entity-master-detail {
    grid-template-columns: 1fr;
  }


  .review-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .review-check-grid {
    grid-template-columns: 1fr;
  }

  .review-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .content,
  .topbar {
    padding: 18px;
  }

  .content {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  .section-title {
    align-items: stretch;
    flex-direction: column;
    padding-left: 14px;
  }

  .section-title::before {
    top: 6px;
    height: 36px;
  }

  .toolbar,
  .row-actions,
  .form-actions,
  .panel-head {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .toolbar > *,
  .row-actions .btn,
  .form-actions .btn {
    flex: 1 1 100%;
  }

  .metrics,
  .grid-two,
  .sync-grid,
  .action-grid,
  .form-two,
  .form-three,
  .pdf-command-grid,
  .quote-line-grid,
  .quote-billing-layout,
  .quote-summary-box,
  .sync-count-grid,
  .sync-map,
  .entity-master-detail,
  .workorder-detail-grid {
    grid-template-columns: 1fr;
  }

  .quote-milestone-row {
    grid-template-columns: 1fr 90px;
  }

  .detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-hero,
  .sync-hero,
  .form-hero,
  .detail-hero,
  .drawer,
  .panel,
  .metric,
  .modal-card {
    min-width: 0;
  }

  .detail-hero,
  .modal-card {
    padding: 18px;
  }

  .workorder-flow-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }

  .flow-step {
    flex: 0 0 auto;
  }

  .command-bar {
    width: 100%;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .command-bar .btn {
    flex: 1 1 100%;
  }

  .workorder-card-head,
  .detail-hero {
    align-items: flex-start;
  }

  .mobile-tabbar {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .data-table {
    min-width: 640px;
  }

  .modal-overlay {
    align-items: start;
    align-content: start;
    padding: 14px;
  }

  .modal-card {
    width: 100%;
    max-height: calc(calc(1vh * 100) - 28px);
    overflow: auto;
    border-radius: 22px;
  }

  .list-row,
  .workorder-card,
  .detail-row,
  .detail-summary strong,
  .detail-summary span,
  .panel-head h3,
  .workorder-card-head strong,
  .workorder-card-client,
  .status-pill,
  .pill,
  .topbar-title,
  .command-hero h2,
  .sync-hero h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .content,
  .topbar {
    padding: 14px;
  }

  .section-title {
    gap: 12px;
    margin-bottom: 16px;
    padding-left: 12px;
  }

  .section-title::before {
    width: 5px;
    height: 32px;
  }

  .detail-summary,
  .metrics,
  .review-check-grid,
  .quote-summary-box,
  .sync-count-grid,
  .sync-map {
    grid-template-columns: 1fr;
  }

  .metric {
    min-height: 96px;
    padding: 14px;
  }

  .metric strong {
    font-size: 26px;
  }

  .panel-head,
  .list-row,
  .workorder-card,
  .detail-hero,
  .drawer,
  .panel,
  .modal-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .detail-hero h2,
  .command-hero h2,
  .sync-hero h2 {
    font-size: 24px;
  }

  .btn {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
  }

  .mobile-tabbar button {
    min-width: 64px;
    min-height: 52px;
    font-size: 12px;
  }

  .workorder-card-head {
    flex-direction: column;
    gap: 6px;
  }

  .topbar .toolbar {
    width: 100%;
  }

  .search-input,
  .field input,
  .field select,
  .field textarea {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── tramo 12-inicio-y-portadas (líneas 8643-9382 del antiguo styles.css): Workcenter/inicio por rol, resumen ERPY, portadas de departamento, heros, dashboard, filas de mando, radar de negocio ── */
/* Workcenter 1B: role-specific command center */
.workcenter-home {
  display: grid;
  gap: 18px;
}















/* La tira de métricas de Inicio se retiró: repetía cifras de la bandeja y del cuadro de mando. */
.erpy-area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.erpy-area-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  color: #14161a;
  text-align: left;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 12px 28px -22px rgba(20,26,40,.36);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.erpy-area-card:hover,
.erpy-area-card:focus-visible {
  outline: 0;
  transform: translateY(-1px);
  border-color: rgba(255,90,0,.38);
  box-shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 20px 38px -24px rgba(20,26,40,.4);
}

.erpy-area-card > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.erpy-area-card strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.erpy-area-card small { overflow: hidden; color: rgba(20,22,26,.62); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.erpy-area-card > b { color: rgba(20,22,26,.4); font-size: 22px; font-weight: 500; }

.erpy-area-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #a33800;
  background: rgba(255,90,0,.14);
  font-size: 12px;
  font-weight: 800;
}

.erpy-area-card.blue .erpy-area-icon { color: #26438f; background: rgba(58,102,204,.14); }
.erpy-area-card.green .erpy-area-icon { color: #06603a; background: rgba(20,160,90,.15); }
.erpy-area-card.navy .erpy-area-icon { color: #3d2a92; background: rgba(96,72,214,.14); }
.erpy-area-card.sand .erpy-area-icon { color: #6b4400; background: rgba(226,168,0,.2); }

/* Portadas navegables de departamento: paneles claros y una única decisión por tarjeta. */
.department-home { display: grid; gap: 14px; }
.department-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 25px 27px; border: 1px solid rgba(255,255,255,.82); border-radius: 29px; background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(255,243,235,.8)); box-shadow: 0 1px 0 rgba(255,255,255,.94) inset, 0 25px 60px -36px rgba(20,26,40,.44); }
.department-hero h2 { margin: 5px 0 0; font-size: 31px; letter-spacing: -.035em; }
.department-hero p { max-width: 760px; margin: 8px 0 0; color: rgba(20,22,26,.7); font-size: 15px; line-height: 1.45; }
.department-hero.navy { background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(239,241,255,.8)); }
.department-hero.green { background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(237,249,241,.82)); }
.department-hero.sand { background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(255,248,228,.84)); }
.department-grid-panel { padding: 20px; }
.department-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.department-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; min-height: 92px; padding: 14px; color: #14161a; text-align: left; border: 1px solid rgba(219,225,235,.88); border-radius: 18px; background: linear-gradient(155deg,#fff,#fafbfd); box-shadow: 0 1px 0 rgba(255,255,255,.94) inset,0 13px 28px -25px rgba(20,26,40,.38); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.department-card:hover, .department-card:focus-visible { outline: 0; transform: translateY(-2px); border-color: rgba(255,90,0,.42); box-shadow: 0 1px 0 rgba(255,255,255,.94) inset,0 20px 35px -24px rgba(20,26,40,.48); }
.department-card > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.department-card strong { font-size: 15px; }
.department-card small { color: rgba(20,22,26,.64); font-size: 12px; line-height: 1.35; }
.department-card > b { color: rgba(20,22,26,.38); font-size: 23px; font-weight: 500; }
.department-card-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; color:#a33800; background:rgba(255,90,0,.14); font-size: 12px; font-weight:850; }
.department-card.blue .department-card-icon { color:#26438f; background:rgba(58,102,204,.14); }
.department-card.green .department-card-icon { color:#06603a; background:rgba(20,160,90,.15); }
.department-card.navy .department-card-icon { color:#3d2a92; background:rgba(96,72,214,.14); }
.department-card.sand .department-card-icon { color:#6b4400; background:rgba(226,168,0,.2); }

@media (max-width: 780px) {
  .erpy-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erpy-area-card small { white-space: normal; }
  .department-hero { grid-template-columns: 1fr; padding: 20px; }
  .department-hero h2 { font-size: 26px; }
  .department-grid { grid-template-columns: 1fr; }
}

.workcenter-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 22px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 32px;
  padding: 26px;
  box-shadow: var(--shadow);
}

.workcenter-hero::after {
  content: "";
  position: absolute;
  inset: auto -70px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: rgb(255 255 255 / 18%);
  pointer-events: none;
}

.office-hero {
  color: #fff;
  background:
    radial-gradient(circle at 85% 18%, rgb(255 255 255 / 18%), transparent 28%),
    linear-gradient(135deg, #162334 0%, #274560 48%, #f26522 140%);
}

.field-hero {
  color: #1c1917;
  background:
    radial-gradient(circle at 90% 10%, rgb(22 163 74 / 16%), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #fff5eb 58%, #e8f7f5 130%);
}

.workcenter-hero .hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 12px;
}

.workcenter-hero h2 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(32px, calc(1vw * 5), 58px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.workcenter-hero p {
  max-width: 720px;
  margin: 0;
  color: inherit;
  opacity: 0.78;
  font-size: 16px;
  font-weight: 750;
}

.office-hero .eyebrow {
  color: rgb(255 255 255 / 78%);
}

.hero-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 850;
}

.office-hero .hero-status-line > span:not(.status-pill) {
  color: rgb(255 255 255 / 72%);
}

.hero-command-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  align-self: center;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 24px;
  padding: 14px;
  background: rgb(255 255 255 / 14%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
  backdrop-filter: blur(16px);
}

.field-hero .hero-command-panel {
  border-color: var(--border-soft);
  background: rgb(255 255 255 / 72%);
}

.workcenter-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.metric-action {
  text-align: left;
  cursor: pointer;
}

.metric-action:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
  box-shadow: var(--lift-shadow);
}

.workcenter-grid {
  display: grid;
  gap: 16px;
}

.server-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.dashboard-alert {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px;
  color: var(--text-primary);
  background: #fff;
  text-align: left;
  box-shadow: var(--soft-shadow);
}

.dashboard-alert.warning {
  border-color: rgb(245 143 32 / 28%);
  background: rgb(255 184 77 / 13%);
}

.dashboard-alert.danger {
  border-color: rgb(220 38 38 / 28%);
  background: rgb(254 226 226 / 72%);
}

.dashboard-alert.success {
  border-color: rgb(22 163 74 / 28%);
  background: rgb(220 252 231 / 64%);
}

.dashboard-alert strong {
  font-size: 14px;
  font-weight: 950;
}

.dashboard-alert span,
.dashboard-api-meta {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-api-meta {
  margin: 0 4px;
}


.field-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.technician-hero {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  padding: 22px;
}

.technician-hero h2 {
  font-size: clamp(30px, calc(1vw * 4), 44px);
  line-height: 1;
}

.field-shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-shift-grid.secondary {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr) minmax(260px, 0.7fr);
}

.field-service-card.priority {
  border-color: rgb(201 95 42 / 32%);
  background:
    radial-gradient(circle at 100% 0%, rgb(243 107 33 / 12%), transparent 34%),
    #fff;
}

.field-service-card.active {
  border-color: rgb(31 122 77 / 28%);
  background:
    radial-gradient(circle at 100% 0%, rgb(31 122 77 / 10%), transparent 34%),
    #fff;
}

.field-service-body {
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 800;
}

.field-service-body > strong {
  color: var(--text-primary);
  font-size: 18px;
}

.field-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-checks span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--typy-surface-soft, #fbf7f1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.field-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-action-grid .btn {
  min-height: 42px;
}

.field-timeline {
  display: grid;
  gap: 8px;
}

.field-timeline-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  color: var(--text-primary);
  text-align: left;
}

.field-timeline-row time {
  color: var(--typy-copper, #c95f2a);
  font-weight: 950;
}

.field-timeline-row span {
  display: grid;
  gap: 2px;
}

.field-timeline-row small {
  color: var(--text-secondary);
  font-weight: 800;
}

.field-resource-row {
  cursor: default;
}

.field-empty-state {
  border-color: rgb(37 99 168 / 26%);
}

.workcenter-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 250 245 / 88%)),
    var(--panel-solid);
  box-shadow: var(--soft-shadow);
}

.workcenter-card.span-2 {
  grid-column: span 2;
}



.card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.card-head h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.command-list {
  display: grid;
  gap: 9px;
}


.command-row,
.decision-row,
.load-row,
.resource-row {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 12px;
  color: var(--text-primary);
  background: #ffffff;
  text-align: left;
  box-shadow: 0 8px 22px rgb(28 25 23 / 4%);
  cursor: pointer;
}

.command-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.command-row:hover,
.decision-row:hover,
.load-row:hover,
.resource-row:hover {
  transform: translateY(-1px);
  border-color: var(--border-medium);
  box-shadow: 0 14px 28px rgb(28 25 23 / 8%);
}

.command-row-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.command-row-main strong,
.resource-row strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-row-main small,
.resource-row span,
.next-order span,
.next-order em {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.command-row-status {
  display: flex;
  justify-content: end;
}

.decision-stack {
  display: grid;
  gap: 10px;
}

.decision-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.decision-row span {
  display: grid;
  gap: 4px;
}

.decision-row strong {
  font-weight: 950;
}

.decision-row small {
  color: var(--text-secondary);
  font-weight: 750;
}

.decision-row b {
  min-width: 44px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--info);
}

.decision-row.warning b {
  color: #92400e;
  background: var(--warning-soft);
}

.decision-row.success b {
  color: #166534;
  background: var(--success-soft);
}





.sync-chip-action {
  min-width: 178px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--text-primary);
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 8px 22px rgb(28 25 23 / 6%);
  cursor: pointer;
}

.sync-chip-action span:last-child {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.sync-chip-action strong {
  font-size: 12px;
  font-weight: 950;
}

.sync-chip-action small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.sync-chip-action:hover,
.business-radar button:hover {
  transform: translateY(-1px);
  border-color: var(--border-medium);
  box-shadow: 0 14px 28px rgb(28 25 23 / 8%);
}
}