/* ==========================================================================
   Seguros de viaje · asesor (/buscar/seguros/) y catálogo de pólizas en Puente (/agencia/seguros/)
   --------------------------------------------------------------------------
   · Sobre las fichas de luz.css y las clases bq- del buscador común; todo lo propio empieza
     por «seg-» (buscador) o «segp-» (Puente), así no pisa a nadie.
   · El estado (cumple / no cumple / no lo dice) va SIEMPRE en el texto; el color y el icono
     solo lo refuerzan. Colores de estado de luz.css, que dan AA sobre blanco.
   · Puntos de corte de la casa (700 y 900 px). Sin desbordes a 320 px.
   ========================================================================== */

/* ---------- el asesor ---------- */
.seg-asesor .bq-campos + .bq-campos { margin-top: 0; }
/* Llegando de un enlace que solo sabe el viaje (el taller): lo que falta se pide una vez, sobre esos campos. */
.seg-falta-quien { margin: 0 0 var(--e4); max-width: none; }
.seg-cubrir { margin: 0; padding: var(--e4) 0 0; border: 0; border-top: 1px solid var(--borde); min-width: 0; }
.seg-cubrir legend { padding: 0; margin-bottom: var(--e3); font: 650 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta);
  text-transform: uppercase; letter-spacing: .1em; }
.seg-cubrir legend .opcional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--suave); }
.seg-cubrir-rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  align-items: start; }
.seg-deportes { display: grid; gap: var(--e2); min-width: 0; }
.seg-deportes .casilla { align-items: center; min-height: 32px; color: var(--tinta); cursor: pointer; }
.seg-rotulo { margin: 0; font: 600 var(--t-xs)/1.2 var(--f-texto); color: var(--tinta); }
.seg-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); }
.seg-enviar .boton { min-height: 48px; }

/* ---------- lo que exige el viaje · cómo funciona ---------- */
.seg-requisitos, .seg-como { margin-top: var(--e5); padding: var(--e5); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-g); display: grid; gap: var(--e4); }
.seg-titulo { font-size: var(--t-l); }
.seg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.seg-req, .seg-aviso { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--radio);
  border: 1px solid var(--borde); border-left: 4px solid var(--mal); background: var(--fondo); font-size: var(--t-s); }
.seg-aviso.recomendacion { border-left-color: var(--info); }
.seg-aviso.nota { border-left-color: var(--aviso); }
.seg-req p, .seg-aviso p { margin: 0; max-width: 60ch; }
.seg-req-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); color: var(--tinta); }
.seg-req-quien { color: var(--tinta); font-weight: 560; }
.seg-cita { font-family: var(--f-display); font-style: italic; color: var(--texto); }
.seg-fuente, .seg-sin-req, .seg-catalogo, .seg-aviso-linea { display: flex; gap: 8px; align-items: flex-start; }
.seg-fuente { font-size: var(--t-xs); color: var(--suave); }
.seg-fuente .ico, .seg-aviso-linea .ico, .seg-catalogo .ico, .seg-sin-req .ico { flex: none; margin-top: 2px; }
.seg-fuente a { overflow-wrap: anywhere; }
.seg-nota, .seg-legal { margin: 0; font-size: var(--t-xs); color: var(--suave); max-width: 78ch; }
.seg-sin-req { margin: 0; font-size: var(--t-s); }
.seg-sin-req .ico { color: var(--bien); }
.seg-sin-req.duda .ico { color: var(--aviso); }
.seg-pasos { margin: 0; padding-left: 1.3em; display: grid; gap: var(--e2); font-size: var(--t-s); max-width: 78ch; }
.seg-pasos b { color: var(--tinta); }
/* Medida de lectura de la casa (60ch, SISTEMA-DE-DISENO): con las pólizas sin cotejar la frase pasa de 160 letras. */
.seg-catalogo { margin: 0; padding: var(--e3) var(--e4); border-radius: var(--radio); background: var(--crema); font-size: var(--t-s); max-width: 60ch; }
.seg-catalogo .ico { color: var(--ambar); }

