@layer legado {
/* estilos/02-presupuestos-y-clientes.css · fichero 2/11 de la hoja HEREDADA (líneas 3651-6643 del antiguo styles.css).
   Presupuestos y tarifas, clientes. Tramos internos, en este orden:
     · 08-presupuestos-y-tarifas (3651-5151): Editor de presupuesto, gestor de tarifas, tarjetas de información, PDF y biblioteca de documentos, zona de peligro, responsive 1180
     · 09-clientes (5152-6643): Maestro-detalle de entidades, filas de factura, visión de clientes, lector, centro de clientes, directorio, donut fiscal, alertas, responsive 1720
   El orden ES la cascada: va tras 01-base-shell-partes-y-formularios.css y antes de 03-vision-fichas-cliente-e-inicio.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 08-presupuestos-y-tarifas (líneas 3651-5151 del antiguo styles.css): Editor de presupuesto, gestor de tarifas, tarjetas de información, PDF y biblioteca de documentos, zona de peligro, responsive 1180 ── */
.quote-builder {
  margin-bottom: 18px;
  max-width: 100%;
  min-width: 0;
  /* `clip` recorta el desbordamiento horizontal SIN crear un contenedor de scroll propio (a
     diferencia de `hidden`), para que la barra de pasos `position:sticky` se ancle al modal y
     quede visible al desplazarse (asistente guiado del presupuesto, Rubén 31-jul). */
  overflow-x: clip;
  overflow-y: visible;
}

.quote-line-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quote-line-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgb(242 101 34 / 8%), transparent 34%),
    #fff;
}

.quote-line-card-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.quote-line-card strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 950;
}





.rate-card-catalog,
.tariff-management-module {
  display: grid;
  gap: 16px;
}



.tariff-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid rgb(226 216 204 / 78%);
  background:
    radial-gradient(circle at 100% 0%, rgb(44 98 167 / 9%), transparent 32%),
    linear-gradient(135deg, #fff, rgb(255 248 240 / 92%));
}

.tariff-page-header h2 {
  margin: 4px 0 3px;
  color: var(--typy-text);
  font-size: clamp(28px, calc(1vw * 4), 44px);
  letter-spacing: -0.06em;
}

.tariff-page-header p {
  margin: 0;
  max-width: 720px;
  color: var(--typy-text-muted);
  font-weight: 850;
  line-height: 1.32;
}

.tariff-header-actions,
.tariff-toolbar,
.tariff-toolbar .row-actions,
.rate-card-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tariff-header-actions select {
  min-height: 42px;
  max-width: 280px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--typy-text);
  font-weight: 900;
}

.tariff-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  padding: 18px 22px 0;
}

.tariff-kpi-card {
  min-height: 96px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 17px 18px;
  background-image: var(--cr-kpi-wash);
  box-shadow: var(--cr-lift-card);
}

.tariff-kpi-card span,
.tariff-kpi-card small {
  display: block;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: none;
  line-height: 1.3;
}

.tariff-kpi-card strong {
  display: block;
  margin: 4px 0 5px;
  color: var(--typy-text);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tariff-kpi-card.success { border-color: rgb(34 197 94 / 28%); }
.tariff-kpi-card.warning { border-color: rgb(245 158 11 / 34%); }
.tariff-kpi-card.info { border-color: rgb(59 130 246 / 28%); }
.tariff-kpi-card.neutral { border-color: rgb(148 163 184 / 34%); }

.tariff-toolbar {
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid rgb(226 216 204 / 68%);
}

.tariff-toolbar .search-input {
  max-width: 420px;
}

.tariff-section-tabs,
.tariff-panel-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 22px 14px;
}

.tariff-section-tabs button,
.tariff-panel-tabs span {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  /* La barra ya esta pensada para DESPLAZARSE (`overflow-x: auto` arriba), pero sin esto los
     botones se encogian antes de que llegara a hacer falta: en vez de deslizarse, se aplastaban.
     Medido a 1390px en Tesoreria, «Reglas» pedia 63px y tenia 56, asi que el texto se comia el
     relleno derecho — 3,7px en vez de 12. Lo mismo en Libros de IVA a 850px con tres pestañas.
     Fijos, la barra hace lo que prometia: se desliza y las etiquetas se leen enteras. */
  flex: 0 0 auto;
}

