/* T301 -- estilos de los 3 formularios (contacto general, solicitud de
   información de propiedad, colaboración profesional). Reutiliza los
   tokens y clases de tokens.css (.cv-field, .cv-error-text, .cv-btn) --
   este fichero solo añade lo que faltaba: textarea, checkbox/radio,
   ocultación accesible del honeypot, resumen de errores y confirmación. */

.cv-field textarea {
  width: 100%; min-height: 140px; padding: var(--cv-space-2);
  border: 1px solid var(--cv-list-bg); border-radius: 0; font-size: 16px; font-family: inherit;
  resize: vertical;
}
/* T309 Recuperación 21 -- inventario global de radios: tokens.css tenía
   border-radius:8px hardcodeado en .cv-field input/select (no dependía de
   --cv-radius, se saltó el cambio global de R18). Afectaba a TODOS los
   campos de texto/email/tel/select de TODOS los formularios del sitio. */

/* T309 Recuperación 21 -- hallazgo de José: Contacto y Anúnciese ("página
   desproporcionada") heredaban el ancho completo de .cv-container (~1240px)
   sin ningún límite propio, muy por encima de la proporción compacta y
   elegante de los formularios legacy reales. Envuelve el <form> en un
   bloque de ancho fijo razonable para lectura/rellenado, centrado, sin
   caja pesada (solo un borde fino, igual criterio que .cv-revista-destacada). */
.cv-form-compact {
  max-width: 620px;
  margin: 0 auto;
}

/* T309 Recuperación 21 -- hallazgo de José: los enlaces de Media Kit y el
   "volver al inicio" de la confirmación usaban el botón crema/píldora
   genérico (.cv-btn.cv-btn-secondary, fondo var(--cv-sand)); legacy trata
   estos enlaces secundarios como texto sobrio subrayado, sin relleno ni
   esquinas. Clase única reutilizada en Anúnciese y Contacto. */
.cv-media-kit-link {
  display: inline-block;
  color: var(--cv-secondary);
  text-decoration: underline;
  font-weight: 700;
  font-size: 14px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.cv-media-kit-link:hover, .cv-media-kit-link:focus { color: var(--cv-primary); }

/* T309 Recuperación 21 -- portada real de la revista vigente en Anúnciese
   (ver colaboracion.html.twig / FormularioColaboracionController). Reutiliza
   .cv-revista-destacada (portada.css) pero con la imagen más pequeña, ya
   que aquí acompaña al titular de la página en vez de ser el bloque
   principal de la sección como en portada. */
.cv-colab-intro { display: grid; gap: var(--cv-space-4); margin-bottom: var(--cv-space-4); }
@media (min-width: 768px) {
  .cv-colab-intro { grid-template-columns: 180px 1fr; align-items: start; }
}
.cv-colab-revista.cv-revista-destacada { display: block; }
.cv-colab-revista .cv-photo-real,
.cv-colab-revista .cv-photo-placeholder {
  max-width: 180px;
}

/* T309 Recuperación 25 (R25c) -- José: "contenido left-pinned/disperso,
   texto sobredimensionado, negrita basta, espaciado arbitrario" en
   /es/colaborar (y sus 6 equivalentes de locale). Envuelve TODO el
   contenido de la página (portada+intro, Media Kits, resumen de errores,
   formulario) en una única columna de lectura centrada -- mismo ancho
   que ya usaba solo el <form> (.cv-form-compact, más arriba, 620px). */
.cv-colab-page { max-width: 620px; margin: 0 auto; }

/* T309 (R28e) -- José (revisión visual en vivo): la página de Contacto
   tenía el mismo problema que Anúnciese antes de T309 R25c -- todo el
   contenido (título/intro, resumen de errores, formulario, datos de
   empresa) heredaba el ancho completo de .cv-container (~1240px) sin
   ningún límite propio, en vez de leerse como una única columna
   centrada. Reutiliza el mismo patrón de 620px que .cv-colab-page,
   arriba, en vez de inventar un ancho nuevo. */
.cv-contacto-page { max-width: 620px; margin: 0 auto; }

/* T309 (R28e) -- los datos reales de empresa (dirección/teléfono/email,
   mismos que el pie de página, ver base.html.twig .cv-footer-datos)
   ahora viven DESPUÉS del formulario, en 3 líneas propias en vez de un
   único párrafo (orden fijo dirección → teléfono → email, igual en todos
   los tamaños de pantalla). Separador fino igual criterio que
   .cv-editorial-section + .cv-editorial-section (portada.css) -- sin
   fondo crema (--cv-sand) ni esquinas redondeadas, mismo lenguaje visual
   plano ya establecido en el resto del sitio (--cv-radius: 0 global). */
.cv-contacto-datos {
  margin-top: var(--cv-space-4);
  padding-top: var(--cv-space-4);
  border-top: 1px solid var(--cv-list-bg);
  text-align: center;
}
.cv-contacto-datos p { margin: 0 0 var(--cv-space-2); }
.cv-contacto-datos p:last-child { margin-bottom: 0; }

/* H1 fino y elegante, misma convención "fino y elegante" que
   .cv-prop-titulo-fino (directorio.css/revista-noticias.css) -- no se
   importan esos ficheros aquí (no comparten ninguna otra regla con este
   módulo, mismo criterio ya aplicado en revista-noticias.css para
   noticias); se fija el mismo valor real en vez. El H1 por defecto de
   tokens.css es clamp(32px,5vw,63px) font-weight:700 ("negrita basta"),
   desproporcionado para esta página compacta. */
.cv-prop-titulo-fino { font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); }

