@layer legado {
/* estilos/06-facturacion-accesos-e-inspector.css · fichero 6/11 de la hoja HEREDADA (líneas 15309-17504 del antiguo styles.css).
   Cola de facturación, accesos y administración, catálogos de proveedor, paleta e inspector. Tramos internos, en este orden:
     · 18-cola-de-facturacion (15309-15714): Cola de facturación compacta (bq-*), etiquetas de estado, modal de detalle, pedidos de facturación
     · 19-accesos-y-administracion (15715-16446): Administración de accesos, perfiles, ayudas de campo, rejillas de soporte
     · 20-catalogos-proveedor (16447-16787): Catálogos de proveedor S2S
     · 21-paleta-e-inspector (16788-17504): Paleta de órdenes, inspector universal, paneles de facturación e IA, puerta de permisos
   El orden ES la cascada: va tras 05-torre-de-control-y-command-os.css y antes de 07-compras-cristal-y-parte-modal.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 18-cola-de-facturacion (líneas 15309-15714 del antiguo styles.css): Cola de facturación compacta (bq-*), etiquetas de estado, modal de detalle, pedidos de facturación ── */
/* ===== Cola de facturación compacta (tabla + modal) ===== */
.billing-queue {
  margin: 0 18px 18px;
  display: grid;
  gap: 12px;
}
.billing-queue-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.billing-queue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bq-chip {
  border: 1px solid rgb(226 216 204 / 80%);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b5147;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bq-chip.active {
  background: #e46701;
  border-color: #e46701;
  color: #fff;
}
.bq-chip-count {
  font-size: 12px;
  background: rgb(0 0 0 / 8%);
  border-radius: 999px;
  padding: 0 7px;
  min-width: 18px;
  text-align: center;
}
.bq-chip.active .bq-chip-count { background: rgb(255 255 255 / 28%); }
.bq-search {
  flex: 1 1 220px;
  max-width: 320px;
  border: 1px solid rgb(226 216 204 / 80%);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.86rem;
  background: #fff;
}
.billing-queue-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fff7ef;
  border: 1px solid rgb(228 103 1 / 28%);
  border-radius: 12px;
}
.billing-queue-bulkbar .bq-selectall { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.84rem; }
.billing-queue-bulkbar .bq-selcount { color: #7a6f63; font-size: 0.82rem; }
.bq-bulk-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.billing-queue-tablewrap {
  overflow-x: auto;
  border: 1px solid rgb(226 216 204 / 70%);
  border-radius: 14px;
  background: #fff;
}
.billing-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.billing-queue-table thead th {
  text-align: left;
  font-size: 12px;
  text-transform: none;
  color: #948877;
  font-weight: 800;
  padding: 9px 12px;
  border-bottom: 1px solid rgb(226 216 204 / 70%);
  white-space: nowrap;
  background: #faf6f1;
}
.bq-row {
  cursor: pointer;
  border-bottom: 1px solid rgb(226 216 204 / 45%);
  transition: background 0.12s ease;
}
.bq-row:last-child { border-bottom: 0; }
.bq-row:nth-child(even) { background: #fcfaf6; }
.bq-row:hover { background: #fbf1e4; }
.bq-row.selected { background: #fff3e6; }
.bq-row td { padding: 7px 14px; vertical-align: middle; }
.bq-row.tone-ready td.bq-num { box-shadow: inset 4px 0 0 #2fae6a; }
.bq-row.tone-issues td.bq-num { box-shadow: inset 4px 0 0 #e0a000; }
.bq-row.tone-linked td.bq-num { box-shadow: inset 4px 0 0 #7a90c0; }
.bq-row.tone-other td.bq-num { box-shadow: inset 4px 0 0 #c9bcab; }
.bq-num { white-space: nowrap; }
.bq-num strong { display: block; font-weight: 800; font-size: 0.92rem; }
.bq-num .bq-sub { display: block; font-size: 12px; color: #948877; }
.bq-client { font-weight: 600; }
.bq-date { white-space: nowrap; color: #5b5147; }
.bq-format-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgb(0 0 0 / 6%);
  color: #5b5147;
}
.bq-format-pill.format-macsa { background: rgb(122 144 192 / 18%); color: #3f5390; }
.bq-format-pill.format-sub { background: rgb(228 103 1 / 14%); color: #b8540a; }
.bq-check { width: 36px; text-align: center; }
.bq-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgb(150 136 119 / 70%);
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bq-checkbox.on { background: #e46701; border-color: #e46701; }
.bq-go { width: 28px; text-align: center; }
.bq-chevron { color: #b6a895; font-size: 1.2rem; font-weight: 700; }
.bq-truncate { margin: 8px 12px 0; font-size: 0.8rem; }

/* Etiquetas de estado por color (compartidas tabla + modal) */
.bq-status-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
  background: rgb(0 0 0 / 7%);
  color: #5b5147;
}
.bq-status-tag.tag-ready { background: #e6f6ec; color: #1f7a4d; }
.bq-status-tag.tag-issues { background: #fdf0d8; color: #9a6800; }
.bq-status-tag.tag-linked { background: #eaf0fb; color: #3f5390; }
.bq-status-tag.tag-neutral,
.bq-status-tag.tag-other { background: rgb(0 0 0 / 7%); color: #5b5147; }

/* Modal de detalle autocontenido (no reutiliza .panel-head para evitar solapes) */
.bq-modal {
  width: min(1200px, calc(1vw * 94));
  max-height: calc(1vh * 90);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgb(40 30 20 / 28%);
  display: flex;
  flex-direction: column;
}
.bq-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 1px solid rgb(226 216 204 / 60%);
  background: #faf7f2;
}
.bq-modal-head.bq-tone-ready { background: #f4fbf6; }
.bq-modal-head.bq-tone-issues { background: #fdf8ee; }
.bq-modal-head.bq-tone-linked { background: #f4f7fd; }
.bq-modal-head.bq-tone-neutral,
.bq-modal-head.bq-tone-other { background: #faf7f2; }
.bq-modal-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bq-modal-eyebrow { font-size: 12px; text-transform: none; color: #948877; font-weight: 800; }
.bq-modal-num { font-size: 1.3rem; font-weight: 800; color: #2c2722; line-height: 1.15; }
.bq-modal-close {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid rgb(150 136 119 / 45%);
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  color: #5b5147;
  line-height: 1;
}
.bq-modal-close:hover { background: #f3ece3; }
.bq-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.bq-modal-status { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}
.bq-modal-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bq-modal-field span { font-size: 12px; text-transform: none; color: #948877; font-weight: 800; }
.bq-modal-field strong { font-weight: 700; color: #2c2722; word-break: break-word; }
.bq-modal-issues { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; background: #fdf8ee; border: 1px solid rgb(228 103 1 / 22%); border-radius: 12px; }
.bq-modal-issues-label { font-size: 12px; text-transform: none; color: #b8540a; font-weight: 800; }
.bq-modal-issue-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid rgb(226 216 204 / 60%);
}
@media (max-width: 560px) {
  .bq-modal-grid { grid-template-columns: 1fr; }
  .bq-client { max-width: 140px; }
}

.billing-order-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgb(226 216 204 / 78%);
  border-radius: 20px;
  padding: 16px;
  background: #fff;
}

.billing-order-card.ready {
  border-color: rgb(31 122 77 / 24%);
  background: #f8fcf9;
}

.billing-order-card.review {
  border-color: rgb(183 121 31 / 28%);
  background: #fffaf1;
}

.billing-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.billing-order-head strong {
  display: block;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.billing-order-head span {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.billing-order-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.billing-order-grid > div {
  display: grid;
  gap: 3px;
  border: 1px solid rgb(226 216 204 / 72%);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgb(255 252 249 / 72%);
}

.billing-order-grid span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.billing-order-grid strong {
  color: var(--typy-text);
  font-size: 14px;
  line-height: 1.3;
}

.billing-order-issues {
  gap: 8px;
}

.panel.stack .list .list-row {
  margin: 0;
  border: 1px solid rgb(226 216 204 / 72%);
  border-bottom: 1px solid rgb(226 216 204 / 72%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 78%);
  padding: 14px 16px;
}






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

.admin-capability-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: #fff;
}

.admin-capability-check input {
  margin-top: 3px;
}

.admin-capability-check span {
  display: grid;
  gap: 3px;
}

.admin-capability-check strong {
  color: var(--typy-navy-900);
  font-size: 13px;
  font-weight: 950;
}

.admin-capability-check small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-capability-check em {
  align-self: center;
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.admin-capability-check.is-inherited {
  background: rgb(31 122 77 / 4%);
}

.admin-capability-source {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 23px;
  padding: 0 6px;
  border-radius: 99px;
  background: rgb(31 122 77 / 11%);
  color: var(--typy-success);
  font-size: 12px;
  font-weight: 900;
}

/* ── tramo 19-accesos-y-administracion (líneas 15715-16446 del antiguo styles.css): Administración de accesos, perfiles, ayudas de campo, rejillas de soporte ── */
/* Administración de accesos: directorio breve + ficha de edición clara. */
.admin-access-workspace {
  display: grid;
  /* `auto-fit` con un minimo que puede ceder, en vez de dos minimos FIJOS. Antes eran
     `minmax(560px, …) minmax(500px, …)`: 1.060px de minimos mas 24 de hueco, metidos en un
     contenedor que a 1390px de pantalla mide 726. Se salia por definicion, y la regla de 1280px
     bajaba a 440+420 = 860, que tampoco cabe. Un minimo fijo no se adapta a nada: solo mueve el
     ancho al que revienta.
     Con `min(420px, 100%)` la columna nunca pide mas de lo que hay, y cuando no caben dos se pasa
     sola a una. Medido: la pagina se salia 6px a 1390px; ahora, cero. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 24px;
  align-items: start;
  max-width: 1720px;
  margin: 0 auto;
}

.admin-directory-panel {
  min-width: 0;
  padding: 0;
  position: static;
}

.admin-directory-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--typy-border);
}

.admin-directory-heading h3 {
  margin: 3px 0;
  color: var(--typy-navy-900);
  font-size: 18px;
}

.admin-directory-heading p {
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-user-table-wrap { max-height: min(calc(1vh * 70), 760px); }
.admin-user-table { min-width: 100%; table-layout: fixed; }
.admin-user-table th:nth-child(1) { width: 38%; }
.admin-user-table th:nth-child(2) { width: 21%; }
.admin-user-table th:nth-child(3) { width: 17%; }
.admin-user-table th:nth-child(4) { width: 24%; }   /* era 12% = 53px; el boton necesita 82 mas su aire */
.admin-user-table tbody tr { cursor: default; }
.admin-user-table td:last-child { text-align: right; padding-right: 16px; }
.admin-user-table td:last-child .btn { padding: 7px 12px; white-space: nowrap; }
.admin-user-table tbody tr.is-selected { background: linear-gradient(90deg, rgb(255 116 24 / 12%), rgb(255 248 243 / 82%)); box-shadow: inset 4px 0 0 var(--typy-orange); }
.admin-user-table-person { display: flex; gap: 11px; align-items: center; min-width: 0; }
.admin-user-table-person > span:last-child { display: grid; gap: 3px; min-width: 0; }
.admin-user-table-person strong, .admin-user-table-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-table-person strong { color: var(--typy-navy-900); font-size: 13px; }
.admin-user-table-person small { color: var(--typy-text-muted); font-size: 12px; font-weight: 700; }
.status-label { display: inline-flex; gap: 6px; align-items: center; color: var(--typy-success); font-size: 12px; font-weight: 850; }
.status-label i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(34 145 78 / 12%); }
.status-label.is-inactive { color: var(--typy-text-muted); }





.admin-user-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--typy-navy-900);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}







.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--typy-success);
  box-shadow: 0 0 0 3px rgb(34 145 78 / 12%);
}

.status-dot.is-inactive {
  background: var(--typy-text-muted);
  box-shadow: none;
}


.admin-access-detail {
  min-width: 0;
}

.admin-user-editor {
  display: grid;
  gap: 16px;
  max-width: none;
  margin: 0 auto;
  padding: 20px;
}

/* Los perfiles son una entidad propia: no se mezclan con la ficha de una persona. */
.admin-section-tabs {
  display: flex;
  gap: 8px;
  max-width: 1720px;
  margin: 0 auto 18px;
  padding: 7px;
  border: 1px solid var(--typy-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--typy-shadow-sm);
}

.admin-section-tabs button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--typy-text-muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.admin-section-tabs button:hover { background: var(--typy-surface-soft); color: var(--typy-navy-900); }
.admin-section-tabs button.is-active {
  background-color: var(--ty-marca-accion, #c05600);   /* era var(--typy-orange): 3,03:1 */
  color: #fff;
  box-shadow: 0 5px 14px rgb(160 73 0 / 25%);
}




.admin-roles-loading { display: grid; gap: 5px; max-width: 1720px; margin: 0 auto; padding: 24px; }
.admin-roles-loading span { color: var(--typy-text-muted); font-size: 13px; font-weight: 700; }

@media (max-width: 1280px) {
  /* Solo el hueco: el reparto ya lo resuelve `auto-fit` arriba, a cualquier ancho y sin puntos de
     corte que adivinar. Aqui habia otros dos minimos fijos que tampoco cabian. */
  .admin-access-workspace { gap: 16px; }
}

.admin-user-editor-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--typy-border);
}

.admin-user-editor-head h3 {
  margin: 3px 0 5px;
  color: var(--typy-navy-900);
  font-size: clamp(20px, calc(1vw * 1.7), 28px);
}

.admin-user-editor-head p {
  max-width: 690px;
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-editor-section {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--typy-border);
  border-radius: 14px;
  background: var(--typy-surface-soft);
}

.admin-editor-basics {
  background: #fff;
}

.admin-editor-section-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.admin-editor-section-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgb(255 116 24 / 13%);
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-weight: 950;
}

.admin-editor-section-heading h4 {
  margin: 1px 0 3px;
  color: var(--typy-navy-900);
  font-size: 15px;
}

.admin-editor-section-heading p {
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-user-editor label > small {
  color: var(--typy-text-muted);
  font-weight: 700;
}




.admin-profile-control { display: grid; gap: 6px; align-content: start; }
.admin-profile-control select,
.admin-profile-control strong { min-height: 42px; padding: 9px 11px; border: 1px solid var(--typy-border); border-radius: 10px; background: #fff; color: var(--typy-navy-900); font-size: 14px; font-weight: 850; }
.admin-profile-control strong { display: flex; align-items: center; }
.admin-profile-control small { color: var(--typy-text-muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.admin-profile-editor-link { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid rgb(255 116 24 / 28%); border-radius: 11px; background: linear-gradient(90deg, rgb(255 116 24 / 8%), transparent); }
.admin-profile-editor-link span { display: grid; gap: 3px; }
.admin-profile-editor-link strong { color: var(--typy-navy-900); font-size: 13px; }
.admin-profile-editor-link small { color: var(--typy-text-muted); font-size: 12px; font-weight: 700; }

.admin-user-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 11px 15px;
  border: 1px solid rgb(255 116 24 / 42%);
  border-radius: 14px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 28px rgb(20 31 54 / 15%);
  backdrop-filter: blur(12px);
}

.admin-user-savebar > span {
  display: grid;
  gap: 2px;
}

.admin-user-savebar strong {
  color: var(--typy-navy-900);
  font-size: 13px;
}

.admin-user-savebar small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-user-savebar .form-actions {
  margin: 0;
  flex-wrap: nowrap;
}





.admin-create-user-panel {
  max-width: 1720px;
  margin: 18px auto 0;
  overflow: hidden;
}

.admin-create-user-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.admin-create-user-panel > summary::-webkit-details-marker {
  display: none;
}

.admin-create-user-panel > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.admin-create-user-panel summary strong {
  color: var(--typy-navy-900);
  font-size: 15px;
}

.admin-create-user-panel summary small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-create-user-panel > form {
  padding: 0 18px 18px;
}

.field-help {
  margin: 2px 0 9px;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.admin-permission-field {
  border-top: 0;
  padding-top: 16px;
}

.admin-permission-catalog {
  display: grid;
  gap: 10px;
}

.admin-permission-group {
  overflow: hidden;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.admin-permission-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  background: var(--typy-surface-soft);
  cursor: pointer;
  list-style: none;
}

.admin-permission-group > summary::-webkit-details-marker {
  display: none;
}

.admin-permission-group > summary::after {
  content: "⌄";
  order: 3;
  color: var(--typy-copper-dark);
  font-size: 16px;
  font-weight: 900;
  transition: transform .16s ease;
}

.admin-permission-group[open] > summary {
  border-bottom: 1px solid var(--typy-border);
  background: rgb(255 116 24 / 7%);
}

.admin-permission-group[open] > summary::after {
  transform: rotate(180deg);
}

.admin-permission-group > summary > span {
  display: grid;
  gap: 3px;
}

.admin-permission-group > summary strong {
  color: var(--typy-navy-900);
  font-size: 13px;
}

.admin-permission-group > summary small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.admin-permission-group > summary em {
  flex: 0 0 auto;
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-permission-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-height: 65px;
  padding: 10px 11px;
  border-right: 1px solid var(--typy-border);
  border-bottom: 1px solid var(--typy-border);
  background: rgb(255 255 255 / 62%);
  cursor: pointer;
}

.admin-permission-row:nth-child(2n) {
  border-right: 0;
}

.admin-permission-row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.admin-permission-row:hover,
.admin-permission-row.is-granted {
  background: rgb(255 116 24 / 8%);
}

.admin-permission-row.is-inherited {
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: default;
  background: rgb(31 122 77 / 4%);
}

.admin-permission-source {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 23px;
  padding: 0 6px;
  border-radius: 99px;
  background: rgb(31 122 77 / 11%);
  color: var(--typy-success);
  font-size: 12px;
  font-weight: 900;
}

.admin-permission-row input {
  margin-top: 3px;
  accent-color: var(--typy-orange);
}

.admin-permission-row span {
  display: grid;
  gap: 3px;
}

.admin-permission-row strong {
  color: var(--typy-navy-900);
  font-size: 12px;
  line-height: 1.25;
}

.admin-permission-row small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.admin-permission-row em {
  align-self: center;
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.admin-permission-unlimited {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgb(255 116 24 / 36%);
  border-radius: var(--radius-md);
  background: rgb(255 116 24 / 8%);
}

.admin-permission-unlimited strong {
  color: var(--typy-copper-dark);
}

.admin-permission-unlimited span {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ops-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.ops-support-grid > .section-panel,
.ops-support-grid > .panel {
  min-width: 0;
}

.account-grid,
.entity-master-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
  gap: 16px;
}

  .customer-master-detail {
    grid-template-columns: 1fr;
    gap: 18px;
  }

.subcontractor-master-detail .entity-detail-panel {
  overflow: hidden;
}

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


@media (max-width: 1180px) {
  .command-grid-v2,
  .command-grid-hero,
  .customer-master-layout {
    grid-template-columns: 1fr;
  }

  .entity-detail-panel {
    position: static;
  }




  .ops-main-grid.command-grid-v2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ops-main-grid.command-grid-v2 > .span-3,
  .ops-main-grid.command-grid-v2 > .span-4,
  .ops-main-grid.command-grid-v2 > .span-5,
  .ops-main-grid.command-grid-v2 > .span-7,
  .ops-main-grid.command-grid-v2 > .span-8 {
    grid-column: span 3;
  }
}

/* ── tramo 20-catalogos-proveedor (líneas 16447-16787 del antiguo styles.css): Catálogos de proveedor S2S ── */
/* Catálogos de proveedor S2S: cockpit de compras, no escaparate de comercio electrónico. */
.supplier-s2s-shell { display: grid; gap: var(--ty-e-4); }
.supplier-s2s-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ty-e-4); }
.supplier-s2s-head h2, .supplier-s2s-connection h3 { margin: 0; }
.supplier-s2s-head p { max-width: 70ch; margin-bottom: 0; }
.supplier-s2s-connections { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ty-e-3); }
.supplier-s2s-connection { display: grid; align-content: start; gap: var(--ty-e-3); }
.supplier-s2s-connection > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ty-e-3); }
.supplier-s2s-connection dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ty-e-2); margin: 0; }
.supplier-s2s-connection dl div { padding: var(--ty-e-2); border: 1px solid var(--border-soft); border-radius: var(--ty-r-2); background-color: var(--surface-muted); }
.supplier-s2s-connection dt { color: var(--muted); font-size: var(--ty-t-micro); }
.supplier-s2s-connection dd { margin: var(--ty-e-1) 0 0; font-weight: 700; overflow-wrap: anywhere; }
.supplier-s2s-catalog .toolbar { align-items: end; margin-bottom: var(--ty-e-3); }
.supplier-s2s-catalog .toolbar .field { flex: 1 1 360px; }

@media (max-width: 720px) {
  .supplier-s2s-head { display: grid; }
  .supplier-s2s-connection dl { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .command-module {
    gap: 12px;
  }

  .page-intro-v2 {
    /* LA REGLA ESTABA MUERTA Y NADIE LO SABIA. Aqui solo habia `grid-template-columns: 1fr`, pero
       `.page-intro-v2` es `display: flex` desde el rediseño (linea ~18895, DESPUES de este bloque
       y con la misma especificidad, asi que gana). En un contenedor flex, `grid-template-columns`
       no hace absolutamente nada: la cabecera nunca se apilaba en pantalla estrecha.
       Consecuencia medida a 492px: la columna de acciones se quedaba en 64px —dentro de una
       pantalla de 492— y los botones salian con 0,8px de aire en vez de 17. «Configuración» se
       pasaba 19,7px de su propio boton. Seis botones en cinco pantallas.
       Ahora se apila de verdad. Se deja tambien la linea de rejilla por si alguien lo devuelve a
       grid: las dos formas quedan cubiertas y la regla no vuelve a morirse en silencio. */
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .page-intro-side {
    justify-items: stretch;
  }

  .page-actions {
    display: grid;
    /* `minmax(11rem, 1fr)` y NO `minmax(0, 1fr)`. Con minimo CERO cada boton podia encogerse hasta
       nada, y como el relleno no se encoge con el, el texto se salia por encima de el: medido a
       492px, «Perfiles tecnicos» tenia 0,6px de aire a cada lado en vez de 18, y lo mismo
       «Configuracion», «Importar con IA», «Importar extracto», «Reglas globales» y «Usuarios y
       roles». Seis botones en cinco pantallas, todos por el mismo cero.
       Con un minimo real, cuando dos no caben se pasa solo a una columna en vez de aplastarlos. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .page-actions .btn,
  .page-actions button {
    width: 100%;
  }




  .ops-main-grid.command-grid-v2 {
    grid-template-columns: 1fr;
  }

  .ops-main-grid.command-grid-v2 > * {
    grid-column: 1 / -1;
  }

  .entity-master-detail,
  .account-grid,
  .grid-two,
  .admin-v2-grid,
  .admin-access-layout,
  .admin-access-workspace,
  .pdf-command-grid {
    grid-template-columns: 1fr;
  }

  .admin-directory-panel {
    position: static;
  }


  .admin-user-editor {
    max-width: none;
  }


  .admin-permission-list {
    grid-template-columns: 1fr;
  }

  .admin-permission-row,
  .admin-permission-row:nth-child(2n),
  .admin-permission-row:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--typy-border);
  }

  .admin-permission-row:last-child {
    border-bottom: 0;
  }

  .admin-user-editor-head,
  .admin-user-savebar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-user-savebar .form-actions {
    width: 100%;
  }



  .admin-user-savebar .form-actions .btn {
    flex: 1;
  }

  .sync-operation-card,
  .sync-operation-card.compact {
    grid-template-columns: 1fr;
  }

  .sync-operation-meta {
    justify-items: start;
  }




}

@media (max-width: 560px) {
  .content {
    padding-inline: 10px;
  }

  .page-intro-v2,
  .page-intro-copy,
  .page-intro-side,
  .status-row,
  .page-actions,
  .filter-bar-v2,
  .saved-view-bar-v2,
  .workorders-view,
  .workorder-detail-grid,
  .detail-panel,
  .detail-section,
  .workorder-tabs {
    min-width: 0;
    max-width: 100%;
  }

  .page-intro-copy h2 {
    font-size: 28px;
  }

  .page-intro-copy p {
    font-size: 13px;
  }

  .page-actions,
  .critical-strip-v2,
  .decision-list-v2,
  .customer-vision-kpis,
  .customer-board-metrics {
    grid-template-columns: 1fr;
  }






  .filter-bar-v2 {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .filter-bar-v2 > .search-input,
  .sort-control,
  .saved-view-bar-v2 {
    width: 100%;
    min-width: 0;
  }

  .sort-control {
    flex: 1 1 auto;
  }

  .saved-view-bar-v2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .saved-view-bar-v2 button {
    flex: 0 0 auto;
  }

  .panel,
  .section-panel,
  .page-intro-v2,
  .critical-item-v2,
  .decision-item-v2 {
    border-radius: var(--radius-md);
  }

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

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

@media (max-width: 900px) {
  .field-role .top-command-bar.command-topbar {
    position: sticky;
    top: 0;
    /* `--z-sticky` no se definio nunca: quedaba en `auto` y la barra pegada perdia su contexto de
       apilamiento, justo en el rol de tecnico (.field-role, app.js:970) y justo en el movil. Se usa
       `--z-topbar`, que ya existe (70) y es literalmente lo que este elemento ES, en vez de inventar
       otro token. Queda por debajo de --z-mobile-nav (90), que es lo correcto. */
    z-index: var(--z-topbar);
    padding: 8px 12px;
    background: rgb(246 241 234 / 94%);
    backdrop-filter: blur(14px);
  }

  .technician-hero,
  .field-shift-grid,
  .field-shift-grid.secondary {
    grid-template-columns: 1fr;
  }

  .technician-hero {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

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

  .field-action-grid .btn,
  .field-service-card .row-actions .btn {
    flex: 1 1 150px;
  }

  .field-timeline-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .field-timeline-row .status-pill,
  .field-timeline-row .status-badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .field-role .content {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .field-service-body > strong {
    font-size: 16px;
  }

  .field-checks span {
    flex: 1 1 120px;
    text-align: center;
  }
}

/* ── tramo 21-paleta-e-inspector (líneas 16788-17504 del antiguo styles.css): Paleta de órdenes, inspector universal, paneles de facturación e IA, puerta de permisos ── */
/* Phase 3: functional command palette, inspector and actionable filters */
.command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: start center;
  padding: calc(var(--topbar-height) + 22px) 18px 18px;
  background: rgb(7 17 31 / 42%);
  backdrop-filter: blur(10px);
}

.command-palette {
  width: min(760px, 100%);
  max-height: min(calc(1vh * 78), 760px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fffaf4 0%, #ffffff 42%, #f8f2ea 100%);
  box-shadow: var(--shadow-floating);
}

.command-palette-head,
.inspector-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--typy-border);
}

.command-palette-head h2,
.inspector-hero h3 {
  margin: 0;
  letter-spacing: -0.03em;
}

.command-palette-search {
  display: grid;
  gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--typy-border);
}

.command-palette-search span {
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.command-palette-search input {
  width: 100%;
  border: 1px solid var(--typy-border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 750;
  background: #fff;
}

.command-palette-results {
  overflow: auto;
  padding: 12px;
}

.command-group {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.command-group > strong {
  padding: 6px 8px 2px;
  color: var(--typy-text-soft);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--typy-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.command-item:hover,
.command-item.active {
  border-color: var(--typy-border-strong);
  background: #fff;
  box-shadow: var(--shadow-subtle);
}

.command-item b,
.command-item small,
.command-item em {
  display: block;
}

.command-item b {
  font-size: 14px;
}

.command-item small {
  margin-top: 3px;
  color: var(--typy-text-muted);
  font-weight: 650;
}

.command-item em {
  flex: 0 0 auto;
  border: 1px solid var(--typy-border);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: none;
}

.inspector-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgb(7 17 31 / 38%);
  backdrop-filter: blur(3px);
}

.universal-inspector {
  position: fixed;
  inset: 0;
  z-index: 1101;
  margin: auto;
  width: min(1280px, calc(calc(1vw * 100) - 64px));
  height: max-content;
  max-height: min(calc(1vh * 92), 1120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--typy-border-strong);
  border-radius: 22px;
  background: var(--typy-surface);
  box-shadow: 0 28px 70px rgb(0 0 0 / 30%);
  animation: appModalIn 0.16s ease;
  /* Container query: decidir el layout interno según el ancho REAL del modal,
     no según el viewport (un carril estrecho dentro de pantalla ancha rompía). */
  container-type: inline-size;
  container-name: inspector;
}

.inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 6px 18px;
}

/* Panel de facturación: 1 columna por defecto (seguro en modal estrecho)… */
.universal-inspector .workorder-billing-compact {
  grid-template-columns: 1fr;
  gap: 20px;
}
/* …y 2 columnas cuando el modal es ancho, para aprovechar el espacio sin apretar. */
@container inspector (min-width: 700px) {
  .universal-inspector .workorder-billing-compact {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.85fr);
  }
}

/* Resumen rápido: mucho más aire para que no se vea denso. */
.universal-inspector .inspector-hero,
.universal-inspector .inspector-section,
.universal-inspector .billing-prep-panel.compact,
.universal-inspector .technician-workorder-gate,
.universal-inspector .technical-readiness-panel {
  margin: 18px 22px;
  padding: 22px 24px;
  border-radius: 18px;
}

.universal-inspector .inspector-hero h3 {
  font-size: 26px;
  margin-top: 4px;
}

.universal-inspector .inspector-hero p,
.universal-inspector .inspector-section p {
  font-size: 15px;
  line-height: 1.5;
}

.universal-inspector .inspector-section strong,
.universal-inspector .billing-prep-panel h3 {
  font-size: 19px;
}

.universal-inspector .inspector-checks {
  margin: 18px 22px;
  gap: 12px;
}

.universal-inspector .inspector-checks span {
  padding: 14px 16px;
  font-size: 15px;
}

.universal-inspector .billing-prep-panel.compact {
  gap: 16px;
}

.universal-inspector .billing-prep-panel .detail-list.compact,
.universal-inspector .billing-prep-panel .row-actions {
  margin: 0;
}

.universal-inspector .workorder-billing-blockers {
  gap: 10px;
}

.universal-inspector .detail-row {
  padding: 14px 4px;
  gap: 18px;
  font-size: 15px;
}

.universal-inspector .status-pill {
  font-size: 13px;
  padding: 7px 12px;
}

.universal-inspector .row-actions {
  gap: 12px;
}

.universal-inspector .row-actions .btn {
  padding: 12px 18px;
  font-size: 15px;
}

.universal-inspector .permission-gate {
  padding: 16px 18px;
  gap: 12px;
}

/* Colecciones del cliente (partes/equipos/presupuestos/facturas) dentro del modal:
   una columna por defecto, dos cuando el modal es ancho. */
.universal-inspector .inspector-collections {
  margin: 18px 22px;
  gap: 14px;
}
@container inspector (min-width: 700px) {
  .universal-inspector .inspector-collections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inspector-hero,
.inspector-section,
.technician-workorder-gate,
.technical-readiness-panel,
.billing-prep-panel {
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-lg);
  background: var(--typy-surface-soft);
}

.inspector-hero p,
.inspector-section p,
.technician-workorder-gate p,
.technical-readiness-panel p {
  margin: 6px 0 0;
  color: var(--typy-text-muted);
  font-weight: 650;
}

.technical-readiness-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.technical-readiness-panel.success {
  background: linear-gradient(135deg, rgb(246 252 248), #fff);
}

.technical-readiness-panel.warning {
  background: linear-gradient(135deg, rgb(255 249 240), #fff);
}

.ai-review-panel {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(247 250 252), #fff);
}

.ai-review-panel.success {
  background: linear-gradient(135deg, rgb(246 252 248), #fff);
}

.ai-review-panel.warning {
  background: linear-gradient(135deg, rgb(255 249 240), #fff);
}

.ai-review-panel.danger {
  background: linear-gradient(135deg, rgb(255 246 244), #fff);
}

.ai-review-items {
  display: grid;
  gap: 10px;
}

.ai-review-item,
.ai-review-suggestion {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  background: #fff;
}

button.ai-review-item {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.ai-review-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--soft-shadow);
}

.ai-review-item span,
.ai-review-suggestion span {
  color: var(--typy-text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: none;
}

.ai-review-item p,
.ai-review-suggestion p {
  margin: 0;
  color: var(--typy-text);
  font-weight: 650;
  white-space: pre-wrap;
}

.ai-review-suggestion .row-actions {
  justify-content: flex-end;
  margin-top: 4px;
}

.quote-briefing-message {
  border-color: rgba(246, 91, 20, 0.22);
}

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

.quote-briefing-followup {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.quote-briefing-followup strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 900;
}

.quote-briefing-followup ul {
  margin: 0;
  padding-left: 20px;
  color: var(--typy-text);
  font-weight: 700;
}

.visit-briefing-checklist,
.visit-briefing-questions {
  display: grid;
  gap: 8px;
}

.visit-briefing-checklist > strong,
.visit-briefing-questions > strong {
  font-weight: 900;
}

.visit-briefing-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.visit-briefing-check span {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: none;
}

.visit-briefing-check.success span {
  color: #166534;
  background: #dcfce7;
}

.visit-briefing-check.warning span {
  color: #9a3412;
  background: #ffedd5;
}

.visit-briefing-check small {
  grid-column: 2;
  color: var(--typy-text-muted);
  font-weight: 700;
}

.visit-briefing-questions ul {
  margin: 0;
  padding-left: 20px;
  color: var(--typy-text);
  font-weight: 700;
}

.field-label-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-label-actions label {
  margin: 0;
}

.ai-field-rewrite-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 10px;
}

.ai-review-item small {
  color: var(--typy-text-muted);
  font-weight: 750;
}

.ai-review-item.danger {
  border-color: rgb(185 28 28 / 28%);
}

.ai-review-item.warning {
  border-color: rgb(245 158 11 / 34%);
}

.ai-review-item.info {
  border-color: rgb(37 99 235 / 24%);
}

.ai-review-suggestions {
  display: grid;
  gap: 10px;
}

.gate-list {
  margin: 0;
  padding-left: 18px;
  color: var(--typy-text-muted);
}

.inspector-checks,
.billing-prep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 16px;
}

.inspector-checks span,
.billing-prep-check {
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  padding: 10px;
  background: #fff;
  font-weight: 850;
}

.inspector-checks .success,
.billing-prep-check.success {
  border-color: rgb(31 122 77 / 24%);
  background: rgb(31 122 77 / 8%);
  color: var(--typy-success);
}

.inspector-checks .warning,
.billing-prep-check.warning {
  border-color: rgb(183 121 31 / 26%);
  background: rgb(183 121 31 / 9%);
  color: var(--typy-warning);
}

.billing-prep-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #fffaf3, #ffffff);
}

.billing-prep-panel.compact {
  margin: 12px 16px;
}

.billing-prep-panel .detail-list.compact {
  margin: 0 16px;
}

.billing-prep-panel .row-actions {
  margin: 0 16px;
}

.billing-resolution-preview {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fffaf3, #ffffff);
}

.billing-resolution-preview .detail-list.compact {
  margin: 0;
}

.billing-resolution-blockers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-prep-check strong,
.billing-prep-check span {
  display: block;
}

.billing-prep-check span {
  margin-top: 4px;
  color: var(--typy-text-muted);
  font-size: 12px;
}

.permission-gate {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 1px dashed rgb(183 121 31 / 45%);
  border-radius: var(--radius-md);
  padding: 12px;
  background: rgb(183 121 31 / 7%);
}

.permission-gate ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--typy-text-muted);
}

.filter-result-count {
  align-self: center;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 850;
}

.saved-view-bar-v2 button[data-action="clear-saved-view"] {
  border-style: dashed;
}

.row-actions .btn.ghost,
.btn.ghost {
  background: transparent;
}

@media (max-width: 760px) {
  .command-palette-overlay {
    align-items: stretch;
    padding: 10px;
  }

  .command-palette {
    max-height: calc(calc(1vh * 100) - 24px);
  }

  .universal-inspector {
    width: calc(calc(1vw * 100) - 16px);
    max-height: calc(calc(1vh * 100) - 16px);
  }

  .inspector-checks,
  .agenda-visit-summary-grid,
  .billing-prep-grid {
    grid-template-columns: 1fr;
  }

  .agenda-visit-helper-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .tariff-page-header,
  .tariff-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tariff-header-actions,
  .tariff-toolbar .row-actions {
    justify-content: flex-start;
  }

  .tariff-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .tariff-workspace {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

  .tariff-summary-grid {
    grid-template-columns: 1fr;
  }

  .tariff-condition-list article {
    grid-template-columns: 1fr;
  }

  .tariff-cost-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

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






}
}

@layer utilidades {
  @media (max-width: 900px) {
    .ops-main-grid.command-grid-v2 > * { grid-column: 1 / -1; }
  }
}