.tariff-section-tabs button {
  cursor: pointer;
}

.tariff-section-tabs button.active {
  border-color: rgb(201 95 42 / 38%);
  color: var(--typy-orange);
  background: rgb(255 244 235 / 92%);
}

.tariff-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.95fr);
  gap: 16px;
  padding: 0 22px 22px;
  align-items: start;
}

.tariff-table-panel,
.tariff-detail-panel {
  min-width: 0;
}

.tariff-table-wrap {
  margin-top: 0;
}

.tariff-table {
  min-width: 920px;
}

.tariff-table th,
.tariff-table td {
  white-space: nowrap;
  overflow-wrap: normal;
}

.tariff-table td:first-child {
  white-space: normal;
  min-width: 190px;
}

.tariff-table th.amount,
.tariff-table td.amount {
  text-align: right;
  white-space: nowrap;
}

.tariff-table td strong {
  color: var(--typy-text);
}

.tariff-table tbody tr {
  cursor: pointer;
}

.tariff-table tbody tr:hover td,
.tariff-table tbody tr.selected td {
  background: rgb(255 246 237 / 86%);
}

.tariff-detail-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
}

.tariff-detail-kpis > div {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px;
  background: rgb(255 252 249 / 84%);
}

.tariff-detail-kpis span,
.tariff-detail-kpis strong {
  display: block;
}

.tariff-detail-kpis span {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.tariff-detail-kpis strong {
  margin-top: 4px;
  color: var(--typy-text);
  font-size: 16px;
}

.tariff-detail-list {
  padding: 0 18px 12px;
}

.tariff-detail-list .detail-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.tariff-detail-list .detail-row strong {
  overflow-wrap: anywhere;
}

.tariff-detail-panel > .row-actions {
  padding: 0 18px 18px;
}

.tariff-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(280px, 0.9fr);
  gap: 14px;
  padding: 18px;
}

.tariff-summary-bands {
  grid-column: 1 / -1;
}

.tariff-summary-bands .tariff-band-grid {
  padding: 12px 0 0;
}

.tariff-validation-card,
.tariff-summary-card {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  background: rgb(255 255 255 / 82%);
}

.tariff-validation-card h3 {
  margin: 4px 0 2px;
  font-size: 28px;
  letter-spacing: -0.05em;
}

.tariff-validation-card p {
  margin: 0;
  color: var(--typy-text-muted);
  font-weight: 800;
}

.tariff-progress {
  height: 10px;
  margin: 14px 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(226 216 204 / 56%);
}

.tariff-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f8a5b, var(--typy-orange));
}

.tariff-checklist {
  display: grid;
  gap: 8px;
}

.tariff-checklist span {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 900;
}

.tariff-checklist .ok {
  color: #15803d;
  background: var(--success-soft);
}

.tariff-checklist .pending {
  color: #a16207;
  background: var(--warning-soft);
}

.tariff-next-action {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  border-left: 4px solid var(--typy-orange);
  padding-left: 12px;
}

.tariff-next-action span {
  color: var(--typy-text-muted);
  font-weight: 850;
}

.tariff-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 18px;
}

.tariff-band-card,
.tariff-condition-list article {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  background: rgb(255 255 255 / 86%);
}

.tariff-band-card strong,
.tariff-band-card small,
.tariff-band-card em {
  display: block;
}

.tariff-band-card strong {
  margin-top: 14px;
  color: var(--typy-text);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.tariff-band-card small,
.tariff-band-card em {
  margin-top: 5px;
  color: var(--typy-text-muted);
  font-weight: 850;
}

.tariff-condition-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.tariff-condition-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.tariff-condition-list article > span {
  color: var(--typy-orange);
  font-weight: 950;
}

.tariff-history-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.tariff-history-list article {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
}

.tariff-history-list article > span {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--typy-orange);
  box-shadow: 0 0 0 5px rgb(201 95 42 / 12%);
}

