/* ============================================================================================
   /contratacion/estilos.css
   Hoja de estilo propia del sistema de contratación online.

   Todo va prefijado con «tc-» y se aplica solo dentro de .tc-app: no se modifica ninguna hoja
   de estilo compartida del sitio (§2). Se mantiene el lenguaje visual de sanitas.consulting
   (tipografía Montserrat, azul #0079c8 y azul oscuro #0d1846), reutilizando las variables de color
   del proyecto cuando existen.

   Puntos de ruptura revisados de verdad (§47): 390, 430, 768, 1024, 1280 y 1440 px.
   ============================================================================================ */

/* TIPOGRAFÍA (v3): la hoja declara sus PROPIAS @font-face de Montserrat. El módulo carga solo esta
   hoja (no /styles/global.css, para no arrastrar los estilos compartidos del sitio, §2) y las
   @font-face de Montserrat viven precisamente en global.css: sin declararlas aquí, el navegador no
   tiene la familia, cae a la fuente del sistema (Segoe UI) y los textos miden y parten de otra
   manera, con lo que las tarjetas se desalinean entre sí. Son los mismos ficheros del sitio. */
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat/Montserrat-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

.tc-app {
  --tc-azul: #0079c8;
  --tc-azul-oscuro: #0d1846;
  --tc-texto: #333333;
  --tc-gris: #6c6e71;
  --tc-borde: #d9dce1;
  --tc-fondo-suave: #f1efeb;
  --tc-error: #c4262e;
  --tc-ok: #1b883c;
  --tc-aviso: #e8a600;
  --tc-radio: 8px;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  color: var(--tc-texto);
  max-width: 100%;
  box-sizing: border-box;
}

.tc-app *,
.tc-app *::before,
.tc-app *::after {
  box-sizing: border-box;
}

.tc-app .tc-paso {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.tc-app .tc-paso--tracking {
  max-width: 1180px;
}


/* ---------------------------------------------------------------- progreso y cabecera de paso */
.tc-app .tc-progreso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.tc-app .tc-progreso__paso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--tc-gris);
}

.tc-app .tc-progreso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--tc-borde);
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
}

.tc-app .tc-progreso__paso--actual {
  color: var(--tc-azul-oscuro);
  font-weight: 700;
}

.tc-app .tc-progreso__paso--actual .tc-progreso__numero {
  background: var(--tc-azul);
}

.tc-app .tc-progreso__paso--hecho .tc-progreso__numero {
  background: var(--tc-ok);
}

.tc-app .tc-paso__titulo {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--tc-azul-oscuro);
  margin: 0 0 0.5rem;
}

.tc-app .tc-paso__texto {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tc-texto);
  margin: 0 0 1.25rem;
}

.tc-app .tc-subtitulo {
  font-size: 1.0625rem;
  color: var(--tc-azul-oscuro);
  border-bottom: 2px solid var(--tc-fondo-suave);
  padding-bottom: 0.375rem;
  margin: 1.75rem 0 1rem;
}

.tc-app .tc-subtitulo--3 {
  font-size: 0.9375rem;
  border-bottom-width: 1px;
}

.tc-app .tc-dato-automatico {
  font-size: 0.8125rem;
  color: var(--tc-gris);
  background: var(--tc-fondo-suave);
  border-left: 3px solid var(--tc-azul);
  padding: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
}


/* --------------------------------------------------------------------------- avisos y errores */
.tc-app .tc-aviso {
  border-radius: var(--tc-radio);
  padding: 0.875rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  border-left: 4px solid var(--tc-azul);
  background: #eef6fc;
}

.tc-app .tc-aviso--exito {
  border-left-color: var(--tc-ok);
  background: #eef8f0;
}

.tc-app .tc-aviso--atencion {
  border-left-color: var(--tc-aviso);
  background: #fdf6e6;
}

.tc-app .tc-aviso--error {
  border-left-color: var(--tc-error);
  background: #fdeeef;
}

.tc-app .tc-aviso__titulo {
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-aviso__texto p {
  margin: 0 0 0.5rem;
}

.tc-app .tc-aviso__texto p:last-child {
  margin-bottom: 0;
}

.tc-app .tc-aviso__lista {
  margin: 0.25rem 0 0 1.125rem;
  padding: 0;
}

.tc-app .tc-error {
  color: var(--tc-error);
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.tc-app .tc-ayuda {
  color: var(--tc-gris);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0.25rem 0 0.5rem;
}

.tc-app .tc-ayuda--centrada {
  text-align: center;
}

.tc-app .tc-sugerencia {
  font-size: 0.8125rem;
  color: var(--tc-aviso);
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.tc-app .tc-obligatorio {
  color: var(--tc-error);
}


/* ------------------------------------------------------------------------------------ campos */
.tc-app .tc-formulario {
  display: block;
}

.tc-app .tc-rejilla {
  display: grid;
  gap: 0 1rem;
}

.tc-app .tc-rejilla--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-app .tc-rejilla--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Domicilio del Tomador: cada fila se alinea a la misma altura aunque solo algunos campos lleven su
   ayuda. La ayuda permanece bajo la etiqueta y el control se ancla al pie de su celda, de modo que
   Número/Bloque, Escalera/Piso/Puerta y Provincia/Localidad/Código postal quedan alineados por filas. */
.tc-app .tc-domicilio .tc-rejilla > .tc-campo { display: flex; flex-direction: column; }
.tc-app .tc-domicilio .tc-rejilla > .tc-campo > input,
.tc-app .tc-domicilio .tc-rejilla > .tc-campo > select { margin-top: auto; }

.tc-app .tc-campo {
  margin-bottom: 1.125rem;
  min-width: 0;
}

.tc-app .tc-campo label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
  margin-bottom: 0.375rem;
}

.tc-app .tc-campo input[type="text"],
.tc-app .tc-campo input[type="email"],
.tc-app .tc-campo input[type="tel"],
.tc-app .tc-campo input[type="password"],
.tc-app .tc-campo select,
.tc-app .tc-campo textarea,
.tc-app .tc-campo input[type="file"] {
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tc-texto);
  background: #fff;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 0.75rem 0.875rem;
  min-height: 48px;
  line-height: 1.3;
}

.tc-app .tc-campo textarea {
  min-height: 96px;
  resize: vertical;
}

.tc-app .tc-campo input[type="file"] {
  padding: 0.625rem 0.75rem;
  background: var(--tc-fondo-suave);
}

.tc-app .tc-campo input:focus,
.tc-app .tc-campo select:focus,
.tc-app .tc-campo textarea:focus {
  outline: 3px solid rgba(0, 121, 200, 0.35);
  outline-offset: 1px;
  border-color: var(--tc-azul);
}

.tc-app .tc-campo--error input,
.tc-app .tc-campo--error select,
.tc-app .tc-campo--error textarea {
  border-color: var(--tc-error);
  background: #fffafa;
}

.tc-app .tc-campo--mitad {
  min-width: 0;
}


/* --------------------------------------------------- preguntas con opciones (SÍ / NO, etc.) */
.tc-app .tc-pregunta {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 0.875rem 1rem 1rem;
  margin: 0 0 1.125rem;
  background: #fff;
  min-width: 0;
}

.tc-app .tc-pregunta--error {
  border-color: var(--tc-error);
  background: #fffafa;
}

.tc-app .tc-pregunta__enunciado {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
  padding: 0 0.25rem;
  line-height: 1.5;
}

.tc-app .tc-pregunta__numero {
  color: var(--tc-azul);
}

.tc-app .tc-pregunta__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.tc-app .tc-opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  cursor: pointer;
  font-size: 0.9375rem;
  background: #fff;
}

.tc-app .tc-opcion input {
  width: 20px;
  height: 20px;
  accent-color: var(--tc-azul);
  margin: 0;
}

.tc-app .tc-opcion:has(input:checked) {
  border-color: var(--tc-azul);
  background: #eef6fc;
  font-weight: 600;
}


/* Opciones que ENVÍAN la selección al servidor (modalidad y forma de pago): funcionan sin JavaScript.
   La opción elegida se marca con aria-pressed="true" (no hay input radio que pueda cambiar la pantalla
   sin pasar por el servidor). */
.tc-app button.tc-opcion {
  font-family: inherit;
  font-size: 0.9375rem;
  color: inherit;
  text-align: left;
}

.tc-app button.tc-opcion:hover,
.tc-app button.tc-opcion:focus {
  border-color: var(--tc-azul);
}

.tc-app button.tc-opcion.tc-opcion--elegida,
.tc-app button.tc-opcion[aria-pressed="true"] {
  border-color: var(--tc-azul);
  background: #eef6fc;
  font-weight: 600;
}


/* Modalidad: tarjeta de opción que además es control de envío. */
.tc-app .tc-modalidades {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.tc-app button.tc-modalidad {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.875rem 1rem;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  color: inherit;
  cursor: pointer;
}

.tc-app button.tc-modalidad:hover,
.tc-app button.tc-modalidad:focus {
  border-color: var(--tc-azul);
}

.tc-app button.tc-modalidad.tc-modalidad--elegida,
.tc-app button.tc-modalidad[aria-pressed="true"] {
  border-color: var(--tc-azul);
  background: #eef6fc;
}

.tc-app .tc-modalidad__cuerpo,
.tc-app .tc-modalidad__nombre,
.tc-app .tc-modalidad__detalle,
.tc-app .tc-modalidad__precio,
.tc-app .tc-modalidad__anual,
.tc-app .tc-modalidad__descuento {
  display: block;
}

.tc-app button.tc-modalidad.tc-modalidad--elegida .tc-modalidad__nombre {
  font-weight: 600;
}

.tc-app .tc-modalidad__detalle,
.tc-app .tc-modalidad__anual,
.tc-app .tc-modalidad__descuento {
  font-size: 0.875rem;
  color: var(--tc-gris);
}

.tc-app .tc-pregunta__detalle {
  margin-top: 0.75rem;
}

.tc-app .tc-pregunta__detalle label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
  margin-bottom: 0.25rem;
}

.tc-app .tc-pregunta__detalle textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 0.625rem 0.75rem;
  min-height: 84px;
}


/* --------------------------------------------------------- casilla de aceptación y checkboxes */
.tc-app .tc-campo--check {
  margin: 1.75rem 0;
}

.tc-app .tc-check {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--tc-texto);
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: var(--tc-fondo-suave);
  padding: 0.875rem 1rem;
  cursor: pointer;
}

.tc-app .tc-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--tc-azul);
  margin: 0;
}

.tc-app .tc-check a {
  color: var(--tc-azul);
  text-decoration: underline;
}


/* ------------------------------------------------------------------------------- acciones */
.tc-app .tc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0 0;
}

.tc-app .tc-acciones--auxiliar {
  margin-top: 1rem;
}

.tc-app .tc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--tc-azul);
  border-radius: var(--tc-radio);
  background: var(--tc-azul);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
}

.tc-app .tc-boton:hover,
.tc-app .tc-boton:focus {
  background: #00629f;
  border-color: #00629f;
  color: #fff;
}

.tc-app .tc-boton--secundario {
  background: #fff;
  color: var(--tc-azul);
}

.tc-app .tc-boton--secundario:hover,
.tc-app .tc-boton--secundario:focus {
  background: #eef6fc;
  color: var(--tc-azul);
}

