@layer legado {
/* estilos/04-agenda-y-capa-industrial.css · fichero 4/11 de la hoja HEREDADA (líneas 9383-12104 del antiguo styles.css).
   Agenda y planificador, capa industrial premium, cola de tareas y formularios del parte. Tramos internos, en este orden:
     · 13-agenda (9383-10713): Agenda y planificador: timeline, tablero por horas, arrastre, formulario de visita, cargas, responsive
     · 14-capa-industrial-premium (10714-11060): Capa «Typy Industrial Premium Responsive 1A»: segundo :root y reestilo del shell
     · 15-cola-de-tareas-y-formularios (11061-12104): Cola de tareas, etiquetas, pills, ordenación, ritmo y alta de partes, secciones de formulario, contraste en editores blancos, responsive 1180
   El orden ES la cascada: va tras 03-vision-fichas-cliente-e-inicio.css y antes de 05-torre-de-control-y-command-os.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 13-agenda (líneas 9383-10713 del antiguo styles.css): Agenda y planificador: timeline, tablero por horas, arrastre, formulario de visita, cargas, responsive ── */
.agenda-page {
  display: grid;
  gap: 18px;
}





.agenda-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 16px;
}











.agenda-resource-selector,
.agenda-macsa-import {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(135deg, #fff, #fffaf4);
}

.agenda-resource-selector > div,
.agenda-macsa-import > div {
  display: grid;
  gap: 2px;
  min-width: min(320px, 100%);
  margin-right: auto;
}

.agenda-resource-selector span,
.agenda-macsa-import span,
.agenda-macsa-import small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.agenda-resource-selector strong,
.agenda-macsa-import strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 950;
}

.agenda-macsa-import small {
  color: var(--danger);
}

.agenda-resource-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--text-secondary);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.agenda-resource-chip.active {
  border-color: rgb(37 99 235 / 26%);
  color: #1d4ed8;
  background: #eff6ff;
}

.agenda-macsa-upload {
  min-height: 38px;
  cursor: pointer;
}

.agenda-macsa-upload input {
  display: none;
}






.agenda-next-card,
.agenda-planner {
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  background: var(--panel-solid);
  box-shadow: var(--soft-shadow);
}








.agenda-planner {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
}

.agenda-planner-grid {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.planner-hours {
  min-width: 950px;
  display: grid;
  grid-template-columns: repeat(14, minmax(64px, 1fr));
  margin-left: 200px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.planner-row {
  min-width: 1150px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.planner-resource {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--surface-warm);
}

.planner-resource strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 950;
}

.planner-resource span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.planner-track {
  position: relative;
  min-height: 98px;
  padding: 8px;
  cursor: copy;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 13 - 1px), rgb(28 25 23 / 5%) calc(100% / 13 - 1px) calc(100% / 13)),
    #fff;
}

.planner-block {
  position: absolute;
  min-width: 96px;
  max-width: 260px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgb(242 101 34 / 24%);
  border-radius: 12px;
  padding: 8px 10px;
  color: #7c2d12;
  background: #fed7aa;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgb(28 25 23 / 9%);
}

.planner-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(28 25 23 / 10%);
}

.planner-block.warning,
.planner-block.unfinished {
  border-color: rgb(220 38 38 / 24%);
  color: #7f1d1d;
  background: #fecaca;
}

/* Tonos por estado: misma paleta que la planificación semanal (.agenda-timeline-item). */
.planner-block.planned {
  border-color: rgb(30 58 138 / 22%);
  color: #1e3a8a;
  background: #bfdbfe;
}

.planner-block.confirmed {
  border-color: rgb(124 45 18 / 22%);
  color: #7c2d12;
  background: #fbbf24;
}

.planner-block.done {
  border-color: rgb(6 78 59 / 22%);
  color: #064e3b;
  background: #6ee7b7;
}

.planner-block.materials {
  border-color: rgb(76 29 149 / 22%);
  color: #4c1d95;
  background: #ddd6fe;
}

.planner-block b,
.planner-block span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-block b {
  font-size: 12px;
  font-weight: 950;
}