/* T309 Recuperación 25 (R25c) -- José: los 3 Media Kits reales (ES/EN/NL
   -- únicos ficheros físicos existentes en assets/docs/, nunca se
   fabrican FR/DE/RU inexistentes) se leían como una lista vertical suelta
   y left-aligned. Se agrupan en una única fila compacta, ordenada y
   centrada, con casillas de tamaño mínimo uniforme -- .cv-media-kit-link
   sigue blanco/negro y sin relleno crema (T309 Recuperación 21), aquí
   solo se añade el marco/agrupación cuando vive dentro de
   .cv-media-kits (no afecta al enlace "volver al inicio" de la
   confirmación, que sigue siendo texto sobrio suelto). */
.cv-media-kits { text-align: center; margin: var(--cv-space-4) 0; }
.cv-media-kits h2 { font-size: 20px; font-weight: 700; margin: 0 0 var(--cv-space-3); }
.cv-media-kits ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cv-space-2);
}
.cv-media-kits li { flex: 0 0 auto; }
.cv-media-kits .cv-media-kit-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 190px; min-height: 44px; padding: 0 var(--cv-space-3);
  border: 1px solid var(--cv-secondary); border-radius: 0;
}
.cv-media-kits .cv-media-kit-link:hover, .cv-media-kits .cv-media-kit-link:focus {
  border-color: var(--cv-primary);
}

.cv-field-checkbox {
  display: flex; align-items: flex-start; gap: var(--cv-space-2);
  margin-bottom: var(--cv-space-3);
}
.cv-field-checkbox input[type="checkbox"] {
  width: 22px; height: 22px; min-width: 22px; margin-top: 2px;
}
.cv-field-checkbox label { font-weight: 400; color: var(--cv-text); }

/* Ocultación accesible del campo honeypot: invisible para personas
   videntes y para lectores de pantalla (aria-hidden + tabindex="-1"),
   pero presente en el DOM y en el flujo de tabulación de un bot que no
   respeta CSS. Nunca "display:none" a secas -- algunos rastreadores
   simples lo ignoran; esta técnica es la recomendada por WCAG. */
.cv-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cv-form-summary-errors {
  border: 1px solid var(--cv-primary);
  border-radius: var(--cv-radius);
  padding: var(--cv-space-3);
  margin-bottom: var(--cv-space-4);
  background: color-mix(in srgb, var(--cv-primary) 6%, white);
}
.cv-form-summary-errors h2 { color: var(--cv-primary); font-size: 18px; margin-bottom: var(--cv-space-2); }
.cv-form-summary-errors ul { margin: 0; padding-left: var(--cv-space-4); }
.cv-form-summary-errors a { color: var(--cv-primary); font-weight: 700; }

.cv-form-confirmation {
  border: 1px solid var(--cv-success);
  border-radius: var(--cv-radius);
  padding: var(--cv-space-4);
  background: color-mix(in srgb, var(--cv-success) 8%, white);
}
.cv-form-confirmation h1 { color: var(--cv-success); }

.cv-field-invalid input, .cv-field-invalid select, .cv-field-invalid textarea {
  border-color: var(--cv-primary);
}