.tc-app .tc-boton--terciario {
  background: transparent;
  border-color: transparent;
  color: var(--tc-gris);
  text-decoration: underline;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tc-app .tc-boton--terciario:hover,
.tc-app .tc-boton--terciario:focus {
  background: transparent;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-boton[disabled],
.tc-app .tc-boton[disabled]:hover {
  background: #c9ccd2;
  border-color: #c9ccd2;
  color: #fff;
  cursor: not-allowed;
}


/* ------------------------------------------------------------------------ bloques dinámicos */
.tc-app .tc-bloque {
  margin-top: 0.5rem;
}


/* Con JavaScript activo, el propio script decide qué bloques se ven. Sin JavaScript se ven todos
   y el servidor aplica las reglas según el tipo declarado: el formulario nunca queda inutilizado. */
.tc-app .tc-oculto {
  display: none !important;
}

.tc-app .tc-total {
  font-size: 0.875rem;
  color: var(--tc-azul-oscuro);
  background: #eef6fc;
  border-radius: var(--tc-radio);
  padding: 0.625rem 0.875rem;
  margin: 0 0 1.25rem;
}

.tc-app .tc-total__nota {
  display: block;
  font-size: 0.8125rem;
  color: var(--tc-gris);
  font-weight: 400;
  margin-top: 0.25rem;
}


/* --------------------------------------------------------------------------- Turnstile */
.tc-app .tc-turnstile {
  margin: 1.25rem 0;
  min-height: 65px;
}


/* --------------------------------------------------------------------- fin del proceso (TOM 5) */
/* Reproducción del diseño aprobado: tarjeta del número de orden, una fila por asegurado con su
   enlace y su código (cada pieza copiable) y su fecha/edad, y los botones de enviar y copiar. */
.tc-app .tc-final-exito {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid #b7e4c7;
  background: #f1fbf4;
  border-radius: var(--tc-radio);
  padding: 1.125rem 1.25rem;
  margin: 0 0 1.5rem;
}
.tc-app .tc-final-exito__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tc-ok);
  color: #fff;
}
.tc-app .tc-final-exito__texto {
  min-width: 0;
}
.tc-app .tc-final-exito__texto .tc-paso__titulo {
  margin-top: 0;
}
/* §1.3 — Aviso de confirmación por correo dentro del recuadro verde de éxito, debajo del mensaje
   principal. Misma línea gráfica (verde de éxito y bloques con borde suave); en caso de fallo pasa
   a un tono de atención para no afirmar un envío que no se pudo confirmar. */
.tc-app .tc-final-exito__correo {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #bfe3cd;
}
.tc-app .tc-final-exito__correo-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1c6b3a;
}
.tc-app .tc-final-exito__correo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1c6b3a;
}
.tc-app .tc-final-exito__correo-texto {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #33513f;
}
.tc-app .tc-final-exito__correo--aviso {
  border-top-color: #f0d59a;
}
.tc-app .tc-final-exito__correo--aviso .tc-final-exito__correo-titulo,
.tc-app .tc-final-exito__correo--aviso .tc-final-exito__correo-icono {
  color: #8a5a00;
}
.tc-app .tc-final-exito__correo--aviso .tc-final-exito__correo-texto {
  color: #6a4b12;
}
.tc-app .tc-final-seccion {
  margin-top: 0;
}
.tc-app .tc-orden-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
  /* Reserva permanente de una franja inferior para la confirmación de copiado: así el número de orden
     y el botón NO se mueven al mostrarla (antes la nota ocupaba una fila extra y desplazaba todo). */
  padding: 0.875rem 1.125rem 2.35rem;
  position: relative;
  margin: 0 0 1.25rem;
}
.tc-app .tc-orden-card__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tc-app .tc-orden-card__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--tc-azul);
  color: #fff;
}
.tc-app .tc-orden-card__datos {
  display: flex;
  flex-direction: column;
}
.tc-app .tc-orden-card__etiqueta {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--tc-gris);
}
.tc-app .tc-orden-card__numero {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-orden-card__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

/* La confirmación de copiado de la tarjeta vive en la franja reservada: nunca altera la composición. */
.tc-app .tc-orden-card .tc-copiado-nota {
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 0.7rem;
  flex: none;
  margin: 0;
}

.tc-app .tc-lista-ases {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

.tc-app .tc-ase-fila {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 1rem;
  background: #fff;
}
.tc-app .tc-ase-fila__cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tc-app .tc-ase-fila__numero {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e5f1fb;
  color: var(--tc-azul);
  font-size: 0.8125rem;
  font-weight: 700;
}
.tc-app .tc-ase-fila__icono {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-ase-fila__texto {
  display: flex;
  flex-direction: column;
}
.tc-app .tc-ase-fila__titulo {
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-ase-fila__dato {
  font-size: 0.8125rem;
  color: var(--tc-gris);
}
.tc-app .tc-ase-fila__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.625rem 1rem;
  margin-top: 0.75rem;
}
.tc-app .tc-ase-fila__campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.tc-app .tc-ase-fila__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tc-gris);
}
.tc-app .tc-ase-fila__control {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: var(--tc-fondo-suave);
  padding: 0.375rem 0.5rem;
}
.tc-app .tc-ase-fila__valor {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-ase-fila__valor--enlace {
  color: var(--tc-azul);
}
.tc-app .tc-ase-fila__copiar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cfe3f6;
  border-radius: 6px;
  background: #fff;
  color: var(--tc-azul);
  cursor: pointer;
}
.tc-app .tc-ase-fila__acciones {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: stretch;
}

/* Confirmación de copiado (JS): una sola línea, nunca desplaza la composición. */
.tc-app .tc-copiado-nota {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tc-ok);
}

/* Texto solo para lectores de pantalla (etiquetas accesibles sin alterar el diseño). */
.tc-app .tc-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------------------------- tracking */
.tc-app .tc-contadores {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 1.5rem;
}

.tc-app .tc-contadores--ficha {
  margin-top: 1.25rem;
}

.tc-app .tc-contador {
  border: 1px solid var(--tc-borde);
  border-top: 4px solid var(--tc-azul);
  border-radius: var(--tc-radio);
  padding: 0.875rem 1rem;
  background: #fff;
}

.tc-app .tc-contador--completadas {
  border-top-color: var(--tc-ok);
}

.tc-app .tc-contador--pendientes {
  border-top-color: var(--tc-aviso);
}

.tc-app .tc-contador__etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.8px;
  color: var(--tc-gris);
  margin: 0 0 0.25rem;
}

.tc-app .tc-contador__cifra {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  margin: 0;
}

.tc-app .tc-ficha__datos {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  margin: 0 0 1.25rem;
}

/* Etiqueta y valor en dos columnas alineadas por su línea base: el valor no se parte en trozos
   raros («Sanitas / Profesionales / Plus (Copago / bajo)») y las filas quedan ordenadas. */
.tc-app .tc-ficha__datos div {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 0.5rem;
  font-size: 0.875rem;
}

.tc-app .tc-ficha__datos dt {
  color: var(--tc-gris);
  min-width: 0;
  white-space: nowrap;
}

.tc-app .tc-ficha__datos dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-tabla-envoltura {
  max-width: 100%;
  overflow-x: auto;
}

.tc-app .tc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 720px;
}

.tc-app .tc-tabla th,
.tc-app .tc-tabla td {
  border-bottom: 1px solid var(--tc-borde);
  padding: 0.5rem 0.625rem;
  text-align: left;
  white-space: nowrap;
}

.tc-app .tc-tabla thead th {
  background: var(--tc-fondo-suave);
  color: var(--tc-azul-oscuro);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.tc-app .tc-tabla__fila--buscada {
  background: #eef6fc;
}

.tc-app .tc-formulario--codigo,
.tc-app .tc-formulario--login {
  max-width: 460px;
}

.tc-app .tc-formulario--buscar .tc-acciones {
  margin-top: 0.75rem;
}

.tc-app .tc-formulario--salir {
  margin-top: 2rem;
}



/* ============================================================================================
   Adaptaciones por tamaño (§47). Se revisan 390, 430, 768, 1024, 1280 y 1440 px.
   ============================================================================================ */
@media screen and (max-width: 1024px) {
  .tc-app .tc-paso--tracking {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media screen and (max-width: 768px) {
  .tc-app .tc-paso {
    padding: 1rem 0.75rem 2rem;
  }
  .tc-app .tc-paso__titulo {
    font-size: 1.25rem;
  }
  .tc-app .tc-rejilla--2,
  .tc-app .tc-rejilla--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .tc-app .tc-ficha__datos {
    grid-template-columns: minmax(0, 1fr);
  }
  .tc-app .tc-ficha__datos div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem 0;
  }
  .tc-app .tc-ficha__datos dt {
    min-width: 0;
  }
}


/* En pantallas estrechas la tabla de tracking pasa a fichas para evitar el scroll horizontal. */
@media screen and (max-width: 768px) {
  .tc-app .tc-tabla {
    min-width: 0;
  }
  .tc-app .tc-tabla thead {
    display: none;
  }
  .tc-app .tc-tabla tr {
    display: block;
    border: 1px solid var(--tc-borde);
    border-radius: var(--tc-radio);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
  }
  .tc-app .tc-tabla td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--tc-borde);
    white-space: normal;
    padding: 0.375rem 0;
  }
  .tc-app .tc-tabla td:last-child {
    border-bottom: 0;
  }
  .tc-app .tc-tabla td::before {
    content: attr(data-cabecera);
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    color: var(--tc-gris);
    font-weight: 600;
  }
}

@media screen and (max-width: 430px) {
  .tc-app .tc-paso {
    padding: 0.875rem 0.625rem 1.75rem;
  }
  .tc-app .tc-paso__titulo {
    font-size: 1.125rem;
  }
  .tc-app .tc-subtitulo {
    margin-top: 1.25rem;
  }
  .tc-app .tc-orden-card__numero {
    font-size: 1.25rem;
  }
  .tc-app .tc-acciones {
    flex-direction: column;
    align-items: stretch;
  }
  .tc-app .tc-boton {
    width: 100%;
  }
  .tc-app .tc-ase-fila__acciones .tc-boton {
    width: 100%;
  }
  .tc-app .tc-pregunta__opciones {
    gap: 0.5rem;
  }
  .tc-app .tc-opcion {
    flex: 1 1 8rem;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 390px) {
  .tc-app .tc-progreso {
    gap: 0.375rem 0.625rem;
  }
  .tc-app .tc-progreso__paso {
    font-size: 0.75rem;
  }
  .tc-app .tc-clase-prueba-390 {
    display: none;   /* marcador reservado: sin reglas activas, evita selectores vacíos */
  }
}

@media screen and (min-width: 1280px) {
  .tc-app .tc-paso {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 1440px) {
  .tc-app .tc-paso__titulo {
    font-size: 1.625rem;
  }
}




/* ==================================================================================================
   V2 — piezas nuevas del flujo TOMADOR: acordeones del paso 4 (tomador), tarjetas de precio del paso
   3.2, modal de confirmación y avisos de revalidación. Todo con prefijo del módulo (tc-) y aplicado
   solo dentro de .tc-app, para no tocar ninguna hoja de estilos global del sitio.
   ================================================================================================== */
/* ------------------------------------------- acordeones del paso 4 (estado Pendiente/Verificado/Revise) */
.tc-app .tc-acordeon {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.tc-app .tc-acordeon__cabecera {
  margin: 0;
}
.tc-app .tc-acordeon__boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--tc-fondo-suave);
  border: 0;
  border-left: 4px solid var(--tc-gris);
  font: inherit;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  text-align: left;
  cursor: pointer;
}
.tc-app .tc-acordeon--verificado .tc-acordeon__boton {
  border-left-color: var(--tc-ok);
}
.tc-app .tc-acordeon--error .tc-acordeon__boton {
  border-left-color: var(--tc-error);
}
.tc-app .tc-acordeon--abierto .tc-acordeon__boton {
  background: #fff;
}
.tc-app .tc-acordeon__titulo {
  flex: 1 1 auto;
}
.tc-app .tc-acordeon__estado {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eceef1;
  border: 1px solid transparent;
  color: var(--tc-gris);
}
.tc-app .tc-acordeon--verificado .tc-acordeon__estado {
  background: #dff3e4;
  color: var(--tc-ok);
}
.tc-app .tc-acordeon--error .tc-acordeon__estado {
  background: #fbe3e4;
  color: var(--tc-error);
}
/* Señal del estado, icono del bloque y flecha (composición del diseño aprobado). El estado se
   representa con la señal y el distintivo, NUNCA concatenando texto interno junto al título. */
.tc-app .tc-acordeon__senal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eceef1;
  color: var(--tc-gris);
}
.tc-app .tc-acordeon__senal--verificado {
  background: var(--tc-ok);
  color: #fff;
}
.tc-app .tc-acordeon__senal--error {
  background: var(--tc-error);
  color: #fff;
}
.tc-app .tc-acordeon__icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--tc-azul);
}
.tc-app .tc-acordeon__flecha {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--tc-azul-oscuro);
  transition: transform .2s ease;
}
.tc-app .tc-acordeon--abierto .tc-acordeon__flecha {
  transform: rotate(180deg);
}
.tc-app .tc-acordeon__panel {
  padding: 16px;
  background: #f7fafd;
}
.tc-app .tc-tipo-tomador__nota-icono {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--tc-azul);
}
/* Icono del encabezado «Asegurados de la póliza» (TOM 5). */
.tc-app .tc-final-seccion {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tc-app .tc-final-seccion__icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e5f1fb;
  color: var(--tc-azul);
}


