/* Form kit (2026-09-03) — piezas del patrón de formularios que ceco-ui.css
   no trae: encabezado de contexto, marca de campo auditado, zona de
   evidencia y la barra pegajosa de guardado. Solo lo cargan las páginas
   migradas al kit (piloto: clientes/ficha.html). Construido sobre los
   tokens de ceco-ui. */

/* En ceco-ui .form-error-msg es display:flex SIEMPRE (las páginas viejas solo
   renderizan el span cuando hay error). El kit los deja en el markup y los
   enciende con .has-error — sin esto, todos los mensajes salen en rojo de
   entrada (reporte 2026-09-03). */
.form-field .form-error-msg { display: none; }
.form-field.has-error .form-error-msg { display: flex; }

/* ── Encabezado de contexto ── */
.fk-contexto { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--sp-4, 16px); }
.fk-avatar {
  width: 46px; height: 46px; border-radius: 11px; background: var(--navy, #0A2540); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none;
}
.fk-quien { min-width: 0; flex: 1; }
.fk-quien h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.fk-meta { font-size: 12.5px; color: var(--fg-3, #667); margin-top: 3px; }
.fk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fk-chip {
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px;
  background: var(--surface-sunken, #EEF2F6); color: var(--fg-2, #445);
  border: 1px solid var(--border-subtle, #E5EAEF);
}
.fk-chip.ok { background: var(--soft-ok, #E4F5EC); color: #17714B; border-color: transparent; }
.fk-chip.off { background: var(--soft-bad, #FBE9E9); color: #A03030; border-color: transparent; }
.fk-acciones { display: flex; gap: 8px; align-items: center; }

/* ── Secciones ── */
.fk-seccion { border-top: 1px solid var(--border-subtle, #E5EAEF); padding: 22px 0; }
.fk-seccion:first-of-type { border-top: 0; }
.fk-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.fk-cab h3 { margin: 0; font-size: 14px; }
.fk-desc { font-size: 12.5px; color: var(--fg-3, #667); margin: 0 0 16px; max-width: 60ch; }

/* Ritmo vertical: ceco-ui deja .form-field SIN margen (las páginas viejas
   espacian a mano) — sin esto los campos quedan pegados entre sí y a los
   títulos de sección (reporte 2026-09-03). El grid espacia con su gap, así
   que sus campos internos van a 0. */
.fk-seccion .form-field { margin-bottom: var(--sp-4, 16px); }
.fk-seccion .form-grid-2 { margin-bottom: var(--sp-4, 16px); }
.fk-seccion .form-grid-2 .form-field { margin-bottom: 0; }
.fk-seccion > :last-child { margin-bottom: 0; }
.fk-cab + .form-field, .fk-cab + .form-grid-2, .fk-cab + .fk-enlaces { margin-top: 12px; }
.fk-auditado {
  font-size: 11px; font-weight: 600; color: var(--fg-4, #889);
  display: inline-flex; align-items: center; gap: 5px;
}
.fk-auditado::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #0091D7); opacity: .55;
}

/* ── Zona de evidencia (adjuntos con respaldo documental) ── */
.fk-evidencia {
  border: 1.5px dashed var(--border-default, #D5DDE3); border-radius: 10px; padding: 12px 16px;
  font-size: 12.5px; color: var(--fg-3, #667); background: var(--surface-sunken, #F4F7F9);
  display: flex; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap;
  transition: border-color .15s ease;
}
.fk-evidencia:hover, .fk-evidencia:focus-visible { border-color: var(--accent, #0091D7); outline: none; }
.fk-evidencia b { color: var(--fg-2, #445); font-weight: 600; }
.fk-evidencia .prog { margin-left: auto; font-weight: 600; color: var(--accent, #0091D7); }

/* ── Enlaces del expediente (solo lectura) ── */
.fk-enlaces { display: flex; gap: 8px; flex-wrap: wrap; }
.fk-tarjeta {
  flex: 1; min-width: 160px; border: 1px solid var(--border-subtle, #E5EAEF); border-radius: 10px;
  background: var(--surface-sunken, #F4F7F9); padding: 11px 14px; font-size: 12.5px; color: var(--fg-2, #445);
}
.fk-tarjeta b { display: block; font-size: 16px; color: var(--navy, #0A2540); }

/* ── Barra pegajosa de guardado (la crea FormKit.crear) ── */
.fk-bar {
  position: sticky; bottom: 12px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  background: var(--navy, #0A2540); color: #E8F1F8; border-radius: 12px;
  padding: 11px 16px; margin: 22px 0 10px;
  box-shadow: 0 10px 30px -12px rgba(10, 37, 64, .5);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.fk-bar.visible { opacity: 1; transform: none; pointer-events: auto; }
.fk-bar-cuenta { font-size: 13px; flex: 1; min-width: 0; }
.fk-bar-cuenta b { font-weight: 600; }
.fk-bar-campos {
  display: block; font-size: 11.5px; opacity: .7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fk-bar .fk-bar-btn { border-color: rgba(255,255,255,.3); background: transparent; color: #E8F1F8; }
.fk-bar .fk-bar-btn:hover { border-color: #fff; color: #fff; }
@media (max-width: 560px) { .fk-bar-campos { display: none; } }

/* ── RUC por partes (js/ui/rucInput.js, 2026-09-25) ──
   Tipo de contribuyente arriba; debajo provincia · letras · tomo · asiento
   en una fila que envuelve en el celular; el DV a la derecha; y una línea de
   estado con cómo queda y si el DV cuadra con el de la DGI. */
.ruc-bloque { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px 16px; margin-bottom: var(--sp-4, 16px); }
.ruc-bloque .form-field { margin-bottom: 0; }
.ruc-bloque .ruc-dv { align-self: end; }
.ruc-bloque .ruc-dv .form-input { text-align: center; }
.ruc-estado { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.ruc-estado:empty { display: none; }

.ruc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-default, #D5DDE3); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.ruc-seg .ruc-seg-btn { border: 0; background: var(--surface-card, #fff); color: var(--fg-2, #445); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ruc-seg .ruc-seg-btn + .ruc-seg-btn { border-left: 1px solid var(--border-default, #D5DDE3); }
.ruc-seg .ruc-seg-btn.is-on { background: var(--accent, #0091D7); color: #fff; }
.ruc-seg .ruc-seg-btn:focus-visible { outline: 2px solid var(--accent, #0091D7); outline-offset: -2px; }
.ruc-seg .ruc-seg-btn:disabled { cursor: default; }
.ruc-seg .ruc-seg-corto { display: none; }

.ruc-partes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ruc-parte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ruc-parte .ruc-in { width: calc(var(--w, 8ch) + 26px); max-width: 100%; font-family: var(--font-mono); text-align: center; }
.ruc-parte .ruc-sel { min-width: 0; max-width: 190px; }
.ruc-parte-libre { flex: 1; min-width: 200px; }
.ruc-parte-libre .form-input { font-family: var(--font-mono); }
.ruc-cap { font-size: 11px; font-weight: 600; color: var(--fg-3, #667); white-space: nowrap; }
.ruc-guion { color: var(--fg-3, #667); font-family: var(--font-mono); font-weight: 600; padding-bottom: 9px; white-space: nowrap; }

.ruc-nota { font-size: 12.5px; color: var(--fg-3, #667); line-height: 1.6; display: block; }
.ruc-nota b { color: var(--fg-1, #1a2530); }
.ruc-mono { font-family: var(--font-mono); }
.ruc-nota.ruc-ok { color: #17714B; }
.ruc-nota.ruc-ok b { color: #17714B; }
.ruc-nota.ruc-bad { color: #A03030; background: var(--soft-bad, #FBE9E9); border-radius: 8px; padding: 7px 10px; }
.ruc-nota.ruc-bad b { color: #A03030; }
.ruc-nota.ruc-warn { color: #8A5A00; background: var(--soft-warn, #FDF4E1); border-radius: 8px; padding: 7px 10px; }
.ruc-nota.ruc-warn b { color: #6B4600; }
.ruc-confirma { cursor: pointer; color: var(--fg-2, #445); }
.ruc-accion { padding: 1px 10px; font-size: 12px; margin-left: 6px; vertical-align: baseline; }

/* En error, solo la casilla que falta va en rojo (no las cuatro), y el
   mensaje sale una vez: el del campo, no también la nota gris. */
.ruc-campo.has-error .ruc-partes .form-input,
.ruc-campo.has-error .ruc-partes .form-select { border-color: var(--border-default, #D5DDE3); box-shadow: none; }
.ruc-campo.has-error .ruc-partes .ruc-falta { border-color: var(--bad, #C0392B); box-shadow: 0 0 0 3px var(--soft-bad, #FBE9E9); }
.ruc-bloque:has(.ruc-campo.has-error) .ruc-nota-falta { display: none; }

@media (max-width: 560px) {
  .ruc-bloque { grid-template-columns: minmax(0, 1fr); }
  .ruc-bloque .ruc-dv { max-width: 120px; }
  .ruc-seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .ruc-seg .ruc-seg-btn { flex: 1 1 0; padding: 7px 6px; font-size: 12.5px; }
  .ruc-seg .ruc-seg-largo { display: none; }
  .ruc-seg .ruc-seg-corto { display: inline; }
}

/* Modo solo lectura (rol sin permiso de edición) */
.fk-solo-lectura .fk-bar { display: none; }
.fk-solo-lectura .ruc-accion, .fk-solo-lectura .ruc-confirma { display: none; }
.fk-solo-lectura .fk-evidencia { pointer-events: none; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .fk-bar, .fk-evidencia { transition: none; }
}