/* ============================================================ */
/* PUNTO · Componentes reutilizables                             */
/* Botones, pills, cards, formularios, toasts                    */
/* ============================================================ */

@import url('tokens.css');

/* ============ BOTONES ============ */
/* Un principal por pantalla (acento, pastilla); secundarios fantasma; destructivos en
   rojo. Todos en pastilla. Con puntero táctil, al menos 44 px de alto. */
.btn {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radio-pastilla);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-boton);
  color: var(--texto-sobre-relleno);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-boton-hover);
}

/* Fantasma con borde */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--ink-faint);
  background: var(--bg-hover);
}

/* Fantasma sin borde */
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--ink);
}

/* Destructivo: texto rojo sobre su fondo suave (contraste ≥ 4.5:1 en los dos modos) */
.btn-danger {
  background: var(--danger-soft);
  color: var(--danger-texto);
}
.btn-danger:hover:not(:disabled) {
  border-color: var(--danger);
}
/* Destructivo discreto: solo el texto en rojo. Funciona con o sin .btn; objetivo de 44 px. */
.btn-texto-peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--danger-texto);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn-texto-peligro:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.btn-texto-peligro:hover:not(:disabled) {
  background: var(--danger-soft);
}
/* Aviso (variante 'warning' de PuntoUI.confirmar) */
.btn-aviso {
  background: var(--warning-soft);
  color: var(--warning-texto);
}
.btn-aviso:hover:not(:disabled) {
  border-color: var(--warning);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}
.btn-sm svg {
  width: 13px;
  height: 13px;
}

@media (pointer: coarse) {
  .btn,
  .btn-sm { min-height: 44px; }
}

/* ============ FORMULARIOS ============ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field-label,
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.field-input,
.form-input {
  min-height: 40px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radio-control);
  color: var(--ink);
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-input { height: 40px; }
textarea.field-input,
textarea.form-input {
  height: auto;
  padding: 8px 12px;
  line-height: 1.5;
}
.field-input:focus,
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.field-input::placeholder,
.form-input::placeholder {
  color: var(--ink-faint);
}
.field-input:disabled,
.form-input:disabled {
  background: var(--bg-soft);
  color: var(--ink-muted);
  cursor: not-allowed;
}
.field-hint {
  font-size: 12px;
  color: var(--ink-muted);
}
.field-error {
  font-size: 12px;
  color: var(--danger-texto);
  font-weight: 500;
}
.field.has-error .field-input {
  border-color: var(--danger);
}

/* ============ PASTILLAS (estado) ============ */
/* .pill lleva punto (así estaba y así lo usan las pantallas); .pill-punto es el nombre
   explícito del mismo componente; .pill.sin-punto lo quita. */
.pill,
.pill-punto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radio-pastilla);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill::before,
.pill-punto::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radio-circulo);
  background: currentColor;
  flex-shrink: 0;
}
.pill.sin-punto::before { display: none; }
.pill.success, .pill-punto.success { background: var(--accent-soft); color: var(--accent-texto); }
.pill.warn, .pill-punto.warn { background: var(--warning-soft); color: var(--warning-texto); }
.pill.danger, .pill-punto.danger { background: var(--danger-soft); color: var(--danger-texto); }
.pill.info, .pill-punto.info { background: var(--info-soft); color: var(--info-texto); }
.pill.muted, .pill-punto.muted { background: var(--bg-soft); color: var(--ink-muted); }

/* ============ TOAST (Notificaciones) ============ */
.toast-container {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--bg-card);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toast-in var(--transition) ease-out;
}
.toast.success { background: var(--accent-boton); color: var(--texto-sobre-relleno); }
.toast.error { background: var(--danger-soft); color: var(--danger-texto); border-color: var(--danger); }
.toast.warn,
.toast.warning { background: var(--warning-soft); color: var(--warning-texto); border-color: var(--warning); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 640px) {
  .toast-container { left: 12px; right: 12px; }
  .toast { max-width: none; }
}

/* ============ LOADER ============ */
.loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: var(--radio-circulo);
  animation: spin 0.8s linear infinite;
}
.loader-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.loader-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  display: grid;
  place-items: center;
  z-index: 9998;
  backdrop-filter: blur(2px);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============ TARJETA ============ */
/* Claro: sin borde y con sombra suave. Oscuro: línea de 1 px y sin sombra (tokens). */
.card {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-subtitle {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.card-body {
  padding: 20px;
}

/* ============ VACÍO ============ */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--ink-muted);
}
.empty-state-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  color: var(--ink-faint);
}
.empty-state-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty-state-text {
  font-size: 13.5px;
  max-width: 420px;
  margin: 0 auto;
}
/* ============ MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--velo);
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.15s ease;
}
.modal-backdrop.visible {
  display: grid;
}

.modal {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  border-radius: var(--radio-tarjeta);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-header {
  padding: 16px 20px 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.modal-title em {
  font-style: normal;
  color: var(--accent-texto);
}
/* Pedido 4 · la ✕ de PuntoUI.confirmar no cede ancho a un título largo (a 390 px, «Desactivar a
   <nombre>» la dejaba en 18–33 px). Con títulos cortos no cambia nada. */