/* ---------------------------------------------------- tarjetas de precio del paso 3.2 (modalidades) */
.tc-app .tc-precios-cabecera {
  margin-bottom: 14px;
}
.tc-app .tc-precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  align-items: start;
}
.tc-app .tc-precio-tarjeta {
  border: 1px solid var(--tc-borde);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-app .tc-precio-tarjeta--destacada {
  border-color: var(--tc-azul);
  box-shadow: 0 6px 18px rgba(0, 121, 200, 0.12);
}
.tc-app .tc-precio-tarjeta__etiqueta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-gris);
}
.tc-app .tc-precio-tarjeta__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tc-azul);
}
.tc-app .tc-precio-tarjeta--optima .tc-precio-tarjeta__punto,
.tc-app .tc-precio-tarjeta--basica .tc-precio-tarjeta__punto {
  background: var(--tc-ok);
}
.tc-app .tc-precio-tarjeta__nombre {
  margin: 0;
  font-size: 1.125rem;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-precio-tarjeta__concepto {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tc-gris);
}
.tc-app .tc-precio-tarjeta__cuota {
  margin: 6px 0 0;
}
.tc-app .tc-precio-tarjeta__importe {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-precio-tarjeta__periodo {
  color: var(--tc-gris);
}
.tc-app .tc-precio-tarjeta__anual,
.tc-app .tc-precio-tarjeta__descuento {
  margin: 2px 0;
  font-size: 0.875rem;
}
.tc-app .tc-precio-tarjeta__descuento {
  color: var(--tc-ok);
}
.tc-app .tc-precio-tarjeta__ahorro {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  color: var(--tc-ok);
}
.tc-app .tc-precio-tarjeta__personas {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--tc-fondo-suave);
  font-size: 0.8125rem;
}
.tc-app .tc-precio-tarjeta__personas-titulo {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tc-gris);
}
.tc-app .tc-precio-tarjeta__personas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tc-app .tc-precio-tarjeta__personas li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tc-app .tc-precio-tarjeta__pago {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.tc-app .tc-precio-tarjeta__pago label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-precio-tarjeta__pago select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  font: inherit;
  background: #fff;
}
.tc-app .tc-precio-tarjeta__cta {
  width: 100%;
  margin-top: 6px;
}


/* ------------------------------------------------------------------ modal de confirmación (paso 3.2) */
.tc-app .tc-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 24, 70, 0.55);
}
.tc-app .tc-modal__dialogo {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(13, 24, 70, 0.3);
}
.tc-app .tc-modal__titulo {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-modal__texto {
  margin: 0 0 16px;
}
.tc-app .tc-modal__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ------------------------------- cabecera compacta del paso 4 (TOM 4, V2: producto / provincia / pago)
   El diseño aprobado la sitúa a la derecha del título y en DOS líneas: no es una sucesión vertical de
   etiqueta/valor que domine la pantalla. */
.tc-app .tc-tomador-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 12px 24px;
  align-items: start;
  margin-bottom: 18px;
}
.tc-app .tc-tomador-cabecera__texto {
  min-width: 0;
}
.tc-app .tc-tomador-cabecera__texto .tc-paso__titulo {
  margin-bottom: 4px;
}
.tc-app .tc-resumen-tarifa {
  border: 1px solid #d6e7f7;
  border-radius: var(--tc-radio);
  background: #eef6fd;
  padding: 10px 14px;
}
.tc-app .tc-resumen-tarifa__datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0;
}
.tc-app .tc-resumen-tarifa__dato {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-resumen-tarifa__etiqueta {
  color: var(--tc-gris);
}
.tc-app .tc-resumen-tarifa__sep {
  margin: 0 6px;
  color: var(--tc-borde);
}

/* ------------------------------------------------------ selector del tipo de tomador (TOM 4, V2) */
.tc-app .tc-tipo-tomador {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.tc-app .tc-tipo-tomador--error {
  border-color: var(--tc-error);
}
.tc-app .tc-tipo-tomador__fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.tc-app .tc-tipo-tomador__titulo {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-tipo-tomador__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.tc-app .tc-tipo-tomador__nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--tc-borde);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tc-gris);
}
.tc-app .tc-tipo-tomador__nota-icono {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--tc-azul);
}
.tc-app .tc-campo__etiqueta {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-dato-fijo {
  margin: 0;
  font-weight: 600;
}
.tc-app .tc-aviso-recalcular {
  background: #fff8e6;
  border-left: 3px solid var(--tc-aviso);
  padding: 8px 10px;
}


/* ------------------------------------------------------- fechas: calendario nativo (mejora con JS) */
.tc-app .tc-fecha__calendario {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tc-app .tc-fecha__boton {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 10px;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--tc-azul-oscuro);
  background: #fff;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  cursor: pointer;
}
.tc-app .tc-fecha__boton:hover,
.tc-app .tc-fecha__boton:focus {
  border-color: var(--tc-azul);
}


/* ---------------------------------------------------- código de verificación: seis posiciones (V2) */
.tc-app .tc-codigo {
  position: relative;
  max-width: 320px;
}
.tc-app .tc-codigo__campo {
  max-width: 320px;
}
.tc-app .tc-codigo__cajas {
  display: none;
}
.tc-app .tc-codigo--activo .tc-codigo__cajas {
  display: flex;
  gap: 8px;
}
.tc-app .tc-codigo--activo .tc-codigo__campo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* Solo se resalta la casilla ACTIVA (la del cursor), como en el diseno aprobado. */
.tc-app .tc-codigo__caja--activa {
  border-color: var(--tc-azul);
  box-shadow: 0 0 0 3px rgba(0, 121, 200, 0.15);
}
.tc-app .tc-codigo__caja {
  flex: 0 0 auto;
  width: 46px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  background: #fff;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
}
.tc-app .tc-codigo__caja--llena {
  border-color: var(--tc-azul);
}


/* ------------------------------------------------------- cierre del proceso (TOM 5: gracias + ayuda) */
.tc-app .tc-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
}
.tc-app .tc-cierre__icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tc-fondo-suave);
  color: var(--tc-azul);
}
.tc-app .tc-cierre__bloque {
  flex: 1 1 240px;
  min-width: 0;
}
.tc-app .tc-cierre__gracias {
  margin: 0 0 2px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-cierre__texto {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tc-gris);
}
.tc-app .tc-cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

@media screen and (max-width: 640px) {
  .tc-app .tc-precios {
    grid-template-columns: 1fr;
  }
  .tc-app .tc-acordeon__boton {
    padding: 12px;
    flex-wrap: wrap;
  }
  .tc-app .tc-acordeon__panel {
    padding: 12px;
  }
  .tc-app .tc-modal__acciones {
    flex-direction: column;
  }
  .tc-app .tc-modal__acciones .tc-boton {
    width: 100%;
  }
  
  /* Responsive (§5): en móvil las tarjetas de precio son expandibles. La primera se muestra abierta
     y las demás pueden plegarse; el plegado lo aplica el JS solo en este ancho (matchMedia), así que
     en escritorio nunca se oculta nada. Los controles siguen en el formulario y se envían igual. */
.tc-app .tc-precio-tarjeta {
    position: relative;
    padding-right: 46px;
  }
  .tc-app .tc-precio-tarjeta__plegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #0057b8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .tc-app .tc-precio-tarjeta__plegar span {
    display: block;
    transition: transform .2s ease;
  }
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__plegar span {
    transform: rotate(180deg);
  }
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__detalle {
    display: none;
  }
  
  /* El resumen compacto del paso 4 (producto/modalidad, provincia y pago) se lee en su línea y ningún
     valor largo (modalidad, provincia…) se corta; la cabecera pasa a una columna. */
  .tc-app .tc-resumen-tarifa__datos {
    grid-template-columns: 1fr;
  }
  .tc-app .tc-resumen-tarifa__dato {
    overflow-wrap: anywhere;
  }
  .tc-app .tc-tomador-cabecera {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 400px) {
  .tc-app .tc-codigo__caja {
    width: 38px;
    height: 48px;
    font-size: 1.25rem;
  }
  .tc-app .tc-codigo--activo .tc-codigo__cajas {
    gap: 6px;
  }
}


/* El atributo [hidden] debe ocultar siempre: los paneles de los acordeones, el modal de confirmación
   del paso 3.2 y el aviso de revalidación del paso 3 se alternan por JavaScript sin recargar. */
.tc-app [hidden] {
  display: none !important;
}




/* ==================================================================================================
   V2 — piezas del flujo ASEGURADO (ASE 1 a ASE Final). Todo con prefijo del módulo (tc-) y aplicado
   solo dentro de .tc-app, para no tocar ninguna hoja de estilos global del sitio.
   ================================================================================================== */
/* ------------------------------------------------------------------ acciones centradas (V2: CTA) */
.tc-app .tc-acciones--centrado {
  justify-content: center;
}


/* ------------------------------------------------------------------------ relación con el tomador */
.tc-app .tc-relacion-familiar {
  margin-top: 4px;
}


/* ----------------------------------------------------------------------------- ayuda directa del ASE */
.tc-app .tc-ayuda-contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.tc-app .tc-ayuda-contacto__acciones .tc-boton {
  min-height: 44px;
}


