/* «Condiciones comerciales» (ADR-033, docs/contrato-condiciones-comerciales.md §5/§5.1).
   Componentes: static/js/components/condiciones-cuenta.js · condicion-sheet.js ·
   static/js/views/condiciones.js.
   -----------------------------------------------------------------------------------------------
   ⚠️ NINGÚN color nuevo: todo sale de `tokens.css` (mismo criterio que contactos.css/cuentas.css).
   Los chips de estado son `UI.chip` (blue/yellow/red/gray del sistema, medidos en los dos temas);
   los textos del tilde reusan `--green-text` / `--yellow-text` / `--red-text`, las variantes de
   TEXTO calibradas AA sobre `--surface` (tokens.css §Variantes de texto), nunca los tonos vivos. */

/* ---- Bloque en la ficha (pestaña «Condiciones») --------------------------------------------- */
.cc-block { display: flex; flex-direction: column; }
.cc-hd { padding-bottom: var(--sp-1); }
.cc-hd .cc-add { text-transform: none; letter-spacing: 0; }
.cc-resumen {
  margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-2);
  font: 400 var(--fs-sm)/1.45 var(--font); color: var(--text-2);
}
.cc-vacio {
  margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3);
  font: 400 var(--fs-sm)/1.45 var(--font); color: var(--text-2);
}
.cc-list { display: flex; flex-direction: column; }

/* Renglón «¿esto llegó a Odoo?» (ADR-034 decisión 6, contrato §11.3). Va entre el resumen y la
   lista: es una propiedad de TODA la cuenta, no de una condición.
   ⚠️ Fondo: `.cc-block` vive dentro de `.group`, que es `--surface` — el fondo sobre el que los
   chips del sistema (`--green-soft`/`--red-soft` translúcidos) están calibrados AA en los dos
   temas. NO es `--surface-2`, así que no hace falta la corrección de `.ndp-cond-regla .chip.red`
   (herramientas.css), que existe porque allá la tarjeta SÍ es surface-2 (3,49:1 en oscuro).
   El texto de ayuda va en `--text-2` y no en `--text-3`: es INFORMACIÓN (qué esperar, o el motivo
   del fallo), y text-3 sobre surface en oscuro da 4,35:1 — misma medición que `.cc-m`. */
.cc-aviso {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 0 var(--sp-4) var(--sp-3);
}
.cc-aviso-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cc-aviso-fecha { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2); }
/* Envuelve (nunca ellipsis): el motivo de un fallo de Odoo es una instrucción de qué mirar, y
   cortarlo lo vuelve inútil (§4.1 nº12). */
.cc-aviso-ayuda {
  margin: 0; font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-2);
  overflow-wrap: anywhere;
}
/* El único que cambia de tono es el error: el chip rojo solo dice QUE falló, y el motivo es lo que
   se lee. Los otros tres son informativos y comparten el gris de la ayuda. */
.cc-aviso.is-error .cc-aviso-ayuda { color: var(--red-text); }
/* Sin condiciones cargadas el vacío ya trae su propio padding inferior: el aviso se pega a él. */
.cc-vacio + .cc-aviso { padding-top: 0; }


/* Una fila = una condición. Izquierda: chips · título · valor · meta. Derecha: tilde + acciones. */
.cc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: .5px solid var(--hairline);
}
.cc-row:first-child { border-top: 0; }
.cc-main { min-width: 0; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 4px; }
/* El origen ENVUELVE (nunca ellipsis): «Pedido S108450 · Facturas FA-A 0008-00012345 y …» es un
   comprobante, y un comprobante cortado es un número que no existe (§4.1 nº12). */