.tariff-history-list strong,
.tariff-history-list small {
  display: block;
}

.tariff-history-list small {
  color: var(--typy-text-muted);
  font-weight: 850;
}

.rate-card-sheet {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px;
  background: #fff;
}

.rate-card-sheet.clickable {
  cursor: pointer;
}

.rate-card-sheet.clickable:focus-visible,
.rate-card-sheet.clickable:hover {
  border-color: rgb(44 98 167 / 42%);
  box-shadow: 0 10px 26px rgb(15 23 42 / 8%);
}

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

.btn.compact {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.rate-card-sheet-head strong,
.rate-card-line strong {
  display: block;
  line-height: 1.15;
}

.rate-card-sheet-head span,
.rate-card-line span {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.rate-card-lines {
  display: grid;
  gap: 8px;
}

.rate-card-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  border: 1px solid rgb(226 216 204 / 76%);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgb(255 252 249 / 84%);
}

.rate-card-line b {
  color: var(--typy-navy-900);
  font-size: 14px;
}





























.tariff-active-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 540px);
  border: 1px solid rgb(245 158 11 / 28%);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgb(255 251 235 / 82%);
  color: #7c4a03;
  font-size: 12px;
  font-weight: 850;
}

.tariff-active-warning strong {
  color: #92400e;
  white-space: nowrap;
}

.tariff-cost-groups {
  display: grid;
  gap: 14px;
  padding: 4px;
}

.tariff-cost-group {
  display: grid;
  gap: 10px;
}

.tariff-cost-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.tariff-cost-group-head h4 {
  margin: 0;
  color: var(--typy-text);
  font-size: 14px;
  letter-spacing: -0.02em;
}

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

.tariff-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgb(226 216 204 / 80%);
  border-radius: 16px;
  padding: 12px;
  background: rgb(255 252 249 / 78%);
  cursor: pointer;
}

.tariff-cost-row:hover,
.tariff-cost-row.selected {
  border-color: rgb(201 95 42 / 34%);
  background: #fff7ed;
}

.tariff-cost-row strong,
.tariff-cost-row span,
.tariff-cost-meta b,
.tariff-cost-meta small {
  display: block;
}

.tariff-cost-row > div:first-child span,
.tariff-cost-meta small {
  margin-top: 3px;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.tariff-cost-meta {
  text-align: right;
}

.tariff-cost-meta b {
  color: var(--typy-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

















.info-card,
.mini-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 78%);
}


.mini-card span,
.info-card {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
}

.checkbox-row,
.chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Los `.chip` que son un ENLACE (role="button" con data-action) y no tenian NINGUNA regla: en
   Cobros salian como texto suelto de 17px de alto, pulsable pero sin parecerlo ni llegar al
   objetivo tactil de 24px que pide WCAG 2.5.8. Ahora se ven como lo que son. */
.chip[role="button"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: var(--cr-r-pill);
  border: 1px solid var(--hairline);
  background-color: var(--cr-pill-bg);
  color: var(--cr-orange-deep);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.chip[role="button"]:hover {
  border-color: var(--cr-t-warning-border);
  background-image: var(--cr-hero-wash);
}

.checkbox-row {
  min-height: 44px;
  color: var(--text-primary);
  font-weight: 850;
}

.quote-equipment-checklist {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.quote-equipment-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
  flex-wrap: nowrap;
  cursor: pointer;
}

.quote-equipment-choice input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--brand);
}

.quote-equipment-choice span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quote-equipment-choice small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.detail-grid > div {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 12px;
  background: rgb(255 255 255 / 70%);
}

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

.detail-grid strong {
  display: block;
  margin-top: 4px;
  /* Un valor sin espacios (email largo, IBAN, referencia) se salia de su tarjeta y pisaba el
     campo de al lado. Solo afecta a lo que antes desbordaba. */
  overflow-wrap: anywhere;
}