/* ------------------------------------------------------------------- pantalla de revisión y envío */
.tc-app .tc-revisar-bloque {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.tc-app .tc-revisar-bloque__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tc-app .tc-revisar-bloque__titulo {
  margin: 0;
  font-size: 1rem;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-revisar-bloque__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
  margin: 0;
}
.tc-app .tc-revisar-bloque__datos div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9375rem;
  border-bottom: 1px dashed var(--tc-borde);
  padding: 3px 0;
}
.tc-app .tc-revisar-bloque__datos dt {
  color: var(--tc-gris);
}
.tc-app .tc-revisar-bloque__datos dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.tc-app .tc-revisar-salud {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tc-app .tc-revisar-salud li {
  font-size: 0.875rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
}
.tc-app .tc-revisar-salud__respuesta {
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-revisar-salud__detalle {
  grid-column: 1 / -1;
  color: var(--tc-gris);
}


/* ------------------------------------------------------------------------------- aceptaciones */
.tc-app .tc-aceptaciones {
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.tc-app .tc-aceptaciones__titulo {
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  padding: 0 4px;
}


/* ------------------------------------------------------------- valoración en Google (ASE Final) */
.tc-app .tc-valoracion {
  text-align: center;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  background: #f7fbfe;
  padding: 20px 16px;
  margin: 22px 0;
}
.tc-app .tc-valoracion__gracias {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tc-azul-oscuro);
  margin: 0 0 6px;
}
.tc-app .tc-valoracion__mensaje {
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  margin: 0 0 8px;
}
.tc-app .tc-valoracion__estrellas {
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 4px;
  color: #f2b01e;
  margin: 0 0 12px;
}
.tc-app .tc-valoracion__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.tc-app .tc-valoracion__cta[aria-disabled="true"] {
  cursor: default;
}

@media screen and (max-width: 640px) {
  
  /* V2: en móvil el CTA del asegurado es prioritario y el detalle de la revisión pasa a una columna. */
.tc-app .tc-acciones--centrado .tc-boton {
    width: 100%;
  }
  .tc-app .tc-revisar-bloque__datos div {
    flex-wrap: wrap;
  }
  .tc-app .tc-revisar-bloque__datos dd {
    text-align: left;
  }
  .tc-app .tc-ayuda-contacto__acciones .tc-boton {
    flex: 1 1 45%;
  }
  .tc-app .tc-valoracion__estrellas {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }
}

/* ==================================================================================================
   FASE 1 — AISLAMIENTO VISUAL DE LA APLICACIÓN Y COMPONENTES APROBADOS (TOM 1 / TOM 2).
   Todo el CSS de la aplicación vive encapsulado bajo el contenedor .tc-app y esta hoja SOLO la cargan
   las páginas del módulo (/contratacion/ y /contratacion/asegurados/). No se carga
   ninguna hoja global del sitio: ni el sitio puede alterar la aplicación, ni la aplicación puede
   alcanzar a la web.
   ================================================================================================== */

/* -------------------------------------------------------------------- base encapsulada bajo .tc-app */
body.tc-cuerpo {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #333333;
  font-family: Montserrat, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.tc-app {
  --tc-radio: 8px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  font-family: Montserrat, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tc-texto);
}

.tc-app h1, .tc-app h2, .tc-app h3, .tc-app p, .tc-app ol, .tc-app ul { margin-top: 0; }
.tc-app button, .tc-app input, .tc-app select, .tc-app textarea { font-family: inherit; }
.tc-app svg { display: block; }

/* --------------------------------------------------------------------------- cabecera propia */
.tc-app .tc-header {
  background: #ffffff;
  border-bottom: 1px solid var(--tc-borde);
}

.tc-app .tc-header__caja {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.tc-app .tc-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-marca__logo {
  display: block;
  /* El logotipo es la imagen corporativa VERTICAL real (1890×2242 px ≈ 0,843 de relación
     ancho/alto). Antes se limitaba con max-width: clamp(32px, 4vw, 40px): aquí se ELIMINA ese tope
     y el logotipo crece hasta ser claramente legible. Se dimensiona por ALTURA (width: auto fija la
     proporción con el fichero real, sin deformarlo ni recortarlo) y se mantiene un rango responsive
     que evita que la cabecera adquiera una altura desproporcionada. */
  height: clamp(48px, 5.6vw, 68px);
  width: auto;
  flex: 0 0 auto;
}

.tc-app .tc-marca__texto { display: block; min-width: 0; }

/* Identidad corporativa (a la derecha del logotipo), en DOS líneas alineadas por su borde izquierdo:
   el título principal «Sanitas Consulting» y, debajo, «CONTRATACIÓN ONLINE» más pequeño y discreto. */
.tc-app .tc-marca__titulo {
  display: block;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--tc-azul);            /* #0079c8 — título principal de la cabecera */
}

.tc-app .tc-marca__lema {
  display: block;
  margin-top: 2px;
  font-size: clamp(0.62rem, 0.78vw, 0.78rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tc-gris);            /* #6c6e71 — línea secundaria, alineada con el título */
}

/* CTA de contacto de la cabecera (sustituyen al antiguo «? ¿Necesita ayuda?»). Reutilizan la línea
   gráfica de los CTA del sitio: azul corporativo para LLAMAR y verde de canal para WHATSAPP, con los
   mismos recursos de botón del módulo (radio, tipografía y estados). */
.tc-app .tc-header__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.tc-app .tc-header__accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--tc-radio);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.tc-app .tc-header__accion-icono { display: inline-flex; line-height: 1; }
.tc-app .tc-header__accion-icono .tc-icono { display: block; width: 28px; height: 28px; }
.tc-app .tc-header__accion-num { font-weight: 600; }

.tc-app .tc-header__accion--llamar { background: var(--tc-azul); border-color: var(--tc-azul); }
.tc-app .tc-header__accion--llamar:hover,
.tc-app .tc-header__accion--llamar:focus-visible { background: #00629f; border-color: #00629f; color: #fff; }

.tc-app .tc-header__accion--whatsapp { background: #25d366; border-color: #25d366; }
.tc-app .tc-header__accion--whatsapp:hover,
.tc-app .tc-header__accion--whatsapp:focus-visible { background: #1eb857; border-color: #1eb857; color: #fff; }

/* --------------------------------------------------------------------------------- contenido */
.tc-app .tc-contenido {
  flex: 1 0 auto;
  width: 100%;
}

.tc-app .tc-paso {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

.tc-app .tc-paso__cabecera { margin: 0 0 1.75rem; }

/* ------------------------------------------------------------------------------ pie propio */
.tc-app .tc-footer {
  margin-top: auto;
  background: #f2f7fc;
  border-top: 1px solid var(--tc-borde);
}

.tc-app .tc-footer__caja {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.8125rem;
  color: var(--tc-gris);
}

.tc-app .tc-footer__nota { margin: 0; }

/* Panel interno de Tracking: al omitirse los enlaces legales, el copyright queda como ÚNICO hijo de
   la caja del pie y se CENTRA (ocupa la fila completa y alinea el texto al centro). El selector
   :only-child distingue este caso sin añadir clases ni tocar el resto de secciones. */
.tc-app .tc-footer__nota:only-child {
  flex: 1 1 auto;
  text-align: center;
}

.tc-app .tc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.tc-app .tc-footer__legal a {
  color: var(--tc-gris);
  text-decoration: none;
}

.tc-app .tc-footer__legal a:hover,
.tc-app .tc-footer__legal a:focus {
  color: var(--tc-azul);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- stepper (diseño aprobado) */
.tc-app .tc-progreso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.tc-app .tc-progreso__paso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tc-gris);
  min-width: 0;
}

.tc-app .tc-progreso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #dbe2ea;
  color: #6b7a8d;
  font-weight: 700;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}

.tc-app .tc-progreso__nombre { white-space: nowrap; }

.tc-app .tc-progreso__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--tc-ok);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.tc-app .tc-progreso__paso + .tc-progreso__paso::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: 0 0.25rem;
  background: #dbe2ea;
  flex: 0 0 auto;
}

.tc-app .tc-progreso__paso--actual {
  color: var(--tc-azul-oscuro);
  font-weight: 700;
}

.tc-app .tc-progreso__paso--actual .tc-progreso__numero {
  background: var(--tc-azul);
  color: #ffffff;
}

.tc-app .tc-progreso__paso--hecho { color: var(--tc-azul-oscuro); }

.tc-app .tc-progreso__paso--hecho .tc-progreso__numero {
  background: #dbe2ea;
  color: #6b7a8d;
}

/* ------------------------------------------------------------ jerarquía tipográfica aprobada */
.tc-app .tc-paso__titulo {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  margin: 0 0 0.875rem;
}

.tc-app .tc-paso__texto {
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4a5568;
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------ tarjeta de contenido */
.tc-app .tc-tarjeta {
  background: #ffffff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  padding: 1.75rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 1px 3px rgba(13, 24, 70, 0.05);
}

.tc-app .tc-tarjeta .tc-rejilla--2 { gap: 0 1.5rem; }

/* ------------------------------------------------------------------ bloque informativo azul */
.tc-app .tc-info {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: #eaf3fb;
  border-radius: 8px;
  padding: 1rem 1.125rem;
  margin: 0.5rem 0 1.5rem;
}

.tc-app .tc-info__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #cfe4f7;
  color: var(--tc-azul);
  font-weight: 700;
  font-size: 1rem;
  flex: 0 0 auto;
}

.tc-app .tc-info__cuerpo { min-width: 0; }

.tc-app .tc-info__titulo {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-info__texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a5568;
}

/* ------------------------------------------------------- teléfono con prefijo internacional */
.tc-app .tc-campo__grupo {
  display: flex;
  align-items: stretch;
}

.tc-app .tc-campo__prefijo {
  display: inline-flex;
  align-items: center;
  padding: 0 0.875rem;
  border: 1px solid var(--tc-borde);
  border-right: 0;
  border-radius: var(--tc-radio) 0 0 var(--tc-radio);
  background: #f4f6f9;
  color: var(--tc-texto);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.tc-app .tc-campo--prefijo input[type="tel"] {
  border-radius: 0 var(--tc-radio) var(--tc-radio) 0;
}

.tc-app .tc-campo--prefijo.tc-campo--error .tc-campo__prefijo {
  border-color: var(--tc-error);
}

/* ------------------------------------------------------------------------- botones aprobados */
.tc-app .tc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 50px;
  padding: 0.8125rem 1.5rem;
  border: 1px solid var(--tc-azul);
  border-radius: 6px;
  background: var(--tc-azul);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
}

.tc-app .tc-boton--secundario {
  background: #ffffff;
  color: var(--tc-azul);
}

.tc-app .tc-boton__icono { line-height: 1; }
.tc-app .tc-boton__icono--pos { order: 2; }

/* --------------------------------------------------- panel azul «Código enviado a» (TOM 2) */
.tc-app .tc-panel-correo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #eaf3fb;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.tc-app .tc-panel-correo__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #cfe4f7;
  color: var(--tc-azul);
  flex: 0 0 auto;
}

.tc-app .tc-panel-correo__texto {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.9375rem;
  color: #4a5568;
}

.tc-app .tc-panel-correo__texto strong {
  display: block;
  margin-top: 0.125rem;
  font-size: 1.0625rem;
  color: var(--tc-azul-oscuro);
  word-break: break-word;
}

.tc-app .tc-panel-correo__accion { flex: 0 0 auto; }

/* --------------------------------------------------- bloque «¿No ha recibido el código?» */
.tc-app .tc-reenvio {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #f4f7fa;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 0;
}

.tc-app .tc-reenvio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--tc-azul);
  flex: 0 0 auto;
}

.tc-app .tc-reenvio__texto {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tc-gris);
}

.tc-app .tc-reenvio__titulo {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-reenvio__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  flex: 0 0 auto;
}

.tc-app .tc-reenvio__cuenta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tc-gris);
}

.tc-app .tc-reenvio__cuenta strong { color: var(--tc-azul-oscuro); }

/* ------------------------------------------------------------- seis casillas del código */
.tc-app .tc-codigo { max-width: none; }

.tc-app .tc-codigo--activo .tc-codigo__cajas { gap: 10px; }

.tc-app .tc-codigo__caja {
  width: 54px;
  height: 62px;
  font-size: 1.5rem;
  font-weight: 600;
}

.tc-app .tc-codigo__caja--llena { border-color: var(--tc-azul); }

/* ------------------------------------------------------------------- navegación inferior */
.tc-app .tc-nav-paso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 0;
}

