/* Tarificador de salud reducido: paso 1 compacto para banners (peticion-banner.php).
   La cabecera y los colores de salud-reducido.css, con menos altura: contacto, datos de los asegurados,
   privacidad y boton. Todo va dentro de .tsrb para no chocar con el CSS de la web (Bootstrap) ni con el de
   otros tarificadores. Las filas se adaptan al ancho del hueco del banner (container queries), no al de la
   pantalla. */

.tsrb {
	--azul: #1d4a8b;
	--azul-oscuro: #0e2448;
	--azul-suave: #e8eef8;
	--naranja: #ff5a0a;
	--naranja-oscuro: #e64a00;
	--verde: #2f9e5b;
	--rojo: #c62828;
	--rojo-suave: #fdecec;
	--fondo-campo: #f7f9fc;
	--texto: #1b2433;
	--texto-suave: #5d6b82;
	--linea: #e3e8f0;
	--linea-fuerte: #d3dbe7;
	--sombra: 0 1px 2px rgba(16, 32, 64, .06), 0 8px 28px rgba(16, 32, 64, .1);
	--hueco: 14px;

	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	container-type: inline-size;
	color: var(--texto);
	font: 14px/1.4 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}
.tsrb *, .tsrb *::before, .tsrb *::after { box-sizing: border-box; }
.tsrb [hidden] { display: none !important; }
.tsrb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tsrb-aviso-js { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--rojo-suave); color: var(--rojo); font-weight: 600; }