.planner-block span,
.planner-empty {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.planner-empty {
  align-self: center;
  padding: 0 6px;
}

/* ── Tablero Ganttic (vista día por horas, drag&drop, carga en horas) ─────────── */
.planner-head {
  align-items: flex-start;
}

.planner-daynav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.planner-daynav .btn.compact.active {
  border-color: var(--brand, #e46701);
  color: var(--brand, #e46701);
  font-weight: 950;
}

.planner-load {
  margin-top: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgb(28 25 23 / 8%);
  overflow: hidden;
}

.planner-load i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ee7b7, #34d399);
}

.planner-load.over i {
  background: linear-gradient(90deg, #fbbf24, #ef4444);
}

.planner-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  box-shadow: 0 0 0 1px rgb(239 68 68 / 25%);
  pointer-events: none;
  z-index: 2;
}

.planner-now::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.planner-hint,
.planner-empty-day {
  margin: 8px 2px 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.planner-empty-day {
  padding: 14px 12px;
  border: 1px dashed var(--border-soft);
  border-radius: 14px;
  text-align: center;
}

/* Arrastre */
.planner-block[data-draggable="1"] {
  cursor: grab;
  touch-action: none;
}

.planner-block.dragging {
  cursor: grabbing;
  opacity: 0.92;
  z-index: 60;
  box-shadow: 0 16px 34px rgb(28 25 23 / 22%);
  transform: scale(1.02);
}

.planner-track.drop-target {
  outline: 2px dashed var(--brand, #e46701);
  outline-offset: -3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 13 - 1px), rgb(28 25 23 / 5%) calc(100% / 13 - 1px) calc(100% / 13)),
    rgb(228 103 1 / 6%);
}

body.agenda-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* Chip de sync con incidencia: pista "Ver motivo →" para que se sepa que lleva al detalle. */
.sync-chip-action.has-issue {
  border-color: #f97316;
}
.sync-chip-action .sync-chip-hint {
  font-size: 12px;
  font-weight: 700;
  color: #c2410c;
  white-space: nowrap;
}

/* Arrastre en el calendario (semana/mes): mover visita a otro día/técnico. */
.cc-ev.cal-dragging,
.agenda-timeline-item.cal-dragging {
  opacity: 0.9;
  cursor: grabbing;
  box-shadow: 0 12px 26px rgb(28 25 23 / 22%);
  transform: scale(1.02);
}
[data-track-date].cal-drop-target {
  outline: 2px dashed var(--brand, #e46701);
  outline-offset: -3px;
  background: rgb(228 103 1 / 8%);
  border-radius: 8px;
}
.agenda-cc .cc-ev[data-cal-draggable="1"],
.agenda-timeline-item[data-cal-draggable="1"] {
  cursor: grab;
}
body.agenda-dragging .agenda-cc .cc-ev,
body.agenda-dragging .agenda-timeline-item {
  cursor: grabbing;
}

/* Vista previa que sigue al puntero al arrastrar una visita: arriba QUÉ se mueve, abajo DÓNDE cae
   (con el rango completo si es de varios días). Antes era un chip de una línea con solo la fecha. */
.agenda-drag-label {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 260px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #1c1917;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  box-shadow: 0 12px 28px rgb(28 25 23 / 34%);
}

.agenda-drag-label .agenda-drag-title {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-drag-label .agenda-drag-target {
  display: block;
  margin-top: 2px;
  color: #fdba74;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.agenda-timeline-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  background: var(--panel-solid);
  box-shadow: var(--soft-shadow);
}

.agenda-timeline-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.agenda-timeline-grid {
  min-width: max(980px, calc(180px + var(--agenda-days) * 132px));
  display: grid;
  grid-template-columns: 180px repeat(var(--agenda-days), minmax(132px, 1fr));
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: #fff;
}

.agenda-timeline-resource,
.agenda-timeline-day {
  min-height: 84px;
  padding: 10px;
  border-right: 1px solid rgb(226 216 204 / 78%);
  border-bottom: 1px solid rgb(226 216 204 / 78%);
}

.agenda-timeline-head {
  min-height: 44px;
  color: var(--text-secondary);
  background: var(--surface-warm);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.agenda-timeline-resource {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 3px;
  background: #fffaf4;
}

.agenda-timeline-resource strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 950;
}

.agenda-timeline-resource span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.agenda-timeline-day {
  display: grid;
  align-content: start;
  gap: 5px;
  background: linear-gradient(180deg, #fff, #fffdf9);
}

.agenda-timeline-item {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  color: #713f12;
  background: #fde68a;
  text-align: left;
  cursor: pointer;
}

.agenda-timeline-item.confirmed {
  color: #7c2d12;
  background: #fbbf24;
}

.agenda-timeline-item.planned {
  color: #1e3a8a;
  background: #bfdbfe;
}

.agenda-timeline-item.unfinished {
  color: #7f1d1d;
  background: #fecaca;
}

.agenda-timeline-item.done {
  color: #064e3b;
  background: #6ee7b7;
}

.agenda-timeline-item.materials {
  color: #4c1d95;
  background: #ddd6fe;
}

.agenda-timeline-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgb(28 25 23 / 10%);
}

.agenda-timeline-item b,
.agenda-timeline-item span,
.agenda-timeline-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-timeline-item b {
  font-size: 12px;
  font-weight: 950;
}

.agenda-timeline-item span,
.agenda-timeline-item small {
  font-size: 12px;
  font-weight: 850;
}

.agenda-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.agenda-timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.agenda-timeline-legend i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: #bfdbfe;
}

.agenda-timeline-legend i.confirmed {
  background: #fbbf24;
}

.agenda-timeline-legend i.unfinished {
  background: #fecaca;
}

.agenda-timeline-legend i.done {
  background: #6ee7b7;
}

.agenda-timeline-legend i.materials {
  background: #ddd6fe;
}

.agenda-timeline-more {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.agenda-timeline-empty {
  min-height: 18px;
}














.quote-workbook-upload-control {
  cursor: pointer;
}

.agenda-visit-form > .form-two,
.agenda-visit-form > .form-three,
.agenda-visit-form > .agenda-schedule-grid,
.agenda-visit-form > .agenda-visit-block,
.agenda-visit-form > .agenda-visit-helper-strip,
.agenda-visit-form > .agenda-visit-summary-grid {
  margin-left: 18px;
  margin-right: 18px;
}

.agenda-visit-form > .form-two,
.agenda-visit-form > .form-three,
.agenda-visit-form > .agenda-schedule-grid {
  margin-top: 14px;
}

.agenda-visit-form {
  overflow: visible;
}

.agenda-visit-form .field,
.agenda-visit-form input,
.agenda-visit-form select,
.agenda-visit-form textarea {
  min-width: 0;
  max-width: 100%;
}

.agenda-visit-grid {
  align-items: start;
}

.agenda-schedule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
  /* Sin esto, un campo sin texto de ayuda (Fecha inicio) se estira a la altura de la fila
     y su input baja al centro, desalineado con los demás (Rubén 16-jul). Alinea arriba. */
  align-items: start;
}
.agenda-schedule-grid .field { align-self: start; }

.agenda-visit-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgb(226 216 204 / 80%);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgb(242 101 34 / 8%), transparent 34%),
    linear-gradient(135deg, #fff, #fffaf4);
}

.agenda-visit-block h4 {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.1;
}

.agenda-visit-helper-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgb(255 90 0 / 16%);
  border-radius: 18px;
  color: var(--typy-text-muted);
  background: linear-gradient(135deg, rgb(255 90 0 / 7%), #fff);
  font-size: 13px;
  font-weight: 800;
}

.agenda-visit-helper-strip strong {
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-weight: 950;
}

.agenda-visit-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.agenda-visit-summary-grid article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 102px;
  padding: 14px;
  border: 1px solid rgb(226 216 204 / 88%);
  border-radius: 18px;
  background: #fff;
}

.agenda-visit-summary-grid article.success {
  border-color: rgb(22 101 52 / 18%);
  background: linear-gradient(135deg, rgb(240 253 244 / 95%), #fff);
}

.agenda-visit-summary-grid article.warning {
  border-color: rgb(245 158 11 / 24%);
  background: linear-gradient(135deg, rgb(255 251 235 / 95%), #fff);
}

.agenda-visit-summary-grid span,
.agenda-visit-reference-preview span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.agenda-visit-summary-grid strong {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
}

.agenda-visit-summary-grid small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.agenda-visit-reference-preview {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgb(226 216 204 / 88%);
  border-radius: 14px;
  background: rgb(250 250 249 / 82%);
}

.agenda-visit-reference-preview strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 950;
}

.agenda-visit-reference-preview.success {
  border-color: rgb(22 101 52 / 18%);
  background: rgb(240 253 244 / 92%);
}

.agenda-visit-reference-preview.warning {
  border-color: rgb(245 158 11 / 24%);
  background: rgb(255 251 235 / 92%);
}

.agenda-date,
.agenda-main,
.agenda-meta {
  display: grid;
  gap: 4px;
}

.agenda-date {
  align-content: start;
  border-radius: 16px;
  padding: 10px;
  color: var(--brand-strong);
  background: var(--typy-orange-soft);
}

.agenda-date strong,
.agenda-main strong {
  font-weight: 950;
}

.agenda-date small,
.agenda-main small,
.agenda-main em,
.agenda-meta small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}



.load-bars {
  display: grid;
  gap: 10px;
}

.load-row {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.65fr) auto;
}

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