.cc-chips .cc-origen { white-space: normal; text-align: left; max-width: 100%; }
.cc-t { font: 600 var(--fs-body)/1.35 var(--font); color: var(--text-1); overflow-wrap: anywhere; }
.cc-v { font: 400 var(--fs-sm)/1.4 var(--font); color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.cc-d { font: 400 var(--fs-sm)/1.45 var(--font); color: var(--text-2); margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* `--text-2` y no `--text-3` (el mockup lo tenía en text-3): "cargada por X · autorizada por Y" es
   INFORMACIÓN, y text-3 sobre `--surface` en oscuro da 4,35:1 (medido 2026-09-16, misma lección
   que los estados de ARCA del 8/9). text-2: 7,91 claro · 6,88 oscuro. */
.cc-m { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2); margin-top: 4px; }

.cc-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2);
}
.cc-tilde-row { display: flex; align-items: center; gap: 6px; text-align: right; }
.cc-verify { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-verify .vc { margin-left: 0; }
.cc-tilde.is-ok { color: var(--green-text); }
.cc-tilde.is-pendiente { color: var(--yellow-text); }
.cc-tilde.is-conflicto { color: var(--red-text); }
.cc-tilde.is-general { color: var(--text-2); }

.cc-acts { display: flex; align-items: center; gap: 6px; }
.cc-btn {
  position: relative; width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cc-btn:hover { background: var(--surface-2); color: var(--text-1); }
.cc-btn-baja:hover { color: var(--red-text); }
.cc-baja-row { align-items: center; justify-content: flex-end; }
.cc-baja-txt { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-2); }

@media (max-width: 599.98px) {
  .cc-row { grid-template-columns: 1fr; }
  .cc-right { align-items: flex-start; }
  .cc-tilde-row { text-align: left; }
  .cc-baja-row { justify-content: flex-start; }
}
@media (pointer: coarse) {
  .cc-btn::after { content: ''; position: absolute; inset: -7px -7px; border-radius: 12px; }
  .cc-add { position: relative; }
  .cc-add::after { content: ''; position: absolute; inset: -6px -4px; }
}

/* ---- La hoja de alta/edición ------------------------------------------------------------------ */
.cd-in {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-app); color: var(--text-1);
  font: 400 var(--fs-body)/1.4 var(--font);
}
.cd-in:focus { outline: 2px solid var(--blue-solid); outline-offset: 1px; }
.cd-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 599.98px) { .cd-row2 { grid-template-columns: 1fr; } }
.cd-vig .cd-fecha { width: 100%; justify-content: flex-start; }
.cd-inmutable { margin: 0; font: 400 var(--fs-sm)/1.45 var(--font); color: var(--text-2); }
.cd-detalle { width: 100%; }
/* CC12 — «Porcentaje fijo» / «Regla — Administración aplica el número al facturar». El segundo
   chip mide ~300 px y `.opt` trae `white-space: nowrap`: a 375 px se saldría de la hoja (§4.1 nº12).
   Acá —y solo acá— el chip ENVUELVE adentro suyo en vez de desbordar. */
.cd-modo .opt { white-space: normal; text-align: center; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
.cd-regla { width: 100%; }
/* Contador de caracteres: alineado a la derecha, bajo el textarea (mismo tono que `.fhint`). */
.cd-cont { align-self: flex-end; }
.cd-hint { margin: -2px 0 0; }
.cd-nota { margin: var(--sp-2) 0 0; font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-2); }
.cd-sin-catalogo { margin: 0; font: 400 var(--fs-caption)/1.4 var(--font); color: var(--red-text); }
.cd-btns { display: flex; gap: 8px; margin-top: var(--sp-2); }
.cd-btns .btn { flex: 1; }

.cd-tog { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.cd-tog-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-tog-txt strong { font: 600 var(--fs-body)/1.35 var(--font); color: var(--text-1); }
.cd-tog-txt span { font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-3); }

/* Pedidos y facturas de la operación: el `name` entero, en su renglón. */
.cd-op-list { display: flex; flex-direction: column; }
.cd-op-row {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 0;
  font: 400 var(--fs-sm)/1.4 var(--font); color: var(--text-1); cursor: pointer;
}
.cd-op-row input { width: 18px; height: 18px; flex-shrink: 0; }
.cd-op-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cd-op-meta { color: var(--text-3); flex-shrink: 0; font-size: var(--fs-caption); }
.cd-op-vacio { margin: 0; font: 400 var(--fs-caption)/1.4 var(--font); color: var(--text-3); }
.cd-op-vacio.is-error { color: var(--red-text); }

/* Segmento: ejes con chips y el preview. */
.cd-eje-row { max-height: 168px; overflow-y: auto; }
.cd-prev-row { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); align-items: flex-start; }
.cd-prev-n { margin: 0; font: 400 var(--fs-sm)/1.45 var(--font); color: var(--text-1); }
.cd-prev-sd { color: var(--text-2); }
.cd-prev-muestra { margin: 0; font: 400 var(--fs-caption)/1.45 var(--font); color: var(--text-3); }
.cd-prev-error { margin: 0; font: 400 var(--fs-caption)/1.4 var(--font); color: var(--red-text); }

@media (min-width: 900px) {
  .sheet.cd-sheet { max-width: 640px; }
}

/* ---- Vista transversal #/condiciones ---------------------------------------------------------- */
.view-condiciones .filters-block { margin-bottom: var(--sp-3); }
.cv-facets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
table.dense.cv-table td { vertical-align: top; }
table.dense.cv-table .cv-t { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
table.dense.cv-table .cv-origen { white-space: normal; max-width: 260px; overflow-wrap: anywhere; }
table.dense.cv-table .cv-v { white-space: normal; max-width: 300px; overflow-wrap: anywhere; color: var(--text-2); }
.cv-card .cc-row { padding: var(--sp-3) var(--sp-4); border-top: 0; }
.cv-link { color: inherit; text-decoration: none; }
.cv-link:hover { text-decoration: underline; }