.quote-summary-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quote-summary-box > div,
.pdf-preview-card,
.sync-count-grid > div,
.sync-map > div {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 76%);
}

.quote-summary-box span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.quote-summary-box strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.quote-billing-section {
  display: grid;
  gap: 14px;
}

/* La barra de pasos del asistente es fija dentro del modal: al saltar a una sección con «Siguiente →»
   (scrollIntoView block:start) tapaba su título. El margen deja el título a la vista (22-oct-2026). */
.quote-builder .workorder-form-section {
  scroll-margin-top: 96px;
}

.quote-billing-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.quote-billing-card,
.quote-material-stock-panel {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 82%);
}

.quote-milestone-editor,
.quote-milestone-rows {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.quote-milestone-help {
  display: grid;
  gap: 12px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.quote-milestone-help strong {
  min-width: 0;
  color: var(--text-primary);
}

.quote-milestone-help span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-milestone-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #fff;
}

.quote-billing-plan-card {
  overflow: visible;
}

.quote-auto-billing-summary {
  display: grid;
  gap: 12px;
}

.quote-auto-billing-summary > strong {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 950;
}

.quote-auto-billing-summary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.quote-auto-billing-rows {
  display: grid;
  gap: 8px;
}

.quote-auto-billing-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgb(226 216 204 / 78%);
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(255 247 240 / 72%));
}

.quote-auto-billing-rows span {
  min-width: 0;
  color: var(--text-secondary);
  font-weight: 850;
}

.quote-auto-billing-rows strong {
  color: var(--brand);
  font-weight: 950;
}

.quote-builder .command-bar {
  position: static;
  margin-top: 4px;
  border-radius: 18px;
}

.quote-milestone-row .field,
.quote-billing-card .field {
  min-width: 0;
  max-width: 100%;
}

.quote-milestone-row input,
.quote-billing-card input,
.quote-billing-card select,
.quote-billing-card textarea {
  min-width: 0;
  max-width: 100%;
}

.quote-milestone-row .compact-btn {
  width: 100%;
  white-space: nowrap;
}

.compact-btn {
  min-height: 40px;
  padding-inline: 12px;
}

.quote-material-stock-panel {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
}

.quote-material-stock-panel strong {
  font-size: 13px;
}

.quote-material-stock-panel span,
.quote-material-stock-panel small {
  color: var(--text-secondary);
  font-weight: 750;
}

.quote-material-stock-panel.success {
  border-color: rgb(42 157 90 / 32%);
  background: rgb(42 157 90 / 8%);
}

.quote-material-stock-panel.warning {
  border-color: rgb(196 134 26 / 36%);
  background: rgb(255 183 77 / 12%);
}

.quote-material-stock-panel.danger {
  border-color: rgb(185 60 48 / 34%);
  background: rgb(185 60 48 / 8%);
}

.quote-material-stock-panel.info {
  border-color: rgb(65 120 190 / 34%);
  background: rgb(65 120 190 / 8%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.quote-total-card {
  border-color: var(--typy-orange-border);
  background: var(--typy-orange-soft);
}

.pdf-command-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
}

.document-library {
  display: grid;
}

.document-row {
  width: 100%;
  display: grid;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  padding: 15px 16px;
  color: var(--text-primary);
  background: transparent;
  text-align: left;
}

.document-row:hover,
.document-row.active {
  background: var(--typy-orange-soft);
}

.pdf-preview-panel {
  padding: 18px;
}

.pdf-preview-card {
  display: grid;
  gap: 14px;
}

.pdf-preview-frame {
  width: 100%;
  min-height: 560px;
  height: calc(1vh * 62);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--cr-r-field);
  background-color: var(--cr-sep);   /* el gris del lector mientras el PDF carga */
}

.pdf-page-mock {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-medium);
  border-radius: 22px;
  color: var(--text-muted);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 248 242 / 80%));
  font-weight: 900;
  text-align: center;
}