#modal-confirm .modal-header > .icon-btn { flex: none; }
/* …y una palabra larga sin espacios (un folio o un correo) se parte en vez de empujar la ✕ fuera. */
#modal-confirm .modal-header > div { min-width: 0; }
#modal-confirm .modal-title { overflow-wrap: anywhere; }
/* El motivo de PuntoUI.confirmar a 16 px en celular: iOS no hace zoom al enfocarlo. */
@media (max-width: 780px) {
  #modal-confirm .form-input,
  #modal-confirm .field-input { font-size: 16px; }
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ============ LINK BUTTON ============ */
.link-btn {
  font-size: 12.5px;
  color: var(--accent-texto);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover {
  text-decoration: underline;
}

/* ============ INDICADORES (KPI) ============ */
/* Etiqueta · valor en mono · etiqueta de contexto en color · línea de apoyo.
   Nombres nuevos (B4) y viejos son alias: .kpi-etiqueta = .kpi-label,
   .kpi-valor = .kpi-value, .kpi-apoyo = .kpi-meta. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kpi {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radio-tarjeta);
  padding: 18px 20px;
  position: relative;
  min-width: 0;
}

.kpi-label,
.kpi-etiqueta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.kpi-value,
.kpi-valor {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.kpi-unit {
  font-size: 14px;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 400;
  margin-left: 2px;
}

/* Etiqueta de contexto en color (p. ej. «3 por firmar»). Acento por defecto. */
.kpi-contexto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-texto);
  margin-bottom: 4px;
}
.kpi-contexto.warn { color: var(--warning-texto); }
.kpi-contexto.danger { color: var(--danger-texto); }
.kpi-contexto.info { color: var(--info-texto); }
.kpi-contexto.muted { color: var(--ink-muted); }

.kpi-meta,
.kpi-apoyo {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ============ MONTOS ============ */
.monto {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ============ OBRAS MINI LIST (Dashboard) ============ */
.obras-mini-list {
  display: flex;
  flex-direction: column;
}

.obra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.obra-row:last-child {
  border-bottom: none;
}

.obra-row-main {
  flex: 1;
  min-width: 0;
}

.obra-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.obra-row-meta {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.obra-row-meta .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

.obra-row-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
/* Fila del Dashboard que abre el resumen de la obra (es un <a>). */
.obra-row-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius);
  transition: background var(--transition-fast);
}
.obra-row-link:hover { background: var(--bg-soft); }
.obra-row-link:hover .obra-row-title { color: var(--accent-texto); }
.obra-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}
/* ============ OBRAS · FILTROS ============ */
.obras-filtros {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.obras-filtros-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  min-width: 280px;
  flex: 1;
  max-width: 400px;
}
.obras-filtros-search svg {
  color: var(--ink-faint);
  flex-shrink: 0;
}
.obras-filtros-search input {
  flex: 1;
  height: 36px;
  border: none;
  outline: none;
  background: none;
  padding: 0 8px;
  font-size: 13.5px;
  color: var(--ink);
}
.obras-filtros-search input::placeholder {
  color: var(--ink-faint);
}

.obras-filtros-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-soft);
  border-radius: var(--radio-pastilla);
  padding: 3px;
}

.filtro-tab {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: var(--radio-pastilla);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filtro-tab:hover {
  color: var(--ink);
}
.filtro-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ============ OBRAS · TABLA ============ */
.table-wrap {
  overflow-x: auto;
}

.obras-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.obras-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.obras-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}

.obras-table tbody tr {
  cursor: default;
  transition: background var(--transition-fast);
}
.obras-table tbody tr:hover {
  background: var(--bg-soft);
}
.obras-table tbody tr:last-child td {
  border-bottom: none;
}

.obras-table .mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.obra-cell-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.obra-cell-nombre {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.obra-cell-desc {
  font-size: 12px;
  color: var(--ink-muted);
}

/* Responsive */
@media (max-width: 700px) {
  .obras-filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .obras-filtros-search {
    max-width: 100%;
  }
}

/* ============ OBRAS · Menú flotante (3 puntos) ============ */
.obra-row-menu {
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 9999;
}
.obra-row-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radio-control);
  font-family: inherit;
}
.obra-row-menu-item:hover {
  background: var(--bg-soft);
}
.obra-row-menu-item svg {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.obra-row-menu-item-danger {
  color: var(--danger-texto);
}
.obra-row-menu-item-danger:hover {
  background: var(--danger-soft);
}
.obra-row-menu-item-danger svg {
  color: var(--danger-texto);
}

/* ============================================================ */
/* PROFORMA · LISTA                                              */
/* ============================================================ */

.proforma-head-acciones { display: flex; gap: 8px; }

.proforma-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

.proforma-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  max-width: 440px;
}
.proforma-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.proforma-search svg {
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.proforma-search input {
  flex: 1;
  height: 40px;
  border: none;
  outline: none;
  background: none;
  padding: 0 10px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}
.proforma-search input::placeholder {
  color: var(--ink-faint);
}

/* KPI Total Aprobado */
.kpi-aprobado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  min-width: 280px;
}
.kpi-aprobado-icon {
  width: 40px;
  height: 40px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--accent-texto);
  flex-shrink: 0;
}
.kpi-aprobado-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}
.kpi-aprobado-info {
  flex: 1;
}
.kpi-aprobado-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.kpi-aprobado-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