.tc-app .tc-nav-paso .tc-boton { min-width: 9.5rem; }

/* ==================================================================================================
   Ajustes por tamaño (390, 430, 768, 1024, 1280 y 1440 px). Van al final para regir sobre las
   adaptaciones heredadas.
   ================================================================================================== */
@media screen and (max-width: 1024px) {
  .tc-app .tc-header__caja,
  .tc-app .tc-footer__caja { padding-left: 18px; padding-right: 18px; }
}

@media screen and (max-width: 768px) {
  .tc-app .tc-paso {
    max-width: 100%;
    padding: 1.25rem 1rem 2.5rem;
  }
  .tc-app .tc-paso__titulo { font-size: 1.625rem; }
  .tc-app .tc-paso__texto { font-size: 1rem; }
  .tc-app .tc-tarjeta { padding: 1.25rem; }
  .tc-app .tc-progreso { margin-bottom: 1.5rem; }
}

@media screen and (max-width: 640px) {
  /* Cabecera en móvil: logotipo y CTA compactos para que la altura siga siendo razonable. */
  .tc-app .tc-marca { gap: 8px; }
  .tc-app .tc-marca__logo { height: 44px; }
  .tc-app .tc-header__acciones { margin-left: 0; }
  .tc-app .tc-header__accion { min-height: 40px; padding: 0 12px; font-size: 0.875rem; gap: 6px; }
  .tc-app .tc-header__accion-icono .tc-icono { width: 16px; height: 16px; }

  .tc-app .tc-progreso {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    align-items: start;
  }
  .tc-app .tc-progreso__paso {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
  }
  .tc-app .tc-progreso__paso + .tc-progreso__paso::before { display: none; }
  .tc-app .tc-progreso__nombre { white-space: normal; line-height: 1.2; }
  .tc-app .tc-progreso__check { width: 1.125rem; height: 1.125rem; font-size: 0.625rem; }

  .tc-app .tc-panel-correo { align-items: flex-start; }
  .tc-app .tc-panel-correo__accion { flex: 1 1 100%; }
  .tc-app .tc-panel-correo__accion .tc-boton { width: 100%; }

  .tc-app .tc-reenvio { align-items: flex-start; }
  .tc-app .tc-reenvio__accion { flex: 1 1 100%; align-items: stretch; }
  .tc-app .tc-reenvio__accion .tc-boton { width: 100%; }
  .tc-app .tc-reenvio__cuenta { text-align: center; }

  .tc-app .tc-nav-paso { flex-direction: column-reverse; align-items: stretch; }
  .tc-app .tc-nav-paso .tc-boton { width: 100%; min-width: 0; }
}

@media screen and (max-width: 400px) {
  .tc-app .tc-codigo__caja { width: 46px; height: 56px; font-size: 1.375rem; }
  .tc-app .tc-codigo--activo .tc-codigo__cajas { gap: 7px; }
}

@media screen and (max-width: 430px) {
  .tc-app .tc-paso__titulo { font-size: 1.375rem; }
  .tc-app .tc-header__caja,
  .tc-app .tc-footer__caja { padding: 12px 14px; }
}


/* ==================================================================================================
   FASE 2 — TOM 3.1 (datos para la tarifa) y TOM 3.2 (tarjetas de precio).
   Reproduce los PNG aprobados. Todo vive bajo .tc-app y con prefijos tc-: no toca ninguna hoja
   global del sitio. Las reglas van al final para regir sobre las heredadas de la V2.
   ================================================================================================== */

/* -------------------------------------------------------------------- tarjetas-bloque del paso 3.1 */
.tc-app .tc-bloque-tarifa {
  background: #ffffff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 1px 3px rgba(13, 24, 70, 0.05);
}

.tc-app .tc-bloque-tarifa__cabecera {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.tc-app .tc-bloque-tarifa__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #eaf3fb;
  color: var(--tc-azul);
  flex: 0 0 auto;
}

.tc-app .tc-bloque-tarifa__titulo {
  margin: 0;
  font-size: 1.25rem;
  color: var(--tc-azul-oscuro);
}

/* «Producto Sanitas» y «Provincia»: etiquetas y alturas uniformes, alineados por arriba y por abajo.
   (Antes, «:last-child { margin-bottom: 0 }» con «align-items: end» subía el primer campo 1.125rem.) */
.tc-app .tc-bloque-tarifa .tc-rejilla { align-items: stretch; }
.tc-app .tc-bloque-tarifa .tc-rejilla > .tc-campo { display: flex; flex-direction: column; margin-bottom: 0; }
.tc-app .tc-bloque-tarifa .tc-rejilla > .tc-campo > label { min-height: 1.3125rem; }

/* --------------------------------------------------- decisión «¿el tomador también estará asegurado?» */
.tc-app .tc-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  background: #eaf3fb;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}

.tc-app .tc-decision--error { background: #fdeeef; }

.tc-app .tc-decision__pregunta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-decision__opciones { display: flex; gap: 0.625rem; }

.tc-app .tc-decision__nota {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4a5568;
}

/* ------------------------------------------------------------------- filas de personas (3.1) */
.tc-app .tc-personas { display: grid; gap: 0.625rem; margin: 0 0 1rem; }
.tc-app .tc-tarjetas-asegurados { display: grid; gap: 0.625rem; }

.tc-app .tc-persona {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  background: #f4f8fc;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.tc-app .tc-persona--error { border-color: var(--tc-error); background: #fffafa; }

.tc-app .tc-persona__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #dceafa;
  color: var(--tc-azul);
  flex: 0 0 auto;
}

.tc-app .tc-persona__texto { min-width: 0; }

.tc-app .tc-persona__nombre {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tc-azul-oscuro);
  line-height: 1.3;
}

.tc-app .tc-persona__etiqueta {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tc-gris);
  cursor: pointer;
}

/* La acción reserva el MISMO ancho en todas las filas (el icono informativo del Tomador y el botón
   de eliminar de cada asegurado miden 2.5rem): así todas las fechas de nacimiento empiezan en la
   misma coordenada horizontal y tienen la misma anchura. */
.tc-app .tc-persona__accion { display: flex; align-items: center; justify-content: center; width: 2.5rem; flex: 0 0 auto; }

.tc-app .tc-persona__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #dceafa;
  color: var(--tc-azul);
  font-weight: 700;
  font-size: 0.875rem;
}

/* Campo de fecha DD / MM / AAAA con el icono de calendario dentro del propio campo. */
.tc-app .tc-fecha { position: relative; }

.tc-app .tc-fecha input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tc-texto);
  background: #ffffff;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 0.7rem 0.75rem 0.7rem 2.5rem;
  min-height: 46px;
  line-height: 1.3;
}

.tc-app .tc-fecha input[type="text"]:focus {
  outline: 3px solid rgba(0, 121, 200, 0.35);
  outline-offset: 1px;
  border-color: var(--tc-azul);
}

.tc-app .tc-fecha__boton {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--tc-azul);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.tc-app .tc-fecha .tc-error { margin: 0.25rem 0 0; }

/* Calendario nativo: se deja en el DOM (accesible y funcional) pero reducido a un punto invisible que
   NUNCA desborda su contenedor ni el ancho de la fila. */
.tc-app .tc-fecha__calendario {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  max-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Papelera de cada asegurado (icono, accesible). */
.tc-app .tc-boton.tc-papelera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d64545;
  text-decoration: none;
  border-radius: 8px;
}

.tc-app .tc-boton.tc-papelera:hover,
.tc-app .tc-boton.tc-papelera:focus { background: #fdecec; color: #b52a2a; }

/* Botón AÑADIR ASEGURADO + su nota, en la misma fila. */
.tc-app .tc-asegurados-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.tc-app .tc-asegurados-pie__nota {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  background: #eef4fa;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #4a5568;
}

.tc-app .tc-asegurados-pie__icono { display: inline-flex; color: var(--tc-azul); flex: 0 0 auto; }

/* El botón «AÑADIR ASEGURADO» del diseño lleva un «+» dentro de un círculo, dibujado por CSS: el
   texto del botón (y el HTML que leen los tests) no cambia. */
.tc-app .tc-asegurados-pie .tc-boton--secundario::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* -------------------------------------------------------- tarjetas comparativas de precio (3.2) */
.tc-app .tc-precios { align-items: stretch; }

.tc-app .tc-precio-tarjeta {
  --tc-marca: var(--tc-azul);
  border: 1px solid #e3e8ee;
  border-top: 4px solid var(--tc-marca);
  border-radius: 12px;
  background: #ffffff;
  padding: 1.5rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(13, 24, 70, 0.05);
}

.tc-app .tc-precio-tarjeta--optima { --tc-marca: #e8632a; }
.tc-app .tc-precio-tarjeta--plus { --tc-marca: #f2b01e; }
.tc-app .tc-precio-tarjeta--sincopago { --tc-marca: #2e9e4f; }

.tc-app .tc-precio-tarjeta__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-precio-tarjeta__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--tc-marca);
  flex: 0 0 auto;
}

/* El punto de cada modalidad toma el color de su marca (vence al verde heredado de la V2). */
.tc-app .tc-precio-tarjeta.tc-precio-tarjeta--optima .tc-precio-tarjeta__punto,
.tc-app .tc-precio-tarjeta.tc-precio-tarjeta--plus .tc-precio-tarjeta__punto,
.tc-app .tc-precio-tarjeta.tc-precio-tarjeta--sincopago .tc-precio-tarjeta__punto {
  background: var(--tc-marca);
}

.tc-app .tc-precio-tarjeta__nombre {
  margin: 0;
  min-height: 3.1rem;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-precio-tarjeta__concepto {
  margin: 0;
  min-height: 2.7rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tc-gris);
}

.tc-app .tc-precio-tarjeta__detalle {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 0;
  margin-top: 0.5rem;
  padding-top: 0;
}

/* La línea separadora va encima de la CUOTA (no del detalle): así el mismo bloque sirve para la
   tarjeta desplegada y para la plegada, que sigue mostrando su precio. */
.tc-app .tc-precio-tarjeta__cuota {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
  border-top: 1px solid #eef1f5;
  padding-top: 1rem;
}

.tc-app .tc-precio-tarjeta__importe { font-size: 2rem; font-weight: 700; color: var(--tc-azul); }

.tc-app .tc-precio-tarjeta__periodo { font-size: 1rem; color: var(--tc-gris); }

.tc-app .tc-precio-tarjeta__anual { margin: 0; font-size: 0.875rem; color: var(--tc-texto); }
.tc-app .tc-precio-tarjeta__descuento { margin: 0; font-size: 0.875rem; color: var(--tc-azul-oscuro); }

.tc-app .tc-precio-tarjeta__ahorro {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tc-ok);
}

.tc-app .tc-precio-tarjeta__personas {
  margin-top: 0.75rem;
  border-top: 0;
  padding: 0.75rem 0.875rem;
  background: #eef4fa;
  border-radius: 10px;
}

.tc-app .tc-precio-tarjeta__personas-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc-azul-oscuro);
}

.tc-app .tc-precio-tarjeta__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.tc-app .tc-precio-tarjeta__persona { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }

.tc-app .tc-precio-tarjeta__persona-icono { display: inline-flex; color: var(--tc-azul); flex: 0 0 auto; }

.tc-app .tc-precio-tarjeta__persona-importe { font-weight: 600; color: var(--tc-azul-oscuro); }

.tc-app .tc-precio-tarjeta__persona-edad { color: var(--tc-gris); }

.tc-app .tc-precio-tarjeta__pago {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.875rem;
}