.pdf-share-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pdf-share-menu .pdf-share-summary {
  list-style: none;
  cursor: pointer;
}

.pdf-share-menu .pdf-share-summary::-webkit-details-marker {
  display: none;
}

/* CERRADO ES CERRADO. `.pdf-share-popover` lleva `display: grid`, y eso le gana a la forma en que
   el navegador esconde el contenido de un `<details>` cerrado: el panel de «Compartir PDF» se
   pintaba SIEMPRE —161 px de alto, medidos en el navegador el 3-sep-2026— por encima del menu que
   lo contiene, tapando dos de sus siete items («Compartir» y «Copiar enlace» no se podian pulsar,
   comprobado con `elementFromPoint`). Es el mismo descuido que el panel del menu de Acciones
   necesitaba resolver con `:popover-open`: un panel flotante tiene que decir cuando NO se pinta. */
.pdf-share-menu:not([open]) .pdf-share-popover {
  display: none;
}
.pdf-share-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 120;
  min-width: 190px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--typy-border);
  border-radius: 16px;
  padding: 10px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 18px 42px rgb(37 24 12 / 16%);
}

.pdf-share-popover .btn {
  justify-content: flex-start;
  width: 100%;
}









.action-disclosure {
  margin-top: 16px;
}

.action-disclosure > summary {
  list-style: none;
}

.action-disclosure > summary::-webkit-details-marker {
  display: none;
}

.action-disclosure[open] > summary {
  margin-bottom: 14px;
}


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

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


}

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

  .command-topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }


  .command-hero,
  .sync-hero,
  .form-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .pdf-command-grid,
  .sync-map,
  .quote-line-grid,
  .quote-summary-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .command-topbar {
    display: flex;
    gap: 10px;
  }


  .command-create-card {
    padding: 16px;
  }

  .form-section {
    padding: 14px;
  }

  .command-bar {
    border-radius: 22px;
    flex-direction: column;
    position: static;
  }

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

  .workorder-flow-nav {
    position: static;
    border-radius: 22px;
  }

  .flow-step {
    flex: 1 1 140px;
    justify-content: center;
  }

  .contract-choice,
  .workorder-hours-summary {
    grid-template-columns: 1fr;
  }

  .workorders-view.detail-open .workorder-list-panel,
  .workorders-view.detail-open .command-create-card {
    display: block;
  }

}

/* ── tramo 09-clientes (líneas 5152-6643 del antiguo styles.css): Maestro-detalle de entidades, filas de factura, visión de clientes, lector, centro de clientes, directorio, donut fiscal, alertas, responsive 1720 ── */
.entity-master-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(420px, 1.8fr);
  gap: 16px;
  align-items: start;
}

/* Vistas convertidas a "lista a ancho completo + ficha en modal" (clientes/equipos/contratos). */
.entity-master-detail-full,
.equipment-workbench-full {
  grid-template-columns: minmax(0, 1fr);
}