/* Lista de cards */
.proforma-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proforma-card {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  align-items: center;
}
.proforma-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.proforma-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--accent-texto);
}
.proforma-icon svg {
  width: 22px;
  height: 22px;
}

.proforma-info {
  min-width: 0;
}
.proforma-folio {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.proforma-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
.proforma-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 9px;
  line-height: 1.4;
}

.proforma-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-muted);
}
.meta-chip svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
  color: var(--ink-faint);
}
.meta-chip.aprobada {
  color: var(--accent-texto);
  font-weight: 500;
}
.meta-chip.aprobada svg {
  color: var(--accent-texto);
}
.meta-chip.sin-aprobar {
  color: var(--ink-muted);
  font-style: italic;
}

/* (5) Monto del último total aprobado por tarjeta */
.proforma-monto {
  margin-top: 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.proforma-monto-cap {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.proforma-monto-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.proforma-monto.sin .proforma-monto-val {
  color: var(--ink-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
}

.proforma-edit {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.proforma-edit:hover {
  background: var(--bg-soft);
  color: var(--accent-texto);
}
.proforma-edit.proforma-edit-danger:hover {
  background: var(--danger-soft);
  color: var(--danger-texto);
}
.proforma-edit svg {
  width: 15px;
  height: 15px;
}

/* Subtítulo de modal (para el módulo proforma) */
.modal-subtitle {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Back link (vista detalle) */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 18px;
  padding: 4px 0;
  text-decoration: none;
}
.back-link:hover {
  color: var(--accent-texto);
}
.back-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* login-error reusada como caja de error en modales del módulo */
.login-error {
  background: var(--danger-soft);
  color: var(--danger-texto);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-error svg {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 700px) {
  .proforma-toolbar {
    grid-template-columns: 1fr;
  }
  .kpi-aprobado {
    min-width: 0;
  }
  /* Editar y eliminar apilados en la tercera columna, ambos tocables con el dedo. */
  .proforma-card {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-rows: 44px 1fr;
    gap: 4px 12px;
    align-items: start;
  }
  .proforma-card .proforma-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .proforma-card .proforma-info {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .proforma-card .proforma-edit {
    grid-column: 3;
    width: 44px;
    height: 44px;
  }
  .proforma-card .proforma-edit:not(.proforma-edit-danger) {
    grid-row: 1;
  }
  .proforma-card .proforma-edit-danger {
    grid-row: 2;
    color: var(--danger-texto);
  }
  .proforma-card .proforma-edit svg {
    width: 18px;
    height: 18px;
  }
}

/* Celular: el encabezado de la lista apila título y acciones; los botones caben completos. */
@media (max-width: 780px) {
  .proforma-head { flex-wrap: wrap; align-items: stretch; }
  .proforma-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .proforma-head-acciones { flex: 1 1 100%; flex-wrap: wrap; }
  .proforma-head-acciones .btn { flex: 1 1 160px; min-height: 44px; justify-content: center; }
}

/* ============================================================ */
/* PROFORMA · DETALLE                                            */
/* ============================================================ */

/* Detail Header */
.detail-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.detail-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--accent-texto);
}
.detail-icon svg {
  width: 22px;
  height: 22px;
}
.detail-info {
  min-width: 0;
}
.detail-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.detail-eyebrow .mono {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.detail-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.detail-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 10px;
}
.detail-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.action-row {
  display: flex;
  gap: 6px;
}

/* Version Bar */
.version-bar {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: center;
}
.version-select {
  position: relative;
}
.version-select-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.version-select-btn:hover {
  border-color: var(--ink-faint);
}
.version-select-btn svg.chev {
  width: 12px;
  height: 12px;
  color: var(--ink-faint);
}
.version-date {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.version-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  padding: 6px;
  display: none;
  z-index: 50;
}
.version-dropdown.open {
  display: block;
}
.version-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radio-control);
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.version-option:hover {
  background: var(--bg-soft);
}
.version-option.active {
  background: var(--accent-soft);
  color: var(--accent-texto);
}
.version-option-date {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.version-option.active .version-option-date {
  color: var(--accent-texto);
}
.version-summary {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.summary-item svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
  color: var(--ink-faint);
}
/* IVA por default de la versión. `margin-left:auto` vive aquí (y ya no en .total) para
   que el IVA y el total queden juntos a la derecha, en ese orden. */
.summary-item.summary-iva {
  margin-left: auto;
}
.summary-item.summary-iva.editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--line);
}
.summary-item.summary-iva.editable:hover {
  color: var(--ink);
}
.summary-item.summary-iva strong {
  font-family: var(--font-mono);
  font-weight: 500;
}
/* Subtotal sin IVA e IVA de la versión: cifras en mono, sin el peso del total. */
.summary-item.summary-monto strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
}
.summary-item.total {
  font-size: 14px;
  color: var(--ink);
}
.summary-item.total strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent-texto);
}

/* Workflow actions (Fase 7) — botones contextuales en el version bar */
.version-actions {
  display: flex;
  gap: 6px;
  justify-self: end;
  align-items: center;
  flex-wrap: wrap;
}
.version-actions .btn {
  white-space: nowrap;
}