.tc-app .tc-precio-tarjeta__pago label { font-size: 0.8125rem; font-weight: 700; color: var(--tc-azul-oscuro); }

.tc-app .tc-precio-tarjeta__pago select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tc-texto);
  background-color: #ffffff;
  border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio);
  padding: 0.7rem 2.25rem 0.7rem 0.75rem;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230d1846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
}

.tc-app .tc-precio-tarjeta__pago select:focus {
  outline: 3px solid rgba(0, 121, 200, 0.35);
  outline-offset: 1px;
  border-color: var(--tc-azul);
}

.tc-app .tc-precio-tarjeta__cta {
  width: 100%;
  margin-top: 0.25rem;
  border-color: var(--tc-marca);
  background: var(--tc-marca);
  color: #ffffff;
}

.tc-app .tc-precio-tarjeta__cta:hover,
.tc-app .tc-precio-tarjeta__cta:focus {
  border-color: var(--tc-marca);
  background: var(--tc-marca);
  color: #ffffff;
  filter: brightness(0.92);
}

.tc-app .tc-precio-tarjeta__cta-icono { display: inline-flex; line-height: 1; }

/* Pie del paso 3.1: «Volver» y «Calcular». */
.tc-app .tc-nav-paso--reparto .tc-boton { min-width: 0; }

/* --------------------------------------------------------------------------------- responsive */
@media screen and (max-width: 768px) {
  .tc-app .tc-bloque-tarifa { padding: 1.25rem; }
  .tc-app .tc-persona { grid-template-columns: auto minmax(0, 1fr) minmax(0, 12rem) auto; }
  .tc-app .tc-decision__nota { flex-basis: 100%; }
}

@media screen and (max-width: 640px) {
  /* La reserva de espacio para el botón de plegado de la V2 se conserva: estas reglas van después de
     las de escritorio y vuelven a fijarla en móvil. */
  .tc-app .tc-precio-tarjeta { padding: 1.25rem; padding-right: 46px; }
  .tc-app .tc-precio-tarjeta__nombre { min-height: 0; }
  .tc-app .tc-precio-tarjeta__concepto { min-height: 0; }

  /* Tarjeta plegada (diseño responsive): se ven la etiqueta, el título y SU PRECIO; la descripción y
     el resto del detalle quedan a la espera de desplegarla. */
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__concepto { display: none; }
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__cuota {
    border-top: 0;
    margin-top: 0.25rem;
    padding-top: 0;
  }
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__importe { font-size: 1.35rem; }
  .tc-app .tc-precio-tarjeta--plegada .tc-precio-tarjeta__periodo { font-size: 0.875rem; }

  .tc-app .tc-persona {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar texto accion"
      "fecha fecha fecha";
  }
  .tc-app .tc-persona__avatar { grid-area: avatar; }
  .tc-app .tc-persona__texto { grid-area: texto; }
  .tc-app .tc-persona__accion { grid-area: accion; }
  .tc-app .tc-persona .tc-fecha { grid-area: fecha; }

  .tc-app .tc-asegurados-pie { flex-direction: column; align-items: stretch; }
  .tc-app .tc-asegurados-pie .tc-boton { width: 100%; }

  /* Pie del paso 3.1 en una fila: «Volver» a su ancho y «Calcular» ocupando el resto, como el
     diseño responsive aprobado. */
  .tc-app .tc-nav-paso--reparto { flex-direction: row; align-items: center; }
  .tc-app .tc-nav-paso--reparto .tc-boton { width: auto; }
  .tc-app .tc-nav-paso--reparto .tc-boton:last-child { flex: 1 1 auto; }
}

@media screen and (max-width: 430px) {
  .tc-app .tc-bloque-tarifa { padding: 1rem; }
  .tc-app .tc-precio-tarjeta__importe { font-size: 1.75rem; }
}

/* ------------------------------------------------------------ pie del paso 4 (TOM): Volver / Continuar
   En el DOM vive primero «Continuar» (submit sin nombre) para que INTRO envíe el formulario y nunca
   navegue hacia atrás; el orden visual aprobado («Volver» a la izquierda) se fija con «order». */
.tc-app .tc-nav-paso--tomador .tc-boton { min-width: 0; }
.tc-app .tc-nav-paso--tomador [data-tc-volver-tarifa] { order: -1; }

/* Botón de WhatsApp del cierre: color del canal, con el dato real del sitio. */
.tc-app .tc-boton--whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.tc-app .tc-boton--whatsapp:hover,
.tc-app .tc-boton--whatsapp:focus-visible {
  background: #1eb857;
  border-color: #1eb857;
}

@media screen and (max-width: 640px) {
  /* El pie del paso 4 en una fila: «Volver» a su ancho y «Continuar» ocupando el resto. */
  .tc-app .tc-nav-paso--tomador { flex-direction: row; align-items: center; }
  .tc-app .tc-nav-paso--tomador .tc-boton { width: auto; min-width: 0; }
  .tc-app .tc-nav-paso--tomador [data-tc-continuar] { flex: 1 1 auto; }

  .tc-app .tc-tipo-tomador__fila { align-items: flex-start; }
  .tc-app .tc-ase-fila__cuerpo { grid-template-columns: 1fr; }
  .tc-app .tc-final-exito { flex-direction: column; align-items: flex-start; }
  .tc-app .tc-cierre { align-items: flex-start; }
  .tc-app .tc-cierre__acciones { margin-left: 0; width: 100%; }
  .tc-app .tc-cierre__acciones .tc-boton { width: 100%; }
  .tc-app .tc-orden-card { align-items: flex-start; }
  .tc-app .tc-orden-card__accion { width: 100%; }
  .tc-app .tc-orden-card__accion .tc-boton { width: 100%; }
}

/* ==================================================================================================
   FASE 4 — CAPA DE PRESENTACIÓN DE LAS CUATRO PANTALLAS DEL ASEGURADO (ASE 1 a ASE Final).
   Reproduce los PNG aprobados «ASE - Paso 1», «ASE - Paso 2», «ASE - Revisar y enviar» y
   «ASE - Final». Todo encapsulado bajo .tc-app y con prefijos tc-; SIN el stepper de TOM.
   ================================================================================================== */

/* --- Campos con icono dentro (ASE 1: número de orden y código de asegurado) ---------------------- */
.tc-app .tc-campo--icono .tc-campo__control { position: relative; }
.tc-app .tc-campo__icono {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: #8b9bb0; pointer-events: none;
}
.tc-app .tc-campo--icono input { padding-left: 2.9rem; }

/* --- Acciones a todo el ancho (ASE 1) ----------------------------------------------------------- */
.tc-app .tc-acciones--bloque { display: block; }
.tc-app .tc-boton--llamar { background: var(--tc-azul); border-color: var(--tc-azul); color: #fff; }

/* --- ASE 1 · Acceso ----------------------------------------------------------------------------- */
.tc-app .tc-paso--acceso { max-width: 860px; }
.tc-app .tc-acceso { max-width: 620px; margin: 0 auto 1.25rem; padding: 2rem 1.75rem; }
.tc-app .tc-acceso__cabecera { text-align: center; margin: 0 0 1.25rem; }
.tc-app .tc-acceso__avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: #eaf3fb; color: var(--tc-azul); margin: 0 0 0.75rem;
}
.tc-app .tc-acceso__titulo { font-size: 1.75rem; margin: 0 0 0.375rem; }
.tc-app .tc-acceso__intro { margin: 0 auto; max-width: 30rem; color: #4a5568; }
.tc-app .tc-acceso__legal {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 1rem 0 0; font-size: 0.8125rem; color: var(--tc-gris); text-align: center;
}
.tc-app .tc-acceso__legal-icono { display: inline-flex; flex: 0 0 auto; color: #8b9bb0; }
.tc-app .tc-acceso__error { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; }
.tc-app .tc-acceso__error-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tc-error); color: #fff;
  font-weight: 700; line-height: 1;
}
.tc-app .tc-acceso__error-texto { margin: 0; color: var(--tc-error); font-weight: 600; }

/* --- Cabecera de paso ASE (icono + título + bloque lateral de pista) ---------------------------- */
.tc-app .tc-paso--ase { max-width: 1180px; }
.tc-app .tc-ase__hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
  background: linear-gradient(180deg, #eaf3fb, #f7fbfe); border: 1px solid #dceaf7;
  border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0 0 1.25rem;
}
.tc-app .tc-ase__hero-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--tc-azul);
  border: 1px solid #dceaf7;
}
.tc-app .tc-ase__hero-texto { flex: 1 1 18rem; min-width: 0; }
.tc-app .tc-ase__hero .tc-paso__titulo { margin: 0 0 0.25rem; }
.tc-app .tc-ase__hero .tc-paso__texto { margin: 0; max-width: none; }
.tc-app .tc-ase__hero-paso {
  flex: 1 1 16rem; display: flex; gap: 0.625rem; align-items: flex-start;
  background: #fff; border: 1px solid #dceaf7; border-radius: 10px; padding: 0.75rem 0.875rem;
}
.tc-app .tc-ase__hero-paso-icono { flex: 0 0 auto; display: inline-flex; color: var(--tc-azul); }
.tc-app .tc-ase__hero-paso-texto { min-width: 0; font-size: 0.8125rem; color: #4a5568; }
.tc-app .tc-ase__hero-paso-texto strong { display: block; color: var(--tc-azul-oscuro); font-size: 0.9375rem; }

/* --- Rejilla principal ASE 2 (contenido + lateral) ---------------------------------------------- */
.tc-app .tc-ase__rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 1.25rem; align-items: start;
}
.tc-app .tc-ase__rejilla > * { min-width: 0; }
.tc-app .tc-ase__bloques { display: grid; }
.tc-app .tc-ase__lateral { display: grid; gap: 1rem; align-content: start; min-width: 0; }

.tc-app .tc-ase__aside-card {
  border: 1px solid var(--tc-borde); border-radius: 12px; background: #fff; padding: 1rem 1.125rem;
}
.tc-app .tc-ase__garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.tc-app .tc-ase__garantias li {
  display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; color: var(--tc-gris);
}
.tc-app .tc-ase__garantias strong { display: block; color: var(--tc-azul-oscuro); font-size: 0.875rem; }
.tc-app .tc-ase__garantia-icono { flex: 0 0 auto; display: inline-flex; color: var(--tc-azul); }

.tc-app .tc-ase__validado {
  display: grid; gap: 0.75rem; border: 1px solid #bfe6cb; background: #eefaf1; border-radius: 12px;
  padding: 0.875rem 1rem;
}
.tc-app .tc-ase__validado-fila { display: flex; align-items: center; gap: 0.75rem; }
.tc-app .tc-ase__validado-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--tc-ok); color: #fff;
}
.tc-app .tc-ase__validado-dato { display: flex; flex-direction: column; min-width: 0; }
.tc-app .tc-ase__validado-etiqueta {
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-gris); font-weight: 700;
}
.tc-app .tc-ase__validado-valor {
  font-size: 1.25rem; font-weight: 700; color: var(--tc-azul-oscuro); letter-spacing: 0.03em; overflow-wrap: anywhere;
}
.tc-app .tc-ase__validado-nota { margin: 0; font-size: 0.8125rem; color: var(--tc-gris); }

/* --- Relación con el tomador (tarjetas de opción, ASE 2) ---------------------------------------- */
.tc-app .tc-relacion {
  border: 0; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
}
.tc-app .tc-relacion__opcion {
  display: flex; gap: 0.75rem; align-items: center; min-width: 0;
  border: 1px solid var(--tc-borde); border-radius: 10px; background: #fff; padding: 0.875rem 1rem; cursor: pointer;
}
.tc-app .tc-relacion__opcion input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--tc-azul); }
.tc-app .tc-relacion__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.tc-app .tc-relacion__nombre { font-weight: 700; color: var(--tc-azul-oscuro); }
.tc-app .tc-relacion__detalle { font-size: 0.75rem; color: var(--tc-gris); }
.tc-app .tc-relacion__opcion:has(input:checked) { border-color: var(--tc-azul); box-shadow: 0 0 0 3px rgba(0, 121, 200, 0.12); }