/* Filas de colección dentro del modal que abren el quick-view de su elemento. */
.customer-focus-row.is-clickable {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.customer-focus-row.is-clickable:hover {
  background: rgb(184 84 10 / 6%);
  border-color: rgb(184 84 10 / 28%);
}
.customer-focus-row-go {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--typy-copper-dark, #b8540a);
  opacity: 0.6;
}

.quote-list-main[data-action="quick-view"] {
  cursor: pointer;
}

.entity-list-panel,
.entity-detail-panel {
  min-width: 0;
}

.entity-list-panel .list {
  padding: 12px;
  max-height: 640px;
  overflow: auto;
}

.entity-list-panel .list > .list-row {
  margin-bottom: 10px;
  border: 1px solid rgb(226 216 204 / 78%);
  border-bottom: 1px solid rgb(226 216 204 / 78%);
  border-radius: 14px;
  background: rgb(255 255 255 / 78%);
}

.entity-list-panel .list > .list-row:last-child {
  margin-bottom: 0;
}

.billing-master-detail .entity-list-panel .panel-head p {
  margin: 4px 0 0;
}

.billing-filter-hint {
  margin: 0 18px 10px;
  padding: 10px 12px;
  border: 1px dashed rgb(205 163 109 / 48%);
  border-radius: 12px;
  background: rgb(255 248 239 / 92%);
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.billing-invoice-list {
  gap: 10px;
}

.invoice-list-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.invoice-list-row:hover {
  border-color: rgb(207 112 36 / 38%);
  box-shadow: 0 12px 22px rgb(86 49 17 / 9%);
  transform: translateY(-1px);
}

.invoice-list-row.selected {
  border-color: rgb(207 112 36 / 52%);
  background: linear-gradient(180deg, rgb(255 251 247 / 98%), rgb(255 244 232 / 98%));
  box-shadow: 0 14px 28px rgb(86 49 17 / 12%);
}

.invoice-list-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.invoice-list-row-head strong {
  color: var(--typy-text);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.invoice-list-row-customer {
  color: var(--typy-text);
  font-size: 13px;
  font-weight: 850;
}

.invoice-list-row-meta {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.invoice-list-row-amount {
  color: var(--typy-navy-900);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.list-row.as-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  /* REJILLA, no flex. `.list-row` apila nombre y detalle en dos lineas; el `display: flex` de aqui
     lo pisaba y los ponia en la MISMA linea, asi que en un panel estrecho el nombre se partia en
     dos ("Joaquin / Hontoria") y el correo quedaba pegado al lado. Convertir una fila en boton no
     deberia cambiar como se coloca su contenido. Quien necesite otra cosa se pone su propia
     rejilla, como hace `.customer-list-row`. */
  display: grid;
  font: inherit;
  text-align: left;
  width: 100%;
}

.list-row.as-button:hover {
  background: var(--surface-warm);
}

/* SELECCIONADO Y "EL RATON ENCIMA" NO PUEDEN SER LO MISMO. Compartian regla, asi que pulsar una
   fila que ya estaba bajo el cursor no cambiaba nada visible. Ruben, 28-ago-2026: "lo pulsas,
   cambia el nombre en la tarjeta de al lado pero si no estas muy atento parece que no ha hecho
   nada". Es el patron ya validado del directorio de Usuarios: barra naranja a la izquierda, que
   se ve de reojo sin tener que leer. */
.list-row.as-button.selected {
  background: linear-gradient(90deg, rgb(255 116 24 / 13%), rgb(255 245 238 / 80%));
  box-shadow: inset 3px 0 0 var(--typy-orange);
}

.list-row.as-button.selected strong {
  color: var(--typy-navy-900);
}

.customer-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.customer-list-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.customer-list-copy strong,
.customer-list-copy .muted {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-list-copy strong {
  line-height: 1.08;
}

.customer-list-copy .muted {
  font-size: 12px;
  line-height: 1.28;
}

.customer-list-row .status-pill {
  max-width: 132px;
  white-space: normal;
  justify-self: end;
  text-align: center;
}













































































.customer-command-center {
  display: grid;
  gap: 18px;
}

.customer-command-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--typy-border);
  border-radius: 30px;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 92% 0, rgb(242 101 34 / 12%), transparent 28%),
    linear-gradient(135deg, #fff, #fff8f2);
  box-shadow: 0 18px 46px rgb(37 24 12 / 7%);
}

.customer-command-hero h2 {
  margin: 2px 0 6px;
  font-size: 32px;   /* fijo, el espec del sistema: el clamp llegaba a 58px y esta seccion parecia otro software */
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.customer-command-hero p {
  max-width: 640px;
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 14px;
  font-weight: 500;   /* era 800: un parrafo entero en negrita maxima no es jerarquia, es ruido */
}

.customer-command-metrics {
  display: grid;
  /* auto-fit, NO un número fijo de columnas: esta rejilla la usan tres pantallas con distinto número
     de tarjetas (Clientes 5, Albaranes 5, Proveedores 4) y estaba clavada a 6 columnas, así que
     TODAS dejaban columnas vacías a la derecha — el hueco en blanco que se veía en Proveedores, que
     con 4 tarjetas dejaba dos. Con auto-fit las pistas vacías se colapsan y la fila siempre se
     llena, sea cual sea el número de tarjetas. */
  /* El mínimo es 165px a propósito: el contenedor útil ronda los 930px (hay barra lateral y panel
     derecho), y con 190px solo entraban 4 columnas, así que la 5ª tarjeta de Clientes y Albaranes
     caía sola a una segunda fila. Con 165px entran las 5 y `1fr` las ensancha para llenar la fila. */
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
}

.customer-command-metric {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--typy-border);
  border-radius: 22px;
  padding: 17px 18px;
  background-image: var(--cr-kpi-wash);
  box-shadow: var(--cr-lift-card);
}

.customer-command-metric .metric-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  background: rgb(28 25 23 / 7%);
}

.customer-command-metric .metric-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.customer-command-metric .metric-label {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: none;
}

.customer-command-metric .metric-body strong {
  color: var(--typy-text);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.customer-command-metric .metric-body small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-command-metric.warning {
  border-color: rgb(245 158 11 / 34%);
  background: linear-gradient(180deg, #fff, #fff7ed);
}

.customer-command-metric.warning .metric-icon {
  background: rgb(245 158 11 / 16%);
}

.customer-command-metric.success {
  border-color: rgb(34 197 94 / 24%);
  background: linear-gradient(180deg, #fff, #ecfdf5);
}

.customer-command-metric.success .metric-icon {
  background: rgb(16 185 129 / 16%);
}

.customer-command-metric.info {
  border-color: rgb(59 130 246 / 20%);
  background: linear-gradient(180deg, #fff, #eff6ff);
}

.customer-command-metric.info .metric-icon {
  background: rgb(59 130 246 / 14%);
}

.customer-command-metric.purple {
  border-color: rgb(124 58 237 / 18%);
  background: linear-gradient(180deg, #fff, #f5f3ff);
}

.customer-command-metric.purple .metric-icon {
  background: rgb(124 58 237 / 14%);
}

.customer-command-metric.strong .metric-icon {
  background: rgb(228 103 1 / 14%);
}

.customer-command-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: end;
  border: 1px solid var(--typy-border);
  border-radius: 22px;
  padding: 14px;
  background: rgb(255 255 255 / 88%);
}

.customer-command-toolbar .saved-view-bar-v2,
.customer-command-toolbar .filter-pill-row {
  grid-column: 1 / -1;
}


.customer-directory-panel,
.customer-focus-panel {
  min-width: 0;
}

.customer-directory-list {
  display: grid;
  gap: 10px;
}

/* ── Tabla de clientes (piloto 360) ───────────────────────────────────────── */
.customer-directory-table-wrap {
  overflow-x: auto;
}

.customer-directory-table {
  width: 100%;
  border-collapse: collapse;
}

.customer-directory-table th {
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
  color: var(--typy-text-muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--typy-border);
  white-space: nowrap;
}

.customer-directory-table th.num,
.customer-directory-table td.num {
  text-align: center;
}

.data-table th.num,
.data-table td.num {
  text-align: right;
}

.workorder-sessions-panel {
  margin-top: 12px;
}

.customer-directory-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgb(28 25 23 / 6%);
  vertical-align: middle;
}

.customer-directory-table tr.selected {
  background: rgb(228 103 1 / 7%);
}

.customer-directory-table tr:hover {
  background: rgb(28 25 23 / 3%);
}

.customer-row-select,
.customer-row-name {
  display: grid;
  gap: 1px;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  max-width: 280px;
}

.customer-row-select strong,
.customer-row-name strong {
  color: var(--typy-text);
  font-size: 13.5px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-row-select small,
.customer-row-name small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-directory-table td.num b {
  font-size: 15px;
  font-weight: 950;
}

.customer-next-cell .row-actions {
  margin: 0;
}

/* ── Fila de insights: donut estado fiscal + alertas ──────────────────────── */
.customer-command-insights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: start;
}

.fiscal-donut-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.fiscal-donut {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  -webkit-mask: radial-gradient(circle 40px at center, transparent 98%, #000 100%);
  mask: radial-gradient(circle 40px at center, transparent 98%, #000 100%);
}

.fiscal-donut span {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.fiscal-donut strong {
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: var(--typy-text);
}

.fiscal-donut small {
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
  color: var(--typy-text-muted);
}

.fiscal-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  min-width: 180px;
}

.fiscal-donut-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 850;
  color: var(--typy-text);
}

.fiscal-donut-legend li span {
  flex: 1;
  color: var(--typy-text-muted);
}

.fiscal-donut-legend li b {
  font-weight: 950;
}

.fiscal-donut-legend .dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.dot.danger {
  background: #ef4444;
}

.dot.warning {
  background: #f59e0b;
}

.dot.success {
  background: #10b981;
}

.customer-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.customer-alert-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--typy-border);
  border-left-width: 4px;
  border-radius: 13px;
  background: rgb(255 255 255 / 70%);
}

.customer-alert-list li[role="button"] {
  cursor: pointer;
}

.customer-alert-list li[role="button"]:hover {
  background: rgb(28 25 23 / 4%);
}

.customer-alert-list li.danger {
  border-left-color: #ef4444;
}

.customer-alert-list li.warning {
  border-left-color: #f59e0b;
}

.customer-alert-list li.info {
  border-left-color: #3b82f6;
}

.customer-alert-list li.success {
  border-left-color: #10b981;
}

.customer-alert-list .alert-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.customer-alert-list li strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: var(--typy-text);
}

.customer-alert-list li small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .customer-command-insights {
    grid-template-columns: 1fr;
  }
}















.customer-focus-stats span,
.customer-fiscal-values span,
.customer-missing-fields strong {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}


.customer-focus-block {
  display: grid;
  gap: 12px;
  border: 1px solid var(--typy-border);
  border-radius: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 80%);
}

.customer-focus-block h4 {
  margin: 0;
  color: var(--typy-text);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.customer-focus-block-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.customer-fiscal-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-fiscal-values div {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  padding: 10px;
  background: var(--typy-surface);
}

.customer-fiscal-values strong {
  color: var(--typy-text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.customer-missing-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  border-radius: 14px;
  padding: 10px;
  background: rgb(255 247 237 / 78%);
}

.customer-missing-fields span {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--typy-copper-dark);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.customer-missing-fields.success {
  background: rgb(236 253 245 / 86%);
}

.customer-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.customer-focus-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.customer-focus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-radius: 13px;
  padding: 12px;
  background: var(--typy-surface-soft);
  min-width: 0;
  overflow: hidden;
}

.customer-focus-row-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.customer-focus-row-badge {
  justify-self: start;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--typy-copper-dark);
  background: rgb(255 247 237);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.customer-focus-row strong {
  min-width: 0;
  color: var(--typy-text);
  font-size: 14px;
  line-height: 1.22;
  overflow-wrap: break-word;
  word-break: normal;
}

.customer-focus-row span,
.customer-focus-row small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.34;
  overflow-wrap: break-word;
  word-break: normal;
}

.customer-focus-row small {
  font-size: 12px;
}

@media (max-width: 1720px) {


  .customer-focus-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  .customer-command-metrics {
    /* Igual que arriba: 3 columnas fijas volvían a dejar hueco (5 tarjetas = 3 + 2). */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  .customer-command-hero,
  .customer-focus-hero {
    grid-template-columns: 1fr;
  }

  .customer-command-hero {
    display: grid;
    padding: 18px;
  }

  .customer-command-metrics,
  .customer-command-toolbar,
  .customer-fiscal-values,
  .customer-focus-grid {
    grid-template-columns: 1fr;
  }

}
}

@layer utilidades {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}