/* ---------- Cabecera (la de salud-reducido.css, algo mas baja) ---------- */
.tsrb-cabecera {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 16px 20px;
	border-radius: 16px;
	background:
		radial-gradient(circle at 92% -20%, rgba(255, 90, 10, .35), transparent 45%),
		linear-gradient(120deg, #1b437f 0%, #15356a 55%, #0e2448 100%);
	color: #fff;
	box-shadow: 0 10px 30px rgba(14, 36, 72, .22);
	overflow: hidden;
}
.tsrb-cabecera::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -80px;
	width: 220px;
	height: 220px;
	border: 36px solid rgba(255, 255, 255, .04);
	border-radius: 50%;
	pointer-events: none;
}
.tsrb-cabecera-icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	background: rgba(255, 255, 255, .08);
	color: #ff7a35;
}
.tsrb-cabecera-icono svg { width: 24px; height: 24px; stroke-width: 1.8; }
.tsrb-cabecera-texto { flex: 1; min-width: 0; }
.tsrb .tsrb-antetitulo { margin: 0 0 2px; color: #ffa36e; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tsrb .tsrb-titulo { margin: 0; color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.tsrb .tsrb-subtitulo { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: 13px; }
.tsrb-pasos {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	list-style: none;
}
.tsrb-pasos li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	color: rgba(255, 255, 255, .7);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.tsrb-pasos li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .15); font-size: 11px; }
.tsrb-pasos li.activo { background: #fff; color: var(--texto); }
.tsrb-pasos li.activo span { background: var(--naranja); color: #fff; }

/* ---------- Tarjeta ---------- */
.tsrb-tarjeta {
	margin: 12px 0 0;
	padding: 22px 24px 24px;
	border: 1px solid var(--linea);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sombra);
}
.tsrb .tsr-resumen-error {
	margin: 0 0 10px;
	padding: 7px 10px;
	border-radius: 8px;
	background: var(--rojo-suave);
	color: var(--rojo);
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Filas: tres columnas iguales ---------- */
.tsrb-fila { display: flex; flex-wrap: wrap; gap: 14px var(--hueco); align-items: flex-start; }
.tsrb-fila + .tsrb-fila { margin-top: 14px; }
.tsrb-fila > .tsr-campo,
.tsrb-datos .tsr-asegurado,
.tsrb-anadir { flex: 0 0 calc((100% - 2 * var(--hueco)) / 3); min-width: 0; margin: 0; }

/* Los asegurados son hijos de la rejilla (asi el 1 va antes del codigo postal y los añadidos, detras del mes,
   uno al lado del otro). El orden se pone con «order». */
.tsrb .tsr-asegurados { display: contents; }
.tsrb-datos .tsr-asegurado { order: 4; }
.tsrb-datos .tsr-asegurado:first-child { order: 1; }
.tsrb-cp { order: 2; }
.tsrb-mes { order: 3; }
.tsrb-anadir { order: 5; }

.tsrb .tsrb-etiqueta {
	display: block;
	margin: 0 0 5px;
	color: var(--texto-suave);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Con un solo asegurado, su etiqueta dice «Fecha de nacimiento»; con varios, «Asegurado 1, 2...» (lo pone el JS) */
.tsrb .tsr-asegurado:only-child .tsr-asegurado-nombre { font-size: 0; }
.tsrb .tsr-asegurado:only-child .tsr-asegurado-nombre::before { content: "Fecha de nacimiento"; font-size: 12px; }

/* ---------- Campos ---------- */
.tsrb input[type="text"],
.tsrb input[type="tel"],
.tsrb input[type="email"],
.tsrb select {
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid var(--linea-fuerte);
	border-radius: 10px;
	background: var(--fondo-campo);
	color: var(--texto);
	font: inherit;
	font-size: 15px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.tsrb select { padding-right: 26px; cursor: pointer; }
.tsrb input::placeholder { color: #9aa6b8; }
.tsrb input:focus, .tsrb select:focus {
	outline: none;
	border-color: var(--azul);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(29, 74, 139, .15);
}
.tsrb .con-error input, .tsrb .con-error select { border-color: var(--rojo); background: #fffafa; }
.tsrb .tsr-error { margin: 2px 0 0; color: var(--rojo); font-size: 12px; line-height: 1.3; }
.tsrb .tsr-error:empty { display: none; }

/* Edad y provincia: dentro del campo, a la derecha (y solo se reserva sitio cuando se ven) */
.tsrb .tsr-asegurado-campo, .tsrb-con-dato { position: relative; }
.tsrb .tsr-edad, .tsrb .tsr-provincia {
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
	color: var(--verde);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}
.tsrb .tsr-edad:empty, .tsrb .tsr-provincia:empty { display: none; }
.tsrb .tsr-asegurado-campo:has(.tsr-edad:not(:empty)) input { padding-right: 62px; }
.tsrb-con-dato:has(.tsr-provincia:not(:empty)) input { padding-right: 80px; }

/* Quitar asegurado: aspa en la esquina del campo */
.tsrb .tsr-quitar {
	position: absolute;
	top: -7px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--texto-suave);
	color: #fff;
	cursor: pointer;
}
.tsrb .tsr-quitar svg { width: 11px; height: 11px; stroke-width: 3; }
.tsrb .tsr-quitar:hover { background: var(--rojo); }

/* Añadir persona: a la altura de los campos (debajo de donde irian las etiquetas) */
.tsrb-anadir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 42px;
	padding: 0 10px;
	border: 1.5px dashed var(--azul);
	border-radius: 10px;
	background: #fff;
	color: var(--azul);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}
/* Si comparte fila con asegurados, baja hasta la altura de sus campos (los asegurados añadidos van de tres en
   tres detras del mes: comparte fila cuando hay 2, 3, 5, 6... asegurados) */
.tsrb-datos:has(.tsr-asegurado:nth-child(3n+2):last-child) .tsrb-anadir,
.tsrb-datos:has(.tsr-asegurado:nth-child(3n):last-child) .tsrb-anadir { margin-top: 21px; }
.tsrb-anadir:hover { background: var(--azul-suave); }
.tsrb-anadir:disabled { opacity: .45; cursor: default; }

/* ---------- Mutualidad / motivo ---------- */
.tsrb-opciones { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 16px; }
.tsrb-opciones-titulo { color: var(--texto); font-size: 13px; font-weight: 700; }
.tsrb .tsr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tsrb .tsr-chip { position: relative; margin: 0; cursor: pointer; }
.tsrb .tsr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tsrb .tsr-chip span {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--fondo-campo);
	font-size: 13px;
	font-weight: 600;
}
.tsrb .tsr-chip input:checked + span { border-color: var(--azul); background: var(--azul); color: #fff; }
.tsrb .tsr-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(29, 74, 139, .25); }
.tsrb-opciones .tsr-error { flex-basis: 100%; }

/* ---------- Privacidad ---------- */
.tsrb-legal { margin: 20px 0 0; }
.tsrb-check { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--texto); font-size: 13px; font-weight: 400; line-height: 1.35; cursor: pointer; }
.tsrb-check input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--azul); }
.tsrb-check a, .tsrb-texto-legal a { color: var(--azul); text-decoration: underline; }
.tsrb .con-error .tsrb-check { color: var(--rojo); }
.tsrb-texto-legal { margin: 8px 0 0; color: var(--texto-suave); font-size: 8.5px; line-height: 1.4; }
.tsrb-texto-legal p { margin: 0; }