/* --- Fecha de nacimiento bloqueada (recuperada con Orden + Código) ------------------------------ */
.tc-app .tc-campo--fija .tc-campo__etiqueta { display: block; margin: 0 0 0.375rem; font-weight: 600; color: var(--tc-azul-oscuro); }
.tc-app .tc-campo--fija .tc-campo__etiqueta .tc-obligatorio { color: var(--tc-error); }
.tc-app .tc-campo--fija .tc-dato-fijo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0; min-height: 48px; padding: 0.75rem 0.875rem; border: 1px solid var(--tc-borde);
  border-radius: var(--tc-radio); background: #f2f4f7; color: var(--tc-gris);
}
.tc-app .tc-campo--fija .tc-dato-fijo__valor { font-weight: 600; }
.tc-app .tc-campo--fija .tc-dato-fijo__candado { display: inline-flex; color: #8b9bb0; }

/* --- Pie del formulario ASE 2 (aviso legal + CTA) ----------------------------------------------- */
.tc-app .tc-ase__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.tc-app .tc-ase__legal {
  flex: 1 1 20rem; display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.8125rem; color: var(--tc-gris);
}
.tc-app .tc-ase__legal-icono { display: inline-flex; flex: 0 0 auto; color: #8b9bb0; }
.tc-app .tc-ase__pie .tc-acciones--centrado { flex: 1 1 18rem; margin: 0; }
.tc-app .tc-boton--bloque { width: 100%; }

/* --- ASE 3 · Revisar y enviar ------------------------------------------------------------------- */
.tc-app .tc-revisar-bloque {
  border: 1px solid var(--tc-borde); border-radius: 12px; background: #fff;
  padding: 1rem 1.125rem; margin: 0 0 1rem;
}
.tc-app .tc-revisar-bloque__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin: 0 0 0.875rem; }
.tc-app .tc-revisar-bloque__numero {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tc-azul); color: #fff;
  font-size: 0.8125rem; font-weight: 700;
}
.tc-app .tc-revisar-bloque__icono { flex: 0 0 auto; display: inline-flex; color: var(--tc-azul); }
.tc-app .tc-revisar-bloque__titulo { flex: 1 1 auto; margin: 0; font-size: 1rem; color: var(--tc-azul-oscuro); }
.tc-app .tc-revisar-bloque__estado {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--tc-ok);
}
.tc-app .tc-revisar-bloque__editar { flex: 0 0 auto; }
.tc-app .tc-revisar-bloque__editar .tc-boton--terciario {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem;
  border: 1px solid var(--tc-azul); border-radius: 6px; background: #fff; color: var(--tc-azul);
  font-weight: 700; text-decoration: none;
}
.tc-app .tc-revisar-bloque__editar .tc-boton--terciario:hover { background: #eef6fc; }
.tc-app .tc-revisar-bloque__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem 1.5rem; margin: 0;
}
.tc-app .tc-revisar-bloque__datos div {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.125rem; min-width: 0;
  border: 0; padding: 0;
}
.tc-app .tc-revisar-bloque__datos dt { font-size: 0.75rem; color: var(--tc-gris); }
.tc-app .tc-revisar-bloque__datos dd {
  margin: 0; font-weight: 600; color: var(--tc-azul-oscuro); text-align: left; overflow-wrap: anywhere; min-width: 0;
}
.tc-app .tc-revisar-bloque__medidas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; margin: 0 0 0.875rem;
}
.tc-app .tc-revisar-bloque__medida { display: flex; flex-direction: column; min-width: 0; }
.tc-app .tc-revisar-bloque__medida-etiqueta { font-size: 0.75rem; color: var(--tc-gris); }
.tc-app .tc-revisar-bloque__medida-valor { font-weight: 600; color: var(--tc-azul-oscuro); }
.tc-app .tc-revisar-salud { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.tc-app .tc-revisar-salud li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; min-width: 0;
  padding: 0.375rem 0; border-top: 1px solid #eef1f5; font-size: 0.875rem;
}
.tc-app .tc-revisar-salud__numero {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #e5f1fb; color: var(--tc-azul);
  font-size: 0.75rem; font-weight: 700;
}
.tc-app .tc-revisar-salud__pregunta { flex: 1 1 12rem; min-width: 0; color: #4a5568; }
.tc-app .tc-revisar-salud__respuesta { flex: 0 0 auto; font-weight: 700; color: var(--tc-azul-oscuro); }
.tc-app .tc-revisar-salud__chevron { flex: 0 0 auto; display: inline-flex; color: var(--tc-gris); }
.tc-app .tc-revisar-salud__detalle { flex: 1 1 100%; color: var(--tc-gris); font-size: 0.8125rem; }

.tc-app .tc-aceptaciones {
  border: 1px solid #dceaf7; border-radius: 12px; background: #f7fbfe; padding: 1rem 1.125rem; margin: 1.25rem 0;
}
.tc-app .tc-aceptaciones__titulo {
  display: flex; align-items: center; gap: 0.5rem; padding: 0;
  font-weight: 700; color: var(--tc-azul-oscuro);
}
.tc-app .tc-aceptaciones__icono {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; background: #fff; border: 1px solid #dceaf7; color: var(--tc-azul); flex: 0 0 auto;
}
.tc-app .tc-aceptaciones .tc-campo--check { margin: 0.5rem 0; }
.tc-app .tc-aceptaciones .tc-check { border: 0; background: transparent; padding: 0; }

.tc-app .tc-ase__nota-envio { margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--tc-gris); text-align: center; }
.tc-app .tc-ase__nota-envio a { color: var(--tc-azul); }

/* --- Ayuda directa (bloque compartido ASE 1 y ASE Final) ---------------------------------------- */
.tc-app .tc-ayuda-contacto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  border: 1px solid #dceaf7; border-radius: 12px; background: #f4faff; padding: 1rem 1.125rem; margin: 1.25rem 0 0;
}
.tc-app .tc-ayuda-contacto__icono {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid #dceaf7;
}
.tc-app .tc-ayuda-contacto__icono::before {
  content: ""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 20px; height: 13px; border: 2px solid var(--tc-azul); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.tc-app .tc-ayuda-contacto__icono::after {
  content: ""; position: absolute; left: 11px; top: 23px; width: 5px; height: 9px; border-radius: 3px;
  background: var(--tc-azul); box-shadow: 19px 0 0 var(--tc-azul);
}
.tc-app .tc-ayuda-contacto__texto { flex: 1 1 12rem; min-width: 0; }
.tc-app .tc-ayuda-contacto__titulo { margin: 0; font-weight: 700; color: var(--tc-azul-oscuro); }
.tc-app .tc-ayuda-contacto__nota { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--tc-gris); }
.tc-app .tc-ayuda-contacto__acciones { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 0 0 auto; }
.tc-app .tc-ayuda-contacto__acciones .tc-boton { min-height: 44px; padding: 0.5rem 1.25rem; text-decoration: none; }

/* --- ASE 4 · Final ------------------------------------------------------------------------------ */
.tc-app .tc-paso--final { max-width: 760px; }
.tc-app .tc-final-ase { padding: 2rem 1.75rem; text-align: center; }
.tc-app .tc-final-ase__check {
  display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px;
  border-radius: 50%; background: var(--tc-ok); color: #fff; font-size: 2.5rem; line-height: 1; margin: 0 auto 0.875rem;
}
.tc-app .tc-final-ase__titulo { font-size: 1.9rem; margin: 0 0 0.5rem; }
.tc-app .tc-final-ase__intro { margin: 0 auto 1.5rem; max-width: 34rem; color: #4a5568; }
.tc-app .tc-final-ase__aviso {
  display: flex; gap: 0.875rem; align-items: flex-start; text-align: left;
  background: #eef6fd; border: 1px solid #dceaf7; border-radius: 10px; padding: 1rem 1.125rem; margin-bottom: 1.5rem;
}
.tc-app .tc-final-ase__aviso-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--tc-azul); font-size: 1.25rem;
}
.tc-app .tc-final-ase__aviso-texto { min-width: 0; }
.tc-app .tc-final-ase__aviso-texto p { margin: 0; }
.tc-app .tc-final-ase__aviso-nota { margin-top: 0.25rem; font-size: 0.875rem; color: var(--tc-gris); }

.tc-app .tc-valoracion {
  text-align: center; border: 1px solid #dceaf7; border-radius: 12px;
  background: linear-gradient(180deg, #f4faff, #eaf3fb); padding: 1.5rem 1.25rem; margin: 0 0 1rem;
}
.tc-app .tc-valoracion__gracias { margin: 0 0 0.375rem; font-size: 1.05rem; font-weight: 700; color: var(--tc-azul-oscuro); }
.tc-app .tc-valoracion__intro { margin: 0 0 0.5rem; font-size: 0.9375rem; color: #4a5568; }
.tc-app .tc-valoracion__mensaje { margin: 0 0 0.625rem; font-weight: 700; color: var(--tc-azul-oscuro); }
.tc-app .tc-valoracion__estrellas { margin: 0 0 0.875rem; font-size: 1.75rem; line-height: 1; letter-spacing: 4px; color: #f2b01e; }
.tc-app .tc-valoracion__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; text-decoration: none;
}
.tc-app .tc-valoracion__cta[aria-disabled="true"] { cursor: default; }
.tc-app .tc-valoracion__pie { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--tc-gris); }

/* --- Acordeón ASE: número de bloque, icono y estado «En proceso» -------------------------------- */
.tc-app .tc-acordeon__numero {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tc-azul); color: #fff;
  font-size: 0.8125rem; font-weight: 700;
}
.tc-app .tc-acordeon--en-proceso .tc-acordeon__boton { border-left-color: var(--tc-azul); }
.tc-app .tc-acordeon--en-proceso .tc-acordeon__estado { background: #e3f0fb; color: var(--tc-azul); }

/* --- Responsive ASE ----------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {
  .tc-app .tc-ase__rejilla { grid-template-columns: minmax(0, 1fr); }
  .tc-app .tc-ase__hero-paso { flex-basis: 100%; }
}
@media screen and (max-width: 700px) {
  .tc-app .tc-relacion { grid-template-columns: minmax(0, 1fr); }
  .tc-app .tc-revisar-bloque__datos { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
  .tc-app .tc-acceso { padding: 1.5rem 1.25rem; }
  .tc-app .tc-final-ase { padding: 1.5rem 1.25rem; }
  .tc-app .tc-ase__hero { padding: 1rem 1.125rem; }
  .tc-app .tc-ase__pie { flex-direction: column; align-items: stretch; }
  .tc-app .tc-ase__pie .tc-acciones--centrado { flex-basis: auto; }
  .tc-app .tc-aceptaciones { padding: 0.875rem 1rem; }
  .tc-app .tc-ayuda-contacto { padding: 0.875rem 1rem; }
  .tc-app .tc-ayuda-contacto__acciones { margin-left: 0; width: 100%; }
  .tc-app .tc-ayuda-contacto__acciones .tc-boton { flex: 1 1 45%; }
  .tc-app .tc-final-ase__aviso { padding: 0.875rem 1rem; }
}

/* ------------------------------- importe principal por periodicidad (Fase C, §2.2 del encargo) */
/* Cuando el tarifario no publica la periodicidad elegida, el importe destacado se muestra como
   «Pendiente» (sin cifra) con su aviso debajo: nunca un valor inventado. */
.tc-app .tc-precio-tarjeta__cuota--pendiente .tc-precio-tarjeta__importe {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tc-gris);
}
.tc-app .tc-precio-tarjeta__cuota-nota {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  color: var(--tc-gris);
}