/* Pill estados de versión (sobrescriben los .pill genéricos de listas) */
.pill.borrador {
  background: var(--warning-soft);
  color: var(--warning-texto);
}
.pill.revision {
  background: var(--info-soft);
  color: var(--info-texto);
}
.pill.aprobado {
  background: var(--accent-soft);
  color: var(--accent-texto);
}

/* Readonly banner */
.readonly-banner {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--accent-texto);
  margin-bottom: 14px;
}
.readonly-banner.show {
  display: flex;
}
.readonly-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Tabs bar */
.tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
  flex-wrap: wrap;
}
.tabs {
  display: flex;
  gap: 0;
}
.tab {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.tab:hover:not(:disabled) {
  color: var(--ink);
}
.tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.tab-actions {
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
  align-items: center;
}
.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
}
.btn-toolbar-icon {
  height: 28px;
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-toolbar-icon:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--ink-faint);
}
.btn-toolbar-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn-toolbar-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

/* Tree table */
.tree-wrap {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 14px;
}
.tree-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tree-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tree-table thead th.col-ref { width: 110px; }
.tree-table thead th.col-nivel { width: 60px; text-align: center; }
.tree-table thead th.col-total { text-align: right; width: 150px; }

/* ── Régimen de IVA en el árbol de la proforma ───────────────────────────────
   Los montos van SIN IVA, igual que el presupuesto del contrato: el amarre
   compara los dos y tienen que estar en la misma base. El HEREDADO va en gris y
   el propio en firme, para ver de un vistazo qué marcó alguien a mano. */
.tree-table thead th.col-iva { text-align: center; width: 92px; }
/* Las líneas intermedias del desglose van tenues; solo el total lleva el peso. */
.tree-table .tree-total-row.is-nota .cell-total-label,
.tree-table .tree-total-row.is-nota .cell-total { font-weight: 400; color: var(--ink-muted); font-size: 12px; }
.tree-table .cell-iva { text-align: center; }
.tree-table .cell-iva.editable { cursor: pointer; }
.tree-table .cell-iva.editable:hover { background: var(--accent-glow); }
/* Aviso de capítulo descuadrado: su cifra de control no cuadra con su desglose.
   Es el único caso en que una proforma pierde dinero sin que nadie lo vea, así que
   se pinta en el pie de la tabla, no en un toast que se va. */
.pf-descuadre td {
  background: var(--warning-soft);
  border-top: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning-texto);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 9px 14px;
}
.pf-descuadre strong { color: inherit; font-weight: 600; }
.pf-descuadre-ref {
  font-family: var(--font-mono);
  font-weight: 500;
  margin-right: 6px;
  opacity: .85;
}
.pf-descuadre-nota { opacity: .75; }
/* Acciones del aviso: corregir la cifra de control sin salir del renglón. Discretas
   —son una salida, no una llamada a la acción— pero con área de clic real. */
.pf-descuadre-acciones { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: baseline; }
.pf-descuadre-btn {
  font: inherit;
  font-size: 12px;
  color: var(--warning-texto);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radio-pastilla);
  padding: 2px 9px;
  cursor: pointer;
  white-space: nowrap;
  opacity: .85;
}
.pf-descuadre-btn:hover { opacity: 1; background: color-mix(in srgb, var(--warning) 12%, transparent); }
.pf-descuadre-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.pf-iva-tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--radio-pastilla); font-size: 10px;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-texto);
  border: 1px solid var(--accent-glow);
}
.pf-iva-tag.lvl-exento { background: var(--warning-soft); color: var(--warning-texto); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.pf-iva-tag.lvl-tasa_cero { background: var(--info-soft); color: var(--info-texto); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.pf-iva-tag.is-heredado { background: none; border-color: transparent; font-weight: 400; color: var(--ink-muted); }

/* El menú va en <body> con position:fixed: dentro de la tabla lo recortaría el
   overflow del contenedor. Mismo patrón que el menú de tipo de fila en Contratos. */
.pf-iva-menu {
  z-index: 60; min-width: 230px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 4px;
}
.pf-iva-titulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); padding: 6px 10px 4px;
}
.pf-iva-op {
  display: block; width: 100%; text-align: left; border: none; background: none;
  cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--ink);
  padding: 6px 10px; border-radius: var(--radio-control);
}
.pf-iva-op:hover { background: var(--accent-soft); }
.pf-iva-op.is-activa { font-weight: 700; color: var(--accent-texto); }
.pf-iva-nota {
  font-size: 10.5px; color: var(--ink-muted); padding: 6px 10px 4px;
  border-top: 1px solid var(--line-soft); margin-top: 3px;
}
.tree-table thead th.col-pct { width: 80px; text-align: right; }
.tree-table thead th.col-actions { width: 110px; text-align: right; }

.tree-row {
  border-bottom: 1px solid var(--line-soft);
}
.tree-row:hover {
  background: var(--bg-soft);
}
.tree-row:last-child {
  border-bottom: none;
}
.tree-row td {
  padding: 9px 14px;
  vertical-align: middle;
}