.load-row small {
  color: var(--text-secondary);
  font-size: 12px;
}

.load-row i {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.load-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--typy-orange), #2563eb);
}




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

.field-role .command-sidebar {
  background:
    radial-gradient(circle at 100% 0%, rgb(22 163 74 / 8%), transparent 30%),
    rgb(255 255 255 / 88%);
}

@media (max-width: 1180px) {
  .workcenter-hero,
	  .agenda-hero,
	  .office-grid,
	  .field-grid,
	  .server-dashboard-grid,
	  .agenda-control-panel,
	  .agenda-next-card,
	  .agenda-schedule-grid,
	  .agenda-board {
	    grid-template-columns: 1fr;
	  }

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

  .workcenter-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .agenda-hero,
  .workcenter-hero {
    padding: 20px;
    border-radius: 26px;
  }

  .agenda-hero h2,
  .workcenter-hero h2 {
    font-size: clamp(31px, calc(1vw * 12), 44px);
  }

  .hero-command-panel {
    grid-template-columns: 1fr;
  }





  .agenda-resource-selector,
  .agenda-macsa-import {
    align-items: stretch;
  }

  .agenda-resource-chip,
  .agenda-macsa-upload {
    width: 100%;
  }



  .agenda-planner {
    margin-left: -4px;
    margin-right: -4px;
    padding: 14px;
    border-radius: 22px;
  }

  .workcenter-kpi-strip,
  .agenda-visit-summary-grid,
  .business-radar {
    grid-template-columns: 1fr;
  }

  .rate-card-line,
  .billing-order-grid {
    grid-template-columns: 1fr;
  }

  .billing-order-head {
    flex-direction: column;
  }

  .command-row,
  .agenda-card,
  .load-row {
    grid-template-columns: 1fr;
  }


  .command-row-status {
    justify-content: start;
  }
}