/* ------------------- enlace a la ficha comercial del producto (FASE 1, §6 del encargo) -------- */
/* Sustituye, en TODOS los productos, al antiguo acordeón de copagos. Puramente informativo:
   no cambia la modalidad, el producto ni el estado de la contratación. */
.tc-app .tc-ficha-producto { margin: 1.25rem 0 0.5rem; }
.tc-app .tc-ficha-producto__enlace {
  color: var(--tc-azul);
  font-weight: 600;
  text-decoration: underline;
}
.tc-app .tc-ficha-producto__enlace:hover,
.tc-app .tc-ficha-producto__enlace:focus { color: var(--tc-azul-oscuro); }
.tc-app .tc-ficha-producto--pendiente .tc-ficha-producto__texto { color: var(--tc-gris); }

/* ------------------- capa de promociones: bloque «Producto en promoción» (FASE 3, §4) ---------- */
/* INFORMATIVO. Se pinta FUERA de las tarjetas; no altera su estructura ni el flujo de contratación.
   Con la capa de promociones vacía (ninguna campaña declarada) este bloque no se emite. */
.tc-app .tc-promocion {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tc-borde);
  border-left: 4px solid var(--tc-azul);
  border-radius: var(--tc-radio);
  background: var(--tc-fondo-suave);
}
.tc-app .tc-promocion__titulo {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  color: var(--tc-azul-oscuro);
}
.tc-app .tc-promocion__vigencia { margin: 0 0 0.35rem; font-weight: 600; color: var(--tc-texto); }
.tc-app .tc-promocion__texto { margin: 0 0 0.5rem; color: var(--tc-gris); }
.tc-app .tc-promocion__precio { margin: 0 0 0.5rem; color: var(--tc-texto); }
.tc-app .tc-promocion__lista { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.tc-app .tc-promocion__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0; }
.tc-app .tc-promocion__pct { font-weight: 600; color: var(--tc-texto); }
.tc-app .tc-promocion__desplegable { display: inline-block; position: relative; }
.tc-app .tc-promocion__calcular {
  display: inline-block; padding: 0.15rem 0.6rem; cursor: pointer; list-style: none;
  border: 1px solid var(--tc-azul); border-radius: 999px;
  color: var(--tc-azul); background: #fff; font-size: 0.8125rem; font-weight: 600;
}
.tc-app .tc-promocion__calcular::-webkit-details-marker { display: none; }
.tc-app .tc-promocion__calcular:hover,
.tc-app .tc-promocion__calcular:focus { background: var(--tc-azul); color: #fff; }
.tc-app .tc-promocion__popup {
  display: block; margin-top: 0.35rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--tc-borde); border-radius: var(--tc-radio);
  background: #fff; color: var(--tc-texto); font-size: 0.875rem;
}
.tc-app .tc-promocion__nota { display: block; color: var(--tc-gris); }
.tc-app .tc-promocion__condiciones { margin: 0.5rem 0 0; }
.tc-app .tc-promocion__enlace { color: var(--tc-azul); font-weight: 600; text-decoration: underline; }
.tc-app .tc-promocion__enlace:hover,
.tc-app .tc-promocion__enlace:focus { color: var(--tc-azul-oscuro); }

/* ------------------- aviso informativo del recargo del Consorcio (FASE 5b, §2) ------------------ */
/* INFORMATIVO y DISCRETO: una sola vez, debajo de las tarjetas de precios y antes del botón «Volver».
   No se pinta si el producto no declara el recargo en sus condiciones y no se repite por tarjeta.
   No altera ningún importe: el 0,15 % es informativo y nunca se calcula, suma ni redondea. */
.tc-app .tc-aviso-consorcio {
  margin: 0.5rem 0 0;
  color: var(--tc-gris);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ================================================================================================
   AÑADIDO CONMUTABLE — «SOLICITUD DE COTIZACIÓN A MEDIDA MEJORADA» (DOC-COTIZACION-MEJORADA.md)
   Todo el proceso se gobierna con TC_COTIZACION_MEJORADA (config/config.php). Estas reglas solo se
   aplican mientras el proceso esté activo; con la constante desactivada no se pinta ningún elemento
   del proceso y la apariencia de la web es EXACTAMENTE la de antes.
   ================================================================================================ */

/* Checkbox de cada tarjeta: DEBAJO de la forma de pago y ENCIMA del CTA «Contratar». */
.tc-app .tc-cotizacion-check {
  margin: 0.5rem 0 0.125rem;
}

.tc-app .tc-cotizacion-check__label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tc-texto);
  cursor: pointer;
}

.tc-app .tc-cotizacion-check__label input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0.05rem 0 0;
  accent-color: var(--tc-azul);
}

.tc-app .tc-cotizacion-check__label strong { font-weight: 700; }

/* Popups del proceso: reutilizan el contenedor .tc-modal (capa fija, centrada y con [hidden]).
   v2: el aspecto está CALCADO de las imágenes de referencia del propietario (medidas sobre la imagen:
   tipografía, jerarquía, «foco» azul claro, anillo con glifo, barras de los pasos y botones). Ver
   informes/NOTA-POPUPS-Y-BOTONES-v2.md. Solo dentro de .tc-app y con prefijo tc-. */
.tc-app .tc-cot-modal__dialogo {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 20px 20px 14px;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(13, 24, 70, 0.18);
}

.tc-app .tc-cot-modal__dialogo--pasos {
  max-width: 495px;
  padding: 16px;
}

.tc-app .tc-cot-modal__cerrar {
  position: absolute;
  top: 0;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6f7a92;
  font-size: 1.875rem;
  line-height: 1;
  cursor: pointer;
}

.tc-app .tc-cot-modal__cerrar:hover,
.tc-app .tc-cot-modal__cerrar:focus { color: var(--tc-azul-oscuro); }

/* Icono grande de cabecera: un único SVG de 304 × 69 (popup 1) / 304 × 60 (popup 2) con el «foco» azul
   claro, el anillo y los trazos de énfasis. El anillo va en el CENTRO de la caja (que es como está en
   las referencias) y el foco continúa por debajo de la caja, por detrás del título: por eso el SVG lleva
   overflow visible y el título se le superpone. Se escala solo si la pantalla es estrecha. */
/* Azul propio de los popups: medido sobre las referencias (relleno de los botones «Llamar» y
   «Aceptar»). Va en las DOS clases del contenedor porque el popup real lleva «tc-modal--cotizacion»
   y su diálogo «tc-cot-modal__dialogo»; con var() sin definir, una declaración inválida en tiempo de
   cálculo deja el valor en su inicial (fondo transparente), así que la variable tiene que existir. */
.tc-app .tc-modal--cotizacion,
.tc-app .tc-cot-modal__dialogo { --tc-cot-azul: #0178d6; }

.tc-app .tc-cot-modal__icono {
  display: block;
  width: 100%;
  max-width: 304px;
  margin: 3px auto 3px;
  color: var(--tc-cot-azul);
  overflow: visible;
}

.tc-app .tc-cot-modal__icono .tc-cot-icono { display: block; width: 100%; height: auto; overflow: visible; }

.tc-app .tc-cot-modal__dialogo--pasos .tc-cot-modal__icono { margin: 1px auto 4px; }

/* El título del popup 2 va un punto más pequeño que el del popup 1, como en las referencias. */
.tc-app .tc-cot-modal__dialogo--pasos .tc-cot-modal__titulo { font-size: 1.5625rem; }

.tc-app .tc-cot-modal__titulo {
  margin: 0;
  text-align: center;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: #04248a;
}

.tc-app .tc-cot-modal__texto {
  margin: 0;
  text-align: center;
  color: #02235a;
}

.tc-app .tc-cot-modal__texto--entradilla {
  margin-top: 3px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
}

.tc-app .tc-cot-modal__texto--cuerpo {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1;
}

.tc-app .tc-cot-modal__texto strong { font-weight: 700; }

/* POPUP 1: «Continuar» (rojo de la referencia, con carrito y flecha) y «Llamar» (azul, con teléfono y
   flecha), y bajo el botón de llamada el número y el horario. */
.tc-app .tc-cot1__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 21px;
}

.tc-app .tc-cot1__acciones .tc-boton {
  min-height: 44px;
  padding: 0 10px;
  gap: 9px;
  border-radius: 5px;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.tc-app .tc-cot1__continuar {
  border-color: #f1260b;
  background: #f1260b;
}

.tc-app .tc-cot1__continuar:hover,
.tc-app .tc-cot1__continuar:focus { background: #d31e07; border-color: #d31e07; }

.tc-app .tc-cot1__llamar { display: flex; flex-direction: column; align-items: center; }
.tc-app .tc-cot1__llamar .tc-boton { width: 100%; justify-content: center; background: var(--tc-cot-azul); border-color: var(--tc-cot-azul); }
.tc-app .tc-cot1__llamar .tc-boton:hover,
.tc-app .tc-cot1__llamar .tc-boton:focus { background: #0064b8; border-color: #0064b8; }

.tc-app .tc-cot1__telefono {
  margin: 7px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tc-cot-azul);
  white-space: nowrap;
}

.tc-app .tc-cot1__horario {
  margin: 3px 0 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: #46597c;
}

/* POPUP 2: pasos con su icono en círculo azul claro y botón «Aceptar» centrado. Las filas llegan hasta
   el borde derecho de la tarjeta (es lo que mide la referencia: filas de 478 px en una tarjeta de 495,
   con el mismo margen de 16 px a la izquierda); el texto va a 13 px como en la referencia. */
.tc-app .tc-cot2__lista {
  margin: 15px -15px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5.5px;
}

.tc-app .tc-cot2__item {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 37px;
  padding: 0.5px 1px 0.5px 11px;
  border-radius: 5px;
  background: #f1f7fe;
  color: #04205e;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.tc-app .tc-cot2__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dceefd;
  color: var(--tc-cot-azul);
}

.tc-app .tc-cot2__texto strong { font-weight: 700; }

.tc-app .tc-cot-modal__acciones { display: flex; justify-content: center; margin-top: 12px; }

.tc-app .tc-cot-modal__acciones .tc-boton {
  min-width: 210px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 5px;
  background: var(--tc-cot-azul);
  border-color: var(--tc-cot-azul);
  font-size: 1rem;
  letter-spacing: 0;
}

.tc-app .tc-cot-modal__acciones .tc-boton:hover,
.tc-app .tc-cot-modal__acciones .tc-boton:focus { background: #0064b8; border-color: #0064b8; }

/* Mensaje final alternativo de la pantalla de éxito: título en negrita y naranja oscuro. */
.tc-app .tc-cotizacion-mejorada__titulo { font-weight: 700; color: #db3907; }

/* Botones «USAR MIS DATOS…» de los dos bloques del tomador: uno por bloque y algo MÁS PEQUEÑOS que el
   botón auxiliar habitual (mismo comportamiento, campo por campo: cada uno toca solo su bloque). */
.tc-app .tc-usar-datos .tc-boton {
  min-height: 38px;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

@media screen and (max-width: 640px) {
  .tc-app .tc-cot1__acciones { grid-template-columns: 1fr; }
  .tc-app .tc-cot-modal__acciones .tc-boton { width: 100%; min-width: 0; }
  .tc-app .tc-cot-modal__titulo { font-size: 1.375rem; }
}