/* Estilos de los parciales de formulario cargados por HTMX (CRM-700): Registrar contacto,
   Próxima acción, Cambiar etapa, Calificar interés e influencia. Antes vivían copiados en el
   <style> de cada página que los incluye (contacto_form.html, accion_form.html,
   accion_cancelar.html, hoy.html, etapa_form.html, calificar_form.html, organismo.html) —
   cualquier pantalla nueva que cargara el parcial por hx-get nacía sin maquetación hasta que
   alguien lo notaba y volvía a copiar el bloque (le pasó a CRM-640). Hermana de tokens.css,
   cargada una vez desde base.html; nunca engorda tokens.css (CRM-633).

   textarea / ul / ul li label: escritas con los prefijos .contacto-form/.iniciativas-form en
   vez del genérico .campo (que usaría componentes/campo.html en TODA la app) a propósito —
   componentes/campo.html también lo consume iniciativas/ficha.html (Avance, Cambiar estatus,
   CRM-701: los dos widgets Textarea de iniciativas/forms.py), que antes de CRM-701 no traía
   estas reglas; rescoparlas a .campo habría alcanzado a cualquier <input>/<select> de la app
   sin que nadie lo pidiera. El selector agrupado cubre exactamente los formularios
   <form class="contacto-form"> y <form class="iniciativas-form">, sin alcanzar a quien no las
   pidió (ver
   tests/test_estilos_componentes.py::test_caracterizacion_iniciativas_ficha_no_usa_ni_depende_de_contacto_form
   y tests/test_estilos_iniciativas.py). .contacto-form va SIEMPRE último en el selector
   agrupado: tests/test_estilos_componentes.py::_disponible_en_pagina_o_css busca el literal
   ".contacto-form textarea { … }" y no se edita para este fix (CRM-700 sigue siendo su red). */
.contacto-destino { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.contacto-destino-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-claro); font-weight: 700; }
.contacto-destino-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 16px; overflow-wrap: break-word; }
.contacto-error { background: var(--sem-vencido-bg); color: var(--sem-vencido); border-radius: var(--radio-control); padding: 10px 14px; font-size: 14px; margin-bottom: 12px; overflow-wrap: break-word; }
.contacto-form { display: flex; flex-direction: column; gap: 14px; }
.contacto-form .boton { width: 100%; }
.contacto-paso { font-size: 12.5px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 12px; }
.iniciativas-form textarea, .contacto-form textarea { min-height: var(--toque); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 10px 14px; font-family: var(--fuente-cuerpo); font-size: 15px; background: var(--tarjeta); color: var(--tinta); resize: vertical; }
.iniciativas-form ul, .contacto-form ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.iniciativas-form ul li label, .contacto-form ul li label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; font-size: 14px; cursor: pointer; }