.inventory-import-panel {
  margin-bottom: 22px;
  padding: 18px 20px;   /* el texto llegaba a 0px del borde y este panel recorta */
}

.inventory-import-preview {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.compact-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compact-table {
  font-size: 13px;
}

.warning-list {
  display: grid;
  gap: 8px;
}

.warning-list span,
.success-box {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
}

.success-box {
  margin-top: 16px;
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.1);
  color: #166534;
}

.success-box strong,
.success-box span {
  display: block;
}

@media (max-width: 900px) {
  .compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-import-panel .form-three,
  .inventory-import-panel .form-two {
    grid-template-columns: 1fr;
  }
}

/* ── tramo 14-capa-industrial-premium (líneas 10714-11060 del antiguo styles.css): Capa «Typy Industrial Premium Responsive 1A»: segundo :root y reestilo del shell ── */
/* Typy Industrial Premium Responsive 1A */
:root {
  --typy-orange: #f26522;
  --typy-orange-hover: #d94e0f;
  --typy-orange-soft: #fff0e7;
  --typy-orange-border: rgb(242 101 34 / 24%);
  --page-background: #f6f2ed;
  --surface: #f6f2ed;
  --surface-muted: #f2eee7;
  --surface-warm: #fff8f1;
  --panel: rgb(255 255 255 / 92%);
  --panel-solid: #ffffff;
  --panel-soft: #fffaf5;
  --text-primary: #1c1917;
  --text-secondary: #6f655d;
  --text-muted: #746e67;   /* era #9a8f86: 3,16:1. Ahora 5,04 */
  --border-soft: rgb(28 25 23 / 9%);
  --border-medium: rgb(28 25 23 / 14%);
  --success: #16a34a;
  --success-soft: #eaf7ef;
  --warning: #f59e0b;
  --warning-soft: #fff6df;
  --danger: #dc2626;
  --danger-soft: #fef0f0;
  --info: #2563eb;
  --info-soft: #eef4ff;
  --teal: #0f766e;
  --teal-soft: #e8f7f5;
  --brand: var(--typy-orange);
  --brand-soft: var(--typy-orange-soft);
  --brand-strong: #9a3412;
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-soft);
  --shadow: 0 24px 70px rgb(28 25 23 / 10%);
  --soft-shadow: 0 14px 34px rgb(28 25 23 / 7%);
  --lift-shadow: 0 18px 46px rgb(28 25 23 / 11%);
  --radius: 22px;
  --control-radius: 13px;
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, #fffaf5 0%, var(--page-background) 36%, #f3eee7 100%);
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(242 101 34 / 28%);
  outline-offset: 2px;
}

.layout.command-layout {
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: calc(1vh * 100);
  background: transparent;
}

.workspace {
  min-width: 0;
}

.command-sidebar {
  position: sticky;
  top: 0;
  height: calc(1vh * 100);
  gap: 14px;
  padding: 18px 14px;
  border-right: 1px solid var(--border-soft);
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(18px);
}

.sidebar-head,
.sidebar-user-card,
.sync-mini {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--panel-solid);
  box-shadow: 0 10px 28px rgb(28 25 23 / 5%);
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
}

.sidebar-head img {
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 13px;
  background: var(--typy-orange-soft);
}

.sidebar-title strong {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.1;
}

.sidebar-title span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.sidebar-user-card,
.sync-mini {
  padding: 12px;
}

.avatar {
  width: 38px;
  height: 38px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-size: 13px;
  font-weight: 950;
}

.command-nav {
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
}

.nav-section {
  gap: 6px;
}