/* ---------- la tarjeta ---------- */
.seg-veredictos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); }
.seg-veredictos li { display: flex; gap: 8px; align-items: flex-start; color: var(--tinta); }
.seg-veredictos .ico { flex: none; margin-top: 2px; }
.seg-veredictos .bien .ico { color: var(--bien); }
.seg-veredictos .mal .ico { color: var(--mal); }
.seg-veredictos .duda .ico { color: var(--aviso); }
.seg-veredictos .mal span { color: var(--color-mal-texto); }
.seg-coberturas { margin: 0; display: grid; gap: var(--e3) var(--e4); grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  padding: var(--e3) 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seg-coberturas div { min-width: 0; }
.seg-coberturas dt { font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.seg-coberturas dd { margin: 4px 0 0; font: 600 var(--t-s)/1.35 var(--f-texto); color: var(--tinta); }
.seg-no-dice { font-weight: 450; color: var(--suave); }
.seg-matiz { display: block; font-weight: 450; font-size: var(--t-xs); color: var(--suave); }
.seg-pedido { display: grid; gap: var(--e2); }
.seg-aviso-linea { margin: 0; font-size: var(--t-xs); color: var(--texto); }
.seg-aviso-linea .ico { color: var(--aviso); }
.seg-notas { margin: 0; font-size: var(--t-xs); color: var(--suave); }
.seg-pie { display: grid; gap: var(--e2); }
.seg-procedencia { margin: 0; font-size: var(--t-xs); color: var(--suave); }
.seg-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
.seg-enlaces a { min-height: 32px; }
.seg-con-visado { display: inline-block; padding-block: 6px; font-weight: 600; }
.seg-con-visado .ico { vertical-align: -2px; margin-left: 2px; }

/* ==========================================================================
   Puente · catálogo de pólizas
   ========================================================================== */
.segp-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e4);
  margin-bottom: var(--e5); }
.segp-entradilla { margin: var(--e2) 0 0; color: var(--suave); max-width: 72ch; }
.segp-avisos { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
.segp-zonas { margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); display: grid; gap: 2px; }
.segp-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.segp-acciones { text-align: right; white-space: nowrap; }
.segp-fila-baja td { color: var(--suave); }
.segp-rejilla { display: grid; gap: var(--e5); align-items: start; }
.segp-rejilla > .panel + .panel { margin-top: 0; }           /* el hueco lo pone la rejilla (luz.css apila paneles) */
.segp-fecha, .segp-tabla .etiqueta { white-space: nowrap; }
.segp-bloque { display: grid; gap: var(--e4); }
.segp-bloque h2 { font-size: var(--t-l); }
.segp-pista { margin: 0; font-size: var(--t-xs); color: var(--suave); max-width: 72ch; }
.segp-tres { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.segp-casillas { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); }
.segp-casillas .casilla { color: var(--tinta); align-items: center; }
.segp-guardar { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.segp-baja { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde); display: grid; gap: var(--e2); }
.segp-baja .boton { justify-self: start; color: var(--mal); border-color: var(--mal); }
.segp-baja .boton:hover { background: var(--mal-f); color: var(--mal); }
.segp-vacio { display: grid; justify-items: center; gap: var(--e3); padding: var(--e7) var(--e4); text-align: center; color: var(--suave); }
.segp-vacio .ico { color: var(--ambar); }

/* Puente: la columna de acciones lleva texto solo para lectores (position: absolute); sin un
   contenedor posicionado, se salía de la tabla desplazable y ensanchaba toda la página en el móvil. */
.segp-tabla { position: relative; }

/* ---------- el formulario plegado después de buscar ---------- */
/* Resumido en una línea («Tu viaje: …»); abierto sin JavaScript, plegado en el móvil por el script
   de la plantilla, para que los requisitos y las pólizas no queden a dos pantallas. */
.seg-plegable { min-width: 0; }
.seg-plegable-boton { display: flex; align-items: center; gap: var(--e3); min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--t-s); color: var(--tinta); }
.seg-plegable-boton::-webkit-details-marker { display: none; }
.seg-plegable-boton .ico { flex: none; color: var(--ambar); }
.seg-viaje-resumen { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.seg-cambiar { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-xs)/1 var(--f-texto);
  letter-spacing: .08em; text-transform: uppercase; color: var(--noche); }
.seg-cambiar::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform .18s var(--curva); }
.seg-plegable[open] > .seg-plegable-boton .seg-cambiar::after { transform: translateY(25%) rotate(-135deg); }
.seg-plegable[open] > .seg-plegable-boton { margin-bottom: var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--borde); }
.seg-plegable-cuerpo { display: grid; gap: var(--e4); }
.seg-cubrir { margin-top: var(--e2); }
/* Los importes no se parten al final de la línea («60.000» arriba y «€» abajo). */
.seg-coberturas .bq-cifra { white-space: nowrap; }

@media (max-width: 699px) {
  .seg-requisitos, .seg-como { padding: var(--e4); }
  .seg-req, .seg-aviso { padding: var(--e3); }
}
@media (min-width: 900px) {
  .segp-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .seg-cambiar::after { transition: none; }
}