.cell-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
}
.cell-nivel {
  color: var(--ink-muted);
  font-size: 12px;
}
.cell-partida {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}
.cell-total {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.cell-pct {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 12px;
}

.tree-toggle {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: var(--radio-circulo);
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  transition: transform 0.15s;
}
.tree-toggle:hover {
  background: var(--line);
  color: var(--ink);
}
.tree-toggle svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}
.tree-toggle.collapsed {
  transform: rotate(-90deg);
}
.tree-toggle.leaf {
  visibility: hidden;
}

/* Formato por nivel — SIN fondos, solo tipografía descendente */
.tree-row.level-1 .cell-partida { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tree-row.level-1 .cell-total,
.tree-row.level-1 .cell-pct { font-size: 13px; font-weight: 700; color: var(--ink); }
.tree-row.level-1 .cell-ref,
.tree-row.level-1 .cell-nivel { font-weight: 600; color: var(--ink-soft); }

.tree-row.level-2 .cell-partida { font-size: 13px; font-weight: 600; color: var(--ink); }
.tree-row.level-2 .cell-total,
.tree-row.level-2 .cell-pct { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.tree-row.level-2 .cell-ref,
.tree-row.level-2 .cell-nivel { color: var(--ink-muted); }

.tree-row.level-3 .cell-partida { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.tree-row.level-3 .cell-total,
.tree-row.level-3 .cell-pct { font-size: 12px; color: var(--ink-soft); }

.tree-row.level-4 .cell-partida,
.tree-row.level-4 .cell-total,
.tree-row.level-4 .cell-pct { color: var(--ink-muted); font-size: 12px; }

.tree-row.level-5 .cell-partida,
.tree-row.level-5 .cell-total,
.tree-row.level-5 .cell-pct { color: var(--ink-muted); font-size: 11.5px; }

.tree-row.level-6 .cell-partida,
.tree-row.level-6 .cell-total,
.tree-row.level-6 .cell-pct,
.tree-row.level-7 .cell-partida,
.tree-row.level-7 .cell-total,
.tree-row.level-7 .cell-pct,
.tree-row.level-8 .cell-partida,
.tree-row.level-8 .cell-total,
.tree-row.level-8 .cell-pct,
.tree-row.level-9 .cell-partida,
.tree-row.level-9 .cell-total,
.tree-row.level-9 .cell-pct,
.tree-row.level-10 .cell-partida,
.tree-row.level-10 .cell-total,
.tree-row.level-10 .cell-pct { color: var(--ink-muted); font-size: 11px; }

/* Padres: monto en color de marca para distinción adicional */
.tree-row.is-parent .cell-total {
  color: var(--accent-texto);
}

/* Row TOTAL final */
.tree-row.tree-total-row {
  background: var(--bg-soft);
  border-top: 2px solid var(--line);
}
.tree-row.tree-total-row:hover {
  background: var(--bg-soft);
}
.tree-row.tree-total-row .cell-total-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  padding: 14px 14px;
  letter-spacing: 0.04em;
}
.tree-row.tree-total-row .cell-total {
  font-size: 14px;
  color: var(--ink);
  padding: 14px 14px;
}
.tree-row.tree-total-row .cell-pct {
  padding: 14px 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

/* Responsive (detalle) */
@media (max-width: 800px) {
  .detail-head {
    grid-template-columns: 48px 1fr;
  }
  .detail-actions {
    grid-column: 1 / -1;
    align-items: stretch;
  }
  .version-bar {
    grid-template-columns: 1fr;
  }
  .version-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .summary-item.total,
  .summary-item.summary-iva {
    margin-left: 0;
  }
  .tab-actions {
    flex-wrap: wrap;
  }
  /* En celular la tabla es más ancha que la pantalla: que se desplace de lado en vez
     de cortar la columna de montos. */
  .tree-wrap {
    overflow-x: auto;
  }
}

/* ============================================================ */
/* PROFORMA · DETALLE · EDICIÓN (Fase 5b)                       */
/* ============================================================ */

/* Lápiz al lado del título de la proforma (aparece en hover del header) */
.detail-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.detail-title-edit {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radio-circulo);
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.detail-head:hover .detail-title-edit {
  display: inline-flex;
}
.detail-title-edit:hover {
  background: var(--bg-soft);
  color: var(--accent-texto);
}
.detail-title-edit svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

/* Edición in-place: partida y monto se vuelven editable on hover */
.partida-text.editable {
  cursor: text;
  padding: 2px 4px;
  border-radius: var(--radio-control);
  margin-left: -4px;
}
.partida-text.editable:hover {
  background: var(--accent-soft);
  outline: 1px dashed var(--accent-glow);
}
.cell-total.editable {
  cursor: text;
}
.cell-total.editable:hover {
  background: var(--accent-soft);
  outline: 1px dashed var(--accent-glow);
  outline-offset: -2px;
}

/* Input que reemplaza la celda durante la edición */
.inline-edit-input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radio-control);
  padding: 3px 6px;
  font-size: inherit;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}
.inline-edit-monto {
  font-family: var(--font-mono);
  text-align: right;
}

/* Celda activa (navegación con teclado, roving tabindex). El marco va por dentro de la
   celda para no mover el renglón; con el foco fuera de la tabla queda una marca tenue
   para saber a dónde regresa. */
.tree-table td[data-col] { outline: none; }
.tree-table td.is-activa { box-shadow: inset 0 0 0 1px var(--accent-glow); }
.tree-table td.is-activa:focus,
.tree-table td.is-activa:focus-within {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-soft);
}
/* Editando: el campo ocupa la celda completa. */
.tree-table td.is-editando,
.tree-table td.is-activa.is-editando:focus-within { padding-top: 3px; padding-bottom: 3px; background: var(--bg); box-shadow: none; }
.tree-table td.cell-partida.is-editando { align-items: flex-start; }
.inline-edit-texto {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  white-space: pre-wrap;
  display: block;
}
.inline-edit-input:disabled { opacity: .6; }