/* ---------- Boton ---------- */
.tsrb-enviar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin: 18px 0 0;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, var(--naranja) 0%, var(--naranja-oscuro) 100%);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(230, 74, 0, .3);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.tsrb-enviar:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(230, 74, 0, .38); }
.tsrb-enviar:disabled { opacity: .7; transform: none; cursor: wait; }
.tsrb-enviar svg { width: 18px; height: 18px; }

/* ---------- Robots y calculando (igual que salud-reducido.css) ---------- */
.tsr-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tsrb .tsr-cargando {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(14, 36, 72, .55);
	backdrop-filter: blur(3px);
}
.tsrb .tsr-cargando-caja {
	max-width: 360px;
	padding: 30px 28px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--sombra);
	text-align: center;
}
.tsrb .tsr-cargando-caja p { margin: 16px 0 0; color: var(--texto-suave); font-size: 14px; }
.tsrb .tsr-cargando-caja strong { color: var(--texto); font-size: 17px; }
.tsrb .tsr-spinner {
	width: 48px;
	height: 48px;
	margin: 0 auto;
	border: 4px solid var(--azul-suave);
	border-top-color: var(--naranja);
	border-radius: 50%;
	animation: tsrb-gira .8s linear infinite;
}
@keyframes tsrb-gira { to { transform: rotate(360deg); } }

/* ---------- Hueco estrecho (columna de un banner, movil): dos columnas ---------- */
@container (max-width: 640px) {
	.tsrb-pasos { order: 3; width: 100%; padding: 0; background: none; }
}
@container (max-width: 520px) {
	.tsrb-cabecera { padding: 14px 16px; }
	.tsrb-tarjeta { padding: 18px 16px 20px; }
	.tsrb-fila > .tsr-campo,
	.tsrb-datos .tsr-asegurado,
	.tsrb-anadir { flex-basis: calc((100% - var(--hueco)) / 2); }
	.tsrb-contacto .tsr-campo:last-child { flex-basis: 100%; }   /* el email, entero */
	/* Codigo postal y mes arriba; debajo, los asegurados de dos en dos y el boton de añadir */
	.tsrb-cp { order: 1; }
	.tsrb-mes { order: 2; }
	.tsrb-datos .tsr-asegurado, .tsrb-datos .tsr-asegurado:first-child { order: 3; }
	.tsrb-anadir { order: 4; }
	.tsrb-datos:has(.tsr-asegurado:nth-child(3n+2):last-child) .tsrb-anadir,
	.tsrb-datos:has(.tsr-asegurado:nth-child(3n):last-child) .tsrb-anadir { margin-top: 0; }
	.tsrb-datos:has(.tsr-asegurado:nth-child(odd):last-child) .tsrb-anadir { margin-top: 21px; }
}
@container (max-width: 400px) {
	.tsrb-cabecera-icono { display: none; }
	.tsrb .tsrb-titulo { font-size: 19px; }
	.tsrb .tsrb-subtitulo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tsrb * { transition: none !important; }
	.tsrb .tsr-spinner { animation: tsrb-gira 1.6s linear infinite !important; }
}

/* Movil: campos con letra de 16px. Con menos, el iPhone amplia la pantalla al tocar un campo y la pagina se
   desplaza a los lados. Lo usan todos los banners que cargan este CSS (salud, dental, mascotas, viaje y vida). */
@media (max-width: 767.98px) {
	.tsrb input:not([type="checkbox"]):not([type="radio"]),
	.tsrb select,
	.tsrb textarea { font-size: 16px; }
}