/* ═══════════════════════════════════════════════════════════════
   Vertical Servicios (ServiciosSettingsPage · S01): Configuración de la empresa — pestañas, formularios, catálogos y numeración.
   Only theme tokens (light and dark — midnight navy and gold is the default): no fixed colour here. Reuses pj-* of projects.css.
   ═══════════════════════════════════════════════════════════════ */

.sv-page { display: flex; flex-direction: column; gap: var(--space-4); }
.sv-tabs { margin-top: var(--space-1); }
.sv-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.sv-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.sv-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.sv-row-actions { white-space: nowrap; text-align: right; }
.sv-color { display: flex; align-items: center; gap: var(--space-2); }
.sv-swatch {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-sm);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-100));
}
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sv-setup { border-color: var(--gold-300); }

/* ── S02 · Subcontratistas (ServiciosSubcontractorsPage, ServiciosSubcontractorPage y sus pestañas): solo tokens del tema ── */
.sv-header-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.sv-group { gap: var(--space-2); }
.sv-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin: 0; }
.sv-facts dt { font-size: 12px; font-weight: 600; color: var(--ds-color-text-muted, var(--gray-500)); }
.sv-facts dd { margin: 0; color: var(--ds-color-text, var(--gray-900)); overflow-wrap: anywhere; }
.sv-summary { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sv-summary__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); }
.sv-summary__label { font-weight: 600; color: var(--ds-color-text, var(--gray-900)); }
.sv-mono { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--ds-color-text, var(--gray-900)); }
.sv-score { font-size: 20px; color: var(--ds-color-primary, var(--blue-700)); }
.sv-pager { align-items: center; }

/* ── S04 · Proyectos (ServiciosProjectsPage, ServiciosProjectPage y sus pestañas, plantillas): solo tokens del tema ── */
.sv-status-actions { justify-content: flex-start; flex-wrap: wrap; }
.sv-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sv-history li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }

/* ── S05 · RFQ por partida (ProjectRfqsTab, RfqDetail, RfqInviteesEditor, RfqQuestionCard): solo tokens del tema ── */
.sv-plain { white-space: pre-line; overflow-wrap: anywhere; color: var(--ds-color-text, var(--gray-900)); }
.sv-rfq-results, .sv-rfq-chosen, .sv-rfq-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sv-rfq-results { max-height: 280px; overflow-y: auto; }
.sv-rfq-results li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--r-md); border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-1, var(--white)); }
.sv-rfq-chosen li, .sv-rfq-question { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
.sv-rfq-deliveries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sv-rfq-deliveries li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.sv-rfq-answer { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-3); border-left: 3px solid var(--ds-color-primary, var(--blue-700)); }


/* ── S06 · Cotizaciones de los subcontratistas (RfqQuotesPanel, QuoteVersionView, QuoteCaptureDialog): solo tokens del tema ── */
.sv-quotes, .sv-quote-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sv-quote-versions { flex-direction: row; flex-wrap: wrap; }
.sv-quote-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
.sv-quote { display: flex; flex-direction: column; gap: var(--space-2); }
.sv-quote__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* S07 · Comparativo y adjudicación: one card per line item, subs in columns. */
.sv-compare-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
.sv-compare-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }
.sv-compare-table th:first-child { white-space: nowrap; }
.sv-compare-table td, .sv-compare-table th { vertical-align: top; }
.sv-compare-awarded { border-bottom: 2px solid var(--ds-color-primary, var(--blue-700)); }
.sv-award-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--r-md); border: 1px solid var(--ds-color-primary, var(--blue-700)); background: var(--ds-color-surface-1, var(--white)); }
.sv-compare-history ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sv-quote-line-form { border: 1px solid var(--ds-color-border, var(--gray-200)); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); }

/* ── S08 · Propuesta al cliente (ProjectProposalTab, ProposalPreview, ProposalVersionsPanel, ProposalChanges): solo tokens del tema ── */
.sv-num { text-align: right; white-space: nowrap; }
.sv-proposal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.sv-proposal-totals { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.sv-proposal-totals > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0;
    border-bottom: 1px solid var(--ds-color-border, var(--gray-200)); color: var(--ds-color-text, var(--gray-900)); }
.sv-proposal-totals dt { color: var(--ds-color-text-muted, var(--gray-500)); }
.sv-proposal-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.sv-proposal-totals__total dt, .sv-proposal-totals__total dd { font-weight: 700; color: var(--ds-color-text, var(--gray-900)); }
.sv-proposal-blockers, .sv-proposal-send-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.sv-proposal-version__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.sv-proposal-changes { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-3);
    border-left: 3px solid var(--ds-color-primary, var(--blue-700)); }