/* Hover actions por fila */
.cell-actions {
  text-align: right;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
}
.tree-row:hover .cell-actions {
  opacity: 1;
}
.tree-row.readonly:hover .cell-actions {
  opacity: 0; /* nunca aparecer si versión APROBADA */
}
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border: none;
  background: transparent;
  border-radius: var(--radio-circulo);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.row-action:hover {
  background: var(--bg-soft);
  color: var(--accent-texto);
}
.row-action.row-action-danger:hover {
  background: var(--danger-soft);
  color: var(--danger-texto);
}
.row-action svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}

/* Fila readonly: cursor not-allowed en partida y monto */
.tree-row.readonly .partida-text,
.tree-row.readonly .cell-total {
  cursor: not-allowed;
}
.tree-row.readonly .partida-text:hover,
.tree-row.readonly .cell-total:hover {
  background: none;
  outline: none;
}

/* Advertencia de cascada en modal eliminar */
.ec-cascade-warning {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning-texto);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.5;
}
.ec-cascade-warning strong {
  font-weight: 600;
}
.ec-cascade-warning .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  word-break: break-word;
}

/* Hint inline de los modales */
.field .field-hint {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ============================================================ */
/* PROFORMA · COMPARAR (Fase 6)                                  */
/* ============================================================ */

.compare-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.compare-toolbar-label {
  font-size: 13px;
  color: var(--ink-muted);
}
.compare-vs-select {
  width: auto;
  min-width: 220px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}
.compare-legend {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  font-size: 11px;
}
.legend-chip {
  padding: 2px 8px;
  border-radius: var(--radio-pastilla);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.legend-chip.eliminado {
  background: var(--diff-del-soft);
  color: var(--diff-del);
}
.legend-chip.nuevo {
  background: var(--diff-new-soft);
  color: var(--diff-new);
}
.legend-chip.modificada {
  background: var(--diff-mod-soft);
  color: var(--diff-mod);
}

.compare-table thead th.col-diff {
  width: 150px;
  text-align: right;
}

/* Badges junto a la partida */
.compare-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: var(--radio-pastilla);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.compare-badge.eliminado {
  background: var(--diff-del-soft);
  color: var(--diff-del);
}
.compare-badge.nuevo {
  background: var(--diff-new-soft);
  color: var(--diff-new);
}
.compare-badge.modificada {
  background: var(--diff-mod-soft);
  color: var(--diff-mod);
}

/* Ref tachado para conceptos eliminados */
.cell-ref.compare-ref-tachado {
  text-decoration: line-through;
  color: var(--diff-del);
  opacity: 0.75;
}

/* Filas según estado — sutil tinte en hover.
   Se antepone .tree-row para ganarle en especificidad a las reglas de color
   por nivel (.tree-row.level-N .cell-total/.cell-partida), que de otro modo
   pisan el atenuado del concepto eliminado. */
.tree-row.compare-row-eliminado .cell-partida,
.tree-row.compare-row-eliminado .cell-total {
  color: var(--ink-muted);
}
.compare-row-eliminado:hover {
  background: var(--diff-del-soft);
}
.compare-row-nuevo:hover {
  background: var(--diff-new-soft);
}
.compare-row-modificada:hover {
  background: var(--diff-mod-soft);
}

/* Cambio de partida (texto): old → new */
.compare-partida-old {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.compare-arrow {
  margin: 0 6px;
  color: var(--ink-faint);
}
.compare-partida-new {
  color: var(--ink);
  font-weight: 500;
}

/* Columna Diferencia: símbolos y colores.
   La celda lleva dos clases (cell-total + diff-*), y las reglas de color por
   nivel (.tree-row.level-N .cell-total, especificidad 0,3,0) le ganaban al
   .diff-* suelto (0,1,0). Por eso aquí se anclan a .tree-row.compare-row
   .cell-total.diff-* (0,4,0) para que el rojo/verde del incremento o
   decremento sí se pinte en cualquier nivel. */
.tree-row.compare-row .cell-total.diff-up {
  color: var(--diff-up);
  font-weight: 600;
}
.tree-row.compare-row .cell-total.diff-down {
  color: var(--diff-down);
  font-weight: 600;
}
.tree-row.compare-row .cell-total.diff-zero,
.tree-row.compare-row .cell-total.diff-na {
  color: var(--ink-muted);
}

/* Versiones sueltas conservadas para otros contextos (p. ej. impresión PDF) */
.diff-up { color: var(--diff-up); font-weight: 600; }
.diff-down { color: var(--diff-down); font-weight: 600; }
.diff-zero,
.diff-na { color: var(--ink-muted); }

/* Responsive */
@media (max-width: 800px) {
  .compare-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .compare-legend {
    margin-left: 0;
  }
}
/* ============================================================ */
/* FASE 8 · OBRAS (tarjetas) + HOME DE OBRA                     */
/* ============================================================ */

.obras-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.obra-card {
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  display: flex;
  flex-direction: column;
}
.obra-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.obra-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.obra-card-menu {
  width: 28px; height: 28px;
  border: none; background: none;
  border-radius: var(--radius);
  color: var(--ink-muted);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.obra-card-menu:hover { background: var(--bg-soft); color: var(--ink); }
.obra-card-menu svg { width: 16px; height: 16px; }
.obra-card-nombre {
  font-family: var(--font-marca);
  font-style: var(--font-marca-estilo);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}
.obra-card-clave {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.obra-card-ubicacion {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  flex: 1;
}
.obra-card-footer {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.obra-card-footer .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.obra-card-footer .monto {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* Home de obra: ficha */
.obra-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 18px 20px;
}
.obra-ficha-item .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: 3px;
}
.obra-ficha-item .v { font-size: 13.5px; color: var(--ink); }
.obra-ficha-item .v.mono { font-family: var(--font-mono); }

/* Home de obra: tiles de módulos */
.modulo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.modulo-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}
.modulo-tile:hover:not(.disabled) { border-color: var(--accent); transform: translateY(-1px); }
.modulo-tile.disabled { opacity: 0.5; cursor: not-allowed; }
.modulo-tile-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-texto);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.modulo-tile-icon svg { width: 18px; height: 18px; }
.modulo-tile-nombre { font-size: 14px; font-weight: 500; color: var(--ink); }
.modulo-tile-estado { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }

/* ============================================================ */
/* B4 · PIEZAS COMPARTIDAS NUEVAS                                */
/* Contrato de clases: docs/B4_TOKENS.md, «Clases compartidas»   */
/* ============================================================ */

/* ============ BARRA DE TABLA (buscador y filtros en pastilla) ============ */
/* Para las pantallas que ya tienen su buscador, sus filtros o su botón de Excel: los
   ponen en esta barra encima de su tabla. PuntoTabla pinta su propia barra (.pt-barra). */
.tabla-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.tabla-barra-der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tabla-conteo {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 220px;
  flex: 0 1 320px;
  padding: 0 14px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  color: var(--ink-muted);
}
.buscador:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--bg-card); }
.buscador svg { width: 15px; height: 15px; flex-shrink: 0; }
.buscador input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
}
.buscador input::placeholder { color: var(--ink-faint); }