.nav-section-title {
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.command-nav button {
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 13px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 850;
}

.command-nav button:hover {
  color: var(--text-primary);
  background: var(--surface-warm);
}

.command-nav button.active {
  color: var(--brand-strong);
  border-color: var(--typy-orange-border);
  background: var(--typy-orange-soft);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 68%);
}

.command-nav button.active::before {
  width: 4px;
  height: 20px;
  margin-right: 9px;
  background: var(--typy-orange);
}

.sidebar-logout {
  min-height: 42px;
  border-radius: 13px;
}

.command-topbar {
  min-height: 74px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: rgb(255 250 245 / 88%);
  backdrop-filter: blur(18px);
}

.topbar-title {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 950;
}

.mobile-view-label {
  display: none;
}

.topbar-search input,
.search-input {
  min-height: 44px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%);
}

.content {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 24px;
}

.section-title,
.drawer,
.panel,
.metric,
.detail-hero,
.modal-card,
.command-create-card,
.list-row,
.workorder-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: var(--soft-shadow);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.section-title::before {
  display: none;
}

.section-title h2 {
  color: var(--text-primary);
  font-size: clamp(24px, calc(1vw * 2.4), 34px);
  font-weight: 950;
}

.section-title p {
  margin-top: 5px;
  max-width: 620px;
  color: var(--text-secondary);
}

.toolbar,
.row-actions,
.panel-head,
.form-actions {
  gap: 10px;
}

.btn {
  min-height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text-primary);
  background: #ffffff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-medium);
  box-shadow: 0 10px 22px rgb(28 25 23 / 8%);
}

.btn.primary {
  border-color: rgb(242 101 34 / 22%);
  color: #ffffff;
  background: var(--typy-orange);
  box-shadow: 0 12px 24px rgb(242 101 34 / 24%);
}

.btn.primary:hover {
  background: var(--typy-orange-hover);
}

.btn.ghost {
  color: var(--text-secondary);
  background: rgb(255 255 255 / 56%);
}

.btn.danger {
  color: #ffffff;
  border-color: rgb(220 38 38 / 22%);
  background: var(--danger);
}

.btn.small {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.btn.is-action-pending,
.btn:disabled {
  cursor: wait;
  opacity: 0.74;
  transform: none;
  box-shadow: none;
}

.btn-spinner,
.action-progress-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 56%);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: typy-spin 0.8s linear infinite;
}

.action-progress-layer {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9999;
  pointer-events: none;
}