.sv-proposal-changes__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.sv-proposal-changes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sv-proposal-changes__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.sv-proposal-preview { display: flex; flex-direction: column; gap: var(--space-3); color: var(--ds-color-text, var(--gray-900)); }

@media (max-width: 640px) {
    .sv-actions { justify-content: stretch; }
    .sv-actions .crm-btn { flex: 1 1 auto; }
}

/* S09 · Aprobación del cliente: avisos a los subcontratistas y la pista de la diferencia (solo tokens del tema). */
.sv-approval-notices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sv-approval-notices li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.sv-approval-diff--off { color: var(--ds-color-warning, var(--gold-700)); font-weight: 600; }

/* S12 (SEG-219): un paso de la checklist de inspección de una partida: su línea y el botón de quitar. */
.sv-inspection-step { display: flex; align-items: center; gap: var(--space-2); }
.sv-inspection-step .sf-input { flex: 1 1 auto; min-width: 0; }

/* S14 (SEG-222): facturas de subcontratistas — tarjetas (una columna en el móvil, sin desplazamiento horizontal), sus datos y sus excepciones, y el
   diálogo de la decisión a pantalla completa en el móvil. Solo tokens del tema. */
.sv-invoice-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.sv-invoice-card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3); border-radius: var(--r-md); overflow-wrap: anywhere;
    border: 1px solid var(--ds-color-border, var(--gray-200)); background: var(--ds-color-surface-2, var(--gray-50)); color: var(--ds-color-text, var(--gray-900)); }
.sv-invoice-card--exception { border-color: var(--gold-300); }
.sv-invoice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-1) var(--space-3); margin: 0; }
.sv-invoice-facts div { display: flex; flex-direction: column; gap: 2px; }
.sv-invoice-facts dt { font-size: 12px; color: var(--ds-color-text-muted, var(--gray-500)); }
.sv-invoice-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-invoice-exceptions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ds-color-warning, var(--gold-700)); font-size: 13px; }
.sv-invoice { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .sv-invoice-cards { grid-template-columns: 1fr; }
    .sv-invoice-facts { grid-template-columns: 1fr 1fr; }
    .crm-modal-overlay:has(.sv-modal-sheet) { padding: 0; }
    .crm-modal.sv-modal-sheet { max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .crm-modal.sv-modal-sheet .crm-modal__body { flex: 1 1 auto; overflow-y: auto; }
}

/* S15 (SEG-223): cuentas por pagar y pagos a subcontratistas — las órdenes del detalle de un sub a todo el ancho (llevan sus exigibles), las líneas de un
   pago o de un exigible (casilla, qué es y el monto a la derecha; apiladas en el móvil), la política de pago y la barra de la selección. Solo tokens. */
.sv-pay-orders { grid-template-columns: 1fr; }
.sv-pay-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sv-pay-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; min-width: 0;
    border-top: 1px solid var(--ds-color-border, var(--gray-200)); }
.sv-pay-line:first-child { border-top: 0; }
.sv-pay-line__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
label.sv-pay-line__what { flex-direction: row; align-items: flex-start; gap: var(--space-2); }
label.sv-pay-line__what > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-pay-line__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-pay-line .pj-field { flex: 0 0 160px; }
.sv-pay-policy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.sv-pay-policy > div { display: flex; flex-direction: column; gap: 2px; }
.sv-pay-bar { position: sticky; top: 0; z-index: 2; align-items: center; flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
    border: 1px solid var(--gold-300); background: var(--ds-color-surface-1, var(--gray-50)); }

@media (max-width: 640px) {
    .sv-pay-line { flex-direction: column; align-items: stretch; }
    .sv-pay-line__amount { align-items: flex-start; }
    .sv-pay-line .pj-field { flex: 1 1 auto; }
}

/* S22 (SEG-226): auditoría — el motivo es texto plano (respeta sus saltos de línea, nunca HTML) y no desborda en el móvil. Solo tokens del tema. */
.sv-audit-reason { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ds-color-text, var(--gray-900)); }
/* S17 (SEG-225): materiales propios — el producto elegido del inventario, su casilla, y la diferencia de lo real contra lo estimado. Solo tokens. */
.sv-invoice-card--selected { border-color: var(--ds-color-primary, var(--blue-700)); box-shadow: 0 0 0 1px var(--ds-color-primary, var(--blue-700)); }
.sv-pick { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; min-width: 0; }
.sv-pick input { margin-top: 3px; flex: 0 0 auto; }

/* S21 (SEG-230): las palabras de un aviso en solo lectura conservan sus saltos de línea (texto plano, nunca HTML). */
.sv-pre-line { white-space: pre-line; overflow-wrap: anywhere; }