.filtros-pastilla { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filtro-pastilla:hover { background: var(--bg-hover); color: var(--ink); }
.filtro-pastilla.active,
.filtro-pastilla[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-texto);
}
.filtro-pastilla-n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: inherit;
  opacity: 0.85;
}
@media (pointer: coarse) {
  .filtro-pastilla { min-height: 44px; }
  .buscador { height: 44px; }
}

/* ============ BARRA DE FILTROS COMPACTA (core/filtros-barra.js) ============ */
/* Una fila: buscador que crece · «Filtros (n)» · acciones propias. El panel es un desplegable
   bajo la barra (no empuja la página); en celular, una hoja desde abajo con velo. Los filtros
   activos van debajo como pastillas con ×. La usan Reporte Fotográfico y Bitácora de obra. */
.barra-filtros { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-filtros [hidden] { display: none; }
.barra-filtros-buscador { flex: 1 1 220px; min-width: 0; }
.barra-filtros .filtro-pastilla svg { flex: none; }
.barra-filtros .filtro-pastilla-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radio-pastilla);
  background: var(--accent-boton);
  color: var(--texto-sobre-relleno);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  opacity: 1;
}
.barra-filtros .filtro-pastilla-n[hidden] { display: none; }

.panel-filtros {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(760px, 100%);
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--shadow-md);
}
.panel-filtros[hidden] { display: none; }
.panel-filtros-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-filtros-titulo { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); }
.panel-filtros-cuerpo { padding: 14px 16px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.panel-filtros-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.panel-filtros-velo { display: none; }

.pastillas-activas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pastillas-activas[hidden] { display: none; }
.pastilla-activa {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 3px 3px 12px;
  border-radius: var(--radio-pastilla);
  background: var(--accent-soft);
  color: var(--accent-texto);
  font-family: var(--font-ui);
  font-size: 12.5px;
}
.pastilla-activa-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastilla-activa-txt b { font-weight: 600; }
.pastilla-activa-x {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radio-circulo);
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.pastilla-activa-x:hover { background: var(--accent-glow); }
.pastilla-activa-x:focus-visible,
.pastillas-quitar-todos:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pastillas-quitar-todos {
  border: none;
  background: transparent;
  color: var(--accent-texto);
  font-family: var(--font-ui);
  font-size: 12.5px;
  padding: 4px 6px;
  text-decoration: underline;
  cursor: pointer;
}
.pastillas-quitar-todos:hover { color: var(--ink); }

/* Con el dedo, 44 × 44 sin engordar nada: la × se toca en 44 px pero sus márgenes negativos dejan
   la pastilla en 36 (el hueco de 8 px entre renglones evita que dos × se encimen), y «Limpiar»
   del panel crece dentro del relleno de la cabecera. */
@media (pointer: coarse) {
  .pastillas-activas { gap: 8px; }
  .pastilla-activa { min-height: 36px; }
  .pastilla-activa-x { width: 44px; height: 44px; margin: -7px -3px -7px 0; }
  .pastillas-quitar-todos { min-height: 44px; padding: 0 8px; }
  .panel-filtros-cabeza .link-btn { min-height: 44px; min-width: 44px; padding: 0 8px; margin: -12px -8px; justify-content: center; }
}

@media (max-width: 780px) {
  .panel-filtros {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 82vh;
    z-index: 1001;
    border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .panel-filtros-velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--velo);
  }
  .panel-filtros-velo-saliendo { opacity: 0; }
  .panel-filtros-pie .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }
}