/* ── tramo 15-cola-de-tareas-y-formularios (líneas 11061-12104 del antiguo styles.css): Cola de tareas, etiquetas, pills, ordenación, ritmo y alta de partes, secciones de formulario, contraste en editores blancos, responsive 1180 ── */
/* ── Panel de cola de tareas (siempre visible cuando hay algo) ── */
.task-queue-layer {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9998;
}
.task-queue-card {
  width: min(460px, calc(calc(1vw * 100) - 24px));
  border-radius: 18px;
  background: linear-gradient(160deg, #141826, #0e111b);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 52px rgba(0,0,0,.5);
  color: #eef1f8;
  overflow: hidden;
}
.tq-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px 20px; background: transparent; border: 0; cursor: pointer;
  color: #eef1f8; font: inherit; text-align: left;
}
.tq-badges { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.tq-count { font-size: 16px; font-weight: 800; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.tq-count.tq-live { background: rgba(242,101,34,.22); color: #ff9a5a; }
.tq-count.tq-fail { background: rgba(239,68,68,.22); color: #fca5a5; }
.tq-count.tq-done { background: rgba(34,197,94,.20); color: #86efac; }
.tq-title { flex: 1; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-caret { flex: 0 0 auto; color: #9aa3bd; font-size: 16px; }
.task-queue-layer.tq-has-live .tq-count.tq-live { animation: tqpulse 1.1s ease-in-out infinite; }
@keyframes tqpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tq-list { max-height: calc(1vh * 56); overflow-y: auto; padding: 2px 12px 12px; display: grid; gap: 8px; }
.tq-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); }
.tq-row-live { background: rgba(242,101,34,.12); }
.tq-row-fail { background: rgba(239,68,68,.14); }
.tq-row-done { background: rgba(34,197,94,.12); opacity: .9; }
.tq-ic { flex: 0 0 auto; width: 26px; text-align: center; font-size: 19px; line-height: 1.35; }
.tq-row-done .tq-ic { color: #86efac; }
.tq-row-fail .tq-ic { color: #fca5a5; }
.tq-row-live .tq-ic { color: #ff9a5a; }
.task-queue-layer.tq-has-live .tq-row-live .tq-ic { animation: tqpulse 1.1s ease-in-out infinite; }
.tq-txt { display: grid; gap: 3px; min-width: 0; }
.tq-txt strong { font-size: 16.5px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.tq-sub { font-size: 14px; color: #a7b0c8; }
.tq-actions { padding: 0 14px 14px; }
.tq-actions .btn { width: 100%; min-height: 48px; font-size: 15.5px; }

.action-progress-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(380px, calc(calc(1vw * 100) - 36px));
  border: 1px solid rgb(242 101 34 / 22%);
  border-radius: 18px;
  padding: 14px 16px;
  color: var(--text-primary);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 18px 42px rgb(28 25 23 / 18%);
  backdrop-filter: blur(14px);
}



.inline-processing-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgb(242 101 34 / 24%);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgb(255 247 237 / 90%), rgb(255 255 255 / 92%));
}

.inline-processing-card.success {
  border-color: rgb(22 163 74 / 24%);
  background: linear-gradient(135deg, rgb(240 253 244 / 92%), rgb(255 255 255 / 94%));
}

.inline-processing-card.danger {
  border-color: rgb(185 28 28 / 22%);
  background: linear-gradient(135deg, rgb(254 242 242 / 92%), rgb(255 255 255 / 94%));
}

.inline-processing-card div {
  display: grid;
  gap: 3px;
}

.inline-processing-card strong {
  font-weight: 950;
}

.inline-processing-card span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}

.action-progress-card strong,
.action-progress-card span {
  display: block;
}

.action-progress-card span {
  color: var(--text-secondary);
  font-size: 12px;
}

.action-progress-card .action-progress-spinner {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-color: rgb(242 101 34 / 22%);
  border-top-color: var(--typy-orange);
}

.field label,
label > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.field input,
.field select,
.field textarea,
label input,
label select,
label textarea {
  min-height: 46px;
  border: 1px solid var(--border-soft);
  border-radius: var(--control-radius);
  background: #ffffff;
}

.field textarea,
label textarea {
  min-height: 108px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.topbar-search input:focus,
.search-input:focus {
  border-color: rgb(242 101 34 / 44%);
  box-shadow: 0 0 0 4px rgb(242 101 34 / 12%);
}

.metrics {
  gap: 14px;
}

.metric {
  min-height: 104px;
  padding: 16px;
  box-shadow: 0 12px 32px rgb(28 25 23 / 6%);
}

.metric span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.metric strong {
  margin-top: 6px;
  color: var(--text-primary);
  font-size: 30px;
  line-height: 1;
}

.metric small {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}

.metric.success {
  border-color: rgb(22 163 74 / 20%);
  background: linear-gradient(180deg, #ffffff, var(--success-soft));
}

.metric.warning {
  border-color: rgb(245 158 11 / 22%);
  background: linear-gradient(180deg, #ffffff, var(--warning-soft));
}

.metric.info {
  border-color: rgb(37 99 235 / 18%);
  background: linear-gradient(180deg, #ffffff, var(--info-soft));
}

.pill,
.status-pill {
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 850;
  /* Una etiqueta de estado es corta por definicion —«Facturado», «Vencida», «Cobrada»— y no se
     parte nunca. Medido a 492px en Partes, «Facturado» se quedaba con 2,3px de aire a la derecha
     en vez de 10.
     Hacen falta LAS DOS lineas. `nowrap` impide que se parta, pero `overflow-wrap` SE HEREDA y
     alguna celda antepasada lo trae en `anywhere`, que sigue permitiendo que su anchura minima se
     derrumbe aunque no llegue a partirse. Con `normal` se corta esa herencia. */
  white-space: nowrap;
  overflow-wrap: normal;
}

.status-pill.success,
.pill.success {
  color: #166534;
  border-color: rgb(22 163 74 / 20%);
  background: var(--success-soft);
}

.status-pill.warning,
.pill.warning {
  color: #92400e;
  border-color: rgb(245 158 11 / 22%);
  background: var(--warning-soft);
}

.status-pill.info,
.pill.info {
  color: #1d4ed8;
  border-color: rgb(37 99 235 / 18%);
  background: var(--info-soft);
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  background: #f7f3ee;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: none;
}

.data-table th.sortable-col {
  padding: 0;
}

.sort-button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sort-button:hover {
  background: rgba(201, 95, 42, 0.08);
}

.sort-button.is-active {
  color: var(--brand-strong);
}

.sort-indicator {
  min-width: 34px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.data-table td {
  border-top: 1px solid var(--border-soft);
}

.data-table tbody tr:hover {
  background: var(--surface-warm);
}

.list-row,
.workorder-card {
  box-shadow: none;
}

.empty {
  border: 1px dashed var(--border-medium);
  border-radius: 18px;
  color: var(--text-secondary);
  background: #fffaf5;
}

.workorders-view {
  display: grid;
  gap: 18px;
}

.workorders-overview-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.workorders-focus-panel,
.workorder-rhythm-panel {
  min-width: 0;
}

.workorders-focus-list {
  display: grid;
  gap: 10px;
}

.workorder-focus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, var(--bg-surface-muted));
}

.workorder-focus-row strong,
.workorder-focus-row small {
  display: block;
}

.workorder-focus-row small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-weight: 760;
}



.new-workorder-panel {
  margin-top: 0;
}

.workorder-form-hero {
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--typy-orange-border);
  border-radius: 18px;
  background: var(--panel-soft);
}

.eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.part-number-card {
  min-width: 220px;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: #ffffff;
}

.part-number-card span,
.part-number-card small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.part-number-card strong {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.1;
}

.part-number-card.is-definitive {
  border-color: rgb(22 163 74 / 24%);
  background: var(--success-soft);
}

.part-number-card.is-pending {
  border-color: rgb(245 158 11 / 24%);
  background: var(--warning-soft);
}

.part-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.part-summary-strip > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: #ffffff;
}

.part-summary-strip span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.part-summary-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.workorder-flow-nav {
  position: sticky;
  top: 86px;
  z-index: 10;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 12px 30px rgb(28 25 23 / 7%);
  backdrop-filter: blur(16px);
}

.flow-step {
  flex: 1 1 140px;
  min-height: 42px;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
}

.flow-step.active {
  color: var(--brand-strong);
  background: var(--brand-soft);
}

.flow-step span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--typy-orange);
  font-size: 12px;
}

.workorder-form-section {
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
}

/* ── FIX contraste: tarjetas BLANCAS dentro de modales de tema OSCURO ──────────────────
   Los modales (.modal-card, .app-modal-card, .po-modal, .app-sheet, .bq-modal) redefinen los
   tokens al tema OSCURO (--text-primary/--ink: #eef1f8) para su marco. Pero varios formularios
   (presupuesto, cliente) usan tarjetas de CONTENIDO blancas; el texto y lo que se escribe en los
   inputs heredaban ese token claro y quedaban BLANCO SOBRE BLANCO — invisible (Rubén 28-jul:
   "NO VEO NADA AL CREAR PRESUPUESTOS"). Estas tarjetas tienen fondo claro fijo, así que su texto
   SIEMPRE debe ser oscuro: devolvemos los tokens al tema claro dentro de ellas. */
.workorder-form-section,
.quote-line-card,
.quote-milestone-row,
.quote-billing-card,
.quote-total-card,
.quote-equipment-checklist,
.quote-material-flow-card {
  --text-primary: #151515;
  --ink: #151515;
  --muted: #5a6072;
  --text-secondary: #5a6072;
  --text-muted: #6b7280;
  color: #151515;
}
/* Los controles del editor de presupuesto/cliente van sobre fondo blanco → texto oscuro. */
.quote-editor-dialog input,
.quote-editor-dialog select,
.quote-editor-dialog textarea,
.quote-editor-dialog .command-bar,
.customer-editor-dialog input,
.customer-editor-dialog select,
.customer-editor-dialog textarea,
/* El editor de conceptos de factura tiene los campos con FONDO BLANCO fijo: su texto debe ser
   oscuro. Heredaba el token claro del marco del modal y no se leía nada de lo que ponía
   (Rubén, 13-ago: "No se ve" editando los conceptos de la TS26-N0016). */
.invoice-lines-dialog .invoice-line-editor-row input,
.invoice-lines-dialog .invoice-line-editor-row select {
  color: #151515;
}
.invoice-lines-dialog .invoice-line-editor-row input,
.invoice-lines-dialog .invoice-line-editor-row select {
  background: #fff;
  border-color: rgb(21 21 21 / 18%);
  caret-color: #151515;
}
.invoice-lines-dialog .invoice-line-editor-row input::placeholder {
  color: #6b7280;
}
.quote-editor-dialog input::placeholder,
.quote-editor-dialog textarea::placeholder,
.customer-editor-dialog input::placeholder,
.customer-editor-dialog textarea::placeholder {
  color: #9aa1b3;
}

.workorder-form-section h3 {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 18px;
}

.number-display {
  min-height: 46px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--control-radius);
}

.number-display strong {
  color: var(--text-primary);
}

.number-display span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.number-display.is-definitive {
  border-color: rgb(22 163 74 / 24%);
  background: var(--success-soft);
}

.number-display.is-pending {
  border-color: rgb(245 158 11 / 24%);
  background: var(--warning-soft);
}

.workorder-routing-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(255 90 0 / 6%), rgb(255 255 255 / 92%)),
    #ffffff;
}

.workorder-routing-card strong {
  display: block;
  color: var(--text-primary);
  font-size: 15px;
}

.workorder-routing-card p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.field-hint {
  display: block;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.choice-pill {
  min-height: 36px;
  border-radius: 999px;
}

.choice-pill.active {
  color: var(--brand-strong);
  border-color: var(--typy-orange-border);
  background: var(--brand-soft);
}

.material-lines-card,
.material-line {
  border-radius: 16px;
}

.command-bar {
  position: sticky;
  bottom: 18px;
  z-index: 12;
  justify-content: flex-end;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgb(255 255 255 / 90%);
  box-shadow: var(--lift-shadow);
  backdrop-filter: blur(16px);
}

.collapsible-list-card {
  overflow: clip;
}

.collapsible-summary {
  padding: 16px 18px;
}

.workorder-card-list {
  gap: 12px;
}

.workorder-card {
  width: 100%;
  padding: 15px;
  text-align: left;
}

.workorder-card:hover {
  border-color: var(--typy-orange-border);
  box-shadow: 0 14px 32px rgb(28 25 23 / 8%);
}

.workorder-card.active {
  border-color: var(--typy-orange-border);
  background: var(--brand-soft);
}

.workorder-card-head {
  gap: 10px;
}

.workorder-card-client {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
}

.modal-overlay {
  backdrop-filter: blur(10px);
}

.mobile-tabbar {
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 18px 46px rgb(28 25 23 / 18%);
  backdrop-filter: blur(18px);
}

.mobile-tabbar button {
  border-radius: 14px;
  color: var(--text-secondary);
  font-weight: 850;
}

.mobile-tabbar button.active {
  color: var(--brand-strong);
  background: var(--brand-soft);
}

@media (max-width: 1180px) {
  .layout.command-layout {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .command-topbar {
    grid-template-columns: minmax(180px, 1fr) auto;
  }
}

@media (max-width: 1024px) {
  .layout.command-layout {
    display: block;
  }

  .command-sidebar {
    display: none;
  }

  .command-topbar {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 10px 16px;
  }


  .topbar-title {
    font-size: 20px;
  }

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

  .workorders-quick-metrics,
  .metrics,
  .compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .workorder-flow-nav {
    top: 70px;
  }
}

@media (max-width: 768px) {
  body {
    background: var(--page-background);
  }

  .command-topbar {
    display: grid;
    gap: 10px;
  }

  .topbar-main {
    min-height: 40px;
  }

  .mobile-view-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--brand-strong);
    background: var(--brand-soft);
    font-size: 12px;
    font-weight: 900;
  }


  .topbar .toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar .toolbar .btn {
    width: 100%;
    min-height: 46px;
  }

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

  .section-title .toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .section-title .toolbar > * {
    width: 100%;
  }

  .drawer,
  .panel,
  .metric,
  .detail-hero,
  .modal-card,
  .command-create-card {
    border-radius: 18px;
  }

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

  .workorder-form-hero {
    flex-direction: column;
  }

  .part-number-card {
    width: 100%;
    min-width: 0;
  }

  .workorder-flow-nav {
    position: sticky;
    top: 64px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
  }

  .flow-step {
    flex: 0 0 148px;
    scroll-snap-align: start;
  }

  .command-bar {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr;
  }

  .command-bar .btn {
    width: 100%;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .workorder-table-wrap {
    display: none;
  }

  .workorder-card-list {
    display: grid;
    padding: 0 14px 16px;
  }

  .workorders-view.detail-open .workorder-list-panel {
    display: none;
  }

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

  .customer-editor-overlay {
    align-items: start;
    align-content: start;
    padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
  }

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

  .mobile-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 1fr);
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    padding: 7px;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 12px 12px calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .command-topbar {
    padding: 10px 12px;
  }

  .topbar-title {
    font-size: 18px;
  }

  .topbar .toolbar {
    grid-template-columns: 1fr;
  }

  .section-title h2 {
    font-size: 25px;
  }

  .workorders-quick-metrics,
  .metrics,
  .compact-metrics,
  .detail-summary,
  .part-summary-strip {
    grid-template-columns: 1fr;
  }

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

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

  .btn {
    min-height: 46px;
  }

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

  .workorder-flow-nav {
    top: 60px;
    margin-left: -4px;
    margin-right: -4px;
  }

  .flow-step {
    flex-basis: 138px;
  }

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

.customer-editor-panel {
  border: 1px solid rgba(245, 112, 39, 0.22);
  box-shadow: 0 18px 44px rgba(88, 58, 37, 0.10);
}

.customer-form {
  margin-top: 14px;
}

.form-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(33, 40, 48, 0.08);
}

.form-section-title h4 {
  margin: 0;
}

.form-section-title span {
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.readiness-banner {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 800;
}

.readiness-banner span {
  color: var(--muted);
  font-size: 13px;
}

.readiness-banner.success {
  background: rgba(55, 160, 92, 0.11);
  border: 1px solid rgba(55, 160, 92, 0.24);
}

.readiness-banner.warning,
.alert-section {
  background: rgba(255, 184, 77, 0.12);
  border: 1px solid rgba(245, 143, 32, 0.22);
}
}