/* ============ FICHA DE DOCUMENTO (p. ej. una estimación) ============ */
/* Ícono con iniciales · título y datos clave · avance · monto neto destacado · estado ·
   acciones discretas. La acción principal vive en el encabezado (accionPrincipal). */
.ficha-doc {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "icono cuerpo lado"
    "icono acciones acciones";
  gap: 6px 16px;
  align-items: start;
  padding: 18px 20px;
  background: var(--bg-card);
  border: var(--tarjeta-borde);
  box-shadow: var(--tarjeta-sombra);
  border-radius: var(--radio-tarjeta);
}
.ficha-doc-icono {
  grid-area: icono;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-control);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-texto);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ficha-doc-cuerpo { grid-area: cuerpo; min-width: 0; }
.ficha-doc-titulo {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.ficha-doc-folio {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.ficha-doc-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.ficha-doc-datos b,
.ficha-doc-datos strong { color: var(--ink-soft); font-weight: 600; }
.ficha-doc-avance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  max-width: 420px;
}
.ficha-doc-barra {
  --avance: 0%;
  flex: 1;
  height: 6px;
  border-radius: var(--radio-pastilla);
  background: var(--bg-soft);
  overflow: hidden;
}
.ficha-doc-barra > span {
  display: block;
  height: 100%;
  width: var(--avance);
  border-radius: var(--radio-pastilla);
  background: var(--accent);
}
.ficha-doc-avance-txt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ficha-doc-lado {
  grid-area: lado;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.ficha-doc-monto-etiqueta { font-size: 12px; color: var(--ink-muted); }
.ficha-doc-monto {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.ficha-doc-acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .ficha-doc {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "icono cuerpo"
      "lado lado"
      "acciones acciones";
    padding: 16px;
  }
  .ficha-doc-icono { width: 40px; height: 40px; font-size: 13px; }
  .ficha-doc-lado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .ficha-doc-acciones { justify-content: flex-start; }
}

/* ============ MONTOS DE DINERO (Anterior / Este periodo / Acumulado) ============ */
/* Importes en mono a la derecha. .montos-descuento va en rojo y antepone el signo
   menos: el importe se escribe en positivo. .montos-total lleva línea superior y negritas. */
.montos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.montos-tabla th {
  text-align: right;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.montos-tabla th:first-child { text-align: left; }
.montos-tabla td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.montos-tabla td:first-child {
  text-align: left;
  font-family: var(--font-ui);
  white-space: normal;
}
.montos-tabla .montos-descuento td { color: var(--danger-texto); }
.montos-tabla .montos-descuento td:not(:first-child):not(:empty)::before { content: '\2212\00a0'; }
.montos-tabla .montos-total td {
  border-top: 2px solid var(--line);
  border-bottom: none;
  font-weight: 700;
  color: var(--ink);
}

/* ============ FIRMAS / APROBACIONES (línea de tiempo vertical) ============ */
/* <ol class="firmas-linea"><li class="firma firma--hecha">…</li></ol>
   Hecho: palomita en acento · te toca: ámbar · pendiente: gris. */
.firmas-linea {
  list-style: none;
  margin: 0;
  padding: 0;
}
.firma {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 18px;
}
.firma:last-child { padding-bottom: 0; }
/* Línea que une una firma con la siguiente */
.firma:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 2px;
  width: 2px;
  border-radius: var(--radio-pastilla);
  background: var(--line);
}
.firma-marca {
  position: relative;
  flex: 0 0 24px;
  height: 24px;
  border-radius: var(--radio-circulo);
  background: var(--bg-soft);
  border: 2px solid var(--line);
}
.firma-cuerpo { min-width: 0; padding-top: 2px; }
.firma-rol { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.firma-quien { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }
.firma-nota { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

.firma--hecha .firma-marca { background: var(--accent-boton); border-color: var(--accent-boton); }
/* Palomita dibujada con bordes (sin imagen) */
.firma--hecha .firma-marca::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--texto-sobre-relleno);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.firma--hecha:not(:last-child)::before { background: var(--accent); }

.firma--te-toca .firma-marca {
  background: var(--warning-soft);
  border-color: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-soft);
}
.firma--te-toca .firma-rol { color: var(--warning-texto); }
.firma--te-toca .firma-cuerpo {
  margin-top: -6px;
  padding: 6px 10px;
  border-radius: var(--radio-control);
  background: var(--warning-soft);
}
.firma--te-toca .firma-quien { color: var(--warning-texto); }

.firma--pendiente .firma-rol { color: var(--ink-muted); font-weight: 500; }