/* ==========================================================
   TRS · Bolsa de Trabajo — Diseño "Tablero de despacho"
   Se carga en index, vacantes, formulario y gracias.
   En formulario/gracias va DESPUÉS de styles.css y lo re-pinta
   con estos tokens (los nombres viejos apuntan a la paleta nueva).
   Reglas: flat (sin sombras), color de marca #21cfcc, logo TRS.
   ========================================================== */

:root {
  /* Marca TRS */
  --teal: #21cfcc;
  --teal-h: #1bb2af;
  /* Texto oscuro sobre teal: mantiene el acento de marca con contraste legible. */
  --on-teal: #ffffff; /* texto sobre fondo teal: blanco (decisión del usuario; sobre #21cfcc da ~1.9:1, el oscuro #06201f daba 9:1) */

  /* Superficies y texto (tema claro) */
  --bg: #f2f5f5;
  --sf: #ffffff;
  --ink: #0f171a;
  --ink2: #3d5256;
  --mut: #56686b;
  --ln: #d2dbdc;
  --ln2: #b9c6c8;         /* línea del header: más marcada que --ln para separarlo del contenido */
  --hd: var(--sf);        /* fondo del header */
  --tx: #0a5a78;         /* azul-verde oscuro para TEXTO sobre claro (el #21cfcc solo da 1.9:1) */
  --rowh: #e4f6f5;
  --err: #b3261e;
  --ok: #12681b;
  --warn: #8a5300;

  --fd: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fb: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Nombres heredados de styles.css → nueva paleta */
  --color-fondo: var(--bg);
  --color-superficie-elevada: var(--sf);
  --color-superficie: #eaf0f0;
  --color-borde: var(--ln);
  --color-borde-focus: var(--ink);
  --texto-primario: var(--ink);
  --texto-secundario: var(--ink2);
  --texto-terciario: var(--mut);
  --trs-primario-oscuro: var(--tx);
  --trs-primario-suave: #d6f5f4;
  --color-error: var(--err);
  --color-exito: var(--ok);
  --color-advertencia: var(--warn);
  --radio-control: 2px;
  --radio-overlay: 2px;
  --fuente: var(--fb);
}

:root[data-theme="dark"] {
  --bg: #0c1315;
  --sf: #121b1e;
  --ink: #eaf2f2;
  --ink2: #b5c6c8;
  --mut: #8ea2a5;
  --ln: #25353a;
  --ln2: #3a4f55;
  --hd: #17242a;          /* un escalón más claro que la página (--bg) para que la barra se lea como barra */
  --tx: #21cfcc;
  --rowh: #132a2b;
  --err: #ff8a7d;
  --ok: #5fd16a;
  --warn: #f2b552;
  --color-superficie: #182226;
  --trs-primario-suave: rgba(33, 207, 204, 0.15);
  /* styles.css redefine estos en su bloque oscuro (más específico que :root): se vuelven a apuntar a la paleta nueva */
  --color-fondo: var(--bg);
  --color-superficie-elevada: var(--sf);
  --color-borde: var(--ln);
  --texto-primario: var(--ink);
  --texto-secundario: var(--ink2);
  --texto-terciario: var(--mut);
  --trs-primario-oscuro: var(--tx);
  --color-error: var(--err);
  --color-exito: var(--ok);
  --color-advertencia: var(--warn);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; box-shadow: none !important; text-shadow: none !important; }
html { scroll-behavior: smooth; }
html, body {
  min-height: 100vh;
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; overflow-x: hidden; }
main { flex: 1 0 auto; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--tx); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

.trs-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
/* Iconos SVG en línea (sprite al inicio de index/vacantes): sin fuente externa y sin texto suelto mientras carga */
.trs-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header / footer ---------- */
.trs-hd { position: sticky; top: 0; z-index: 100; background: var(--hd); border-bottom: 1px solid var(--ln2); }
.trs-hd-in { display: flex; align-items: center; gap: 24px; height: 76px; }
.trs-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ink); font: 700 22px var(--fd); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
/* logotrs.png ya trae fondo transparente y mucho margen: se recorta con CSS (sin tocar el archivo) para que la marca se lea. */
.trs-logo { --h: 50px; position: relative; flex: none; overflow: hidden; height: var(--h); aspect-ratio: 1.397; }
.trs-logo img { position: absolute; max-width: none; width: 108.05%; height: auto; left: -3.62%; top: -25.283%; }
.trs-nav { margin-left: auto; display: flex; gap: 28px; font-weight: 600; }
.trs-nav a { text-decoration: none; color: var(--ink2); }
.trs-nav a:hover { color: var(--tx); }
.trs-theme-toggle { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--ln); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
.trs-theme-toggle:hover { border-color: var(--tx); }

.trs-ft { border-top: 1px solid var(--ln); padding: 22px 0; color: var(--mut); font-size: 14px; }
.trs-ft-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.trs-ft .trs-logo { --h: 36px; }

/* ---------- Botones y enlaces ---------- */
.trs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--teal); color: var(--on-teal); font: 700 16px var(--fb); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.trs-btn:hover { background: var(--teal-h); }
.trs-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ln); }
.trs-btn.ghost:hover { border-color: var(--ink); }
.trs-lnk { font-weight: 600; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
/* Mismo fondo que el resto de la página; el cambio de sección lo marca la línea inferior */
.trs-hero { border-bottom: 1px solid var(--ln); overflow-x: clip; }
.trs-hero-g { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding-block: 32px; }
.trs-hero-t { padding: 8px 48px 8px 0; display: flex; flex-direction: column; justify-content: center; }
.trs-hero h1 { font: 800 clamp(40px, 4vw, 66px)/.94 var(--fd); text-transform: uppercase; }
.trs-lead { font-size: 18px; color: var(--ink2); max-width: 500px; margin: 16px 0 22px; }
.trs-hero-cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.trs-hero .trs-lnk { color: var(--ink); }
/* Lo que el candidato necesita saber antes de decidir: va junto al botón, no al final de la página */
.trs-hero-need { margin-top: 18px; font-size: 15px; color: var(--ink2); }
.trs-hero-need b { color: var(--ink); font-weight: 600; }
/* margin-right negativo = la foto sale del contenedor (1200px + padding) y llega al borde derecho de la ventana; el texto queda a la izquierda, alineado con el logo del encabezado */
.trs-hero-p { position: relative; min-height: clamp(340px, 42vh, 420px); overflow: hidden; }
/* Foto dentro del contenedor: su borde derecho coincide con el del header (interruptor de tema). Antes sangraba hasta el borde de la ventana
   con margin-right: calc(-1 * (max(0px, (100vw - 1200px) / 2) + clamp(16px, 4vw, 40px))). */
:root[data-theme="dark"] .trs-hero-p img { filter: brightness(.9); } /* la foto clara pesa demasiado sobre fondo oscuro */
.trs-hero-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 22%; } /* foto horizontal 1672×941: el colaborador ocupa del 27 % al 68 % del ancho y la cara está arriba */

/* ---------- Tablero de vacantes ---------- */
.trs-board { padding-block: 42px 20px; }
.trs-board-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.trs-board-h h2, .trs-board-h h1 { font: 700 46px/1 var(--fd); text-transform: uppercase; }
.trs-count { color: var(--mut); font-weight: 500; }
.trs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trs-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--ln); border-radius: 2px; background: transparent; color: var(--ink2); font: 600 14px var(--fb); cursor: pointer; white-space: nowrap; }
.trs-chip:hover { border-color: var(--ink); }
.trs-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.trs-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 110px 130px 170px; align-items: center; gap: 0 16px; padding: 18px 16px; border-top: 1px solid var(--ln); text-decoration: none; color: inherit; }
.trs-row:last-child { border-bottom: 1px solid var(--ln); }
.trs-th { padding: 10px 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); border-top: 2px solid var(--ink); }
.trs-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--teal); color: var(--on-teal); font: 800 17px var(--fd); border-radius: 2px; font-variant-numeric: tabular-nums; }
.trs-pu b { display: block; font: 700 30px/1.05 var(--fd); text-transform: uppercase; }
.trs-pu small { color: var(--mut); font-size: 15px; }
.trs-meta { display: contents; }
.trs-c { font: 600 21px var(--fd); font-variant-numeric: tabular-nums; }
.trs-c i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); font-style: normal; }
/* Botón «Postularme»: es el único enlace de la fila (la fila entera ya no se puede picar) */
.trs-go { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--teal); border-radius: 2px; background: var(--teal); color: var(--on-teal); font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.trs-go:hover { background: var(--teal-h); border-color: var(--teal-h); }
.trs-go .trs-i { width: 20px; height: 20px; }
.trs-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: var(--tx); }

.trs-estado { text-align: center; padding: 48px 24px; border: 1px dashed var(--ln); }
.trs-estado .trs-i { width: 44px; height: 44px; color: var(--tx); }
.trs-estado.error .trs-i { color: var(--err); }
.trs-estado h3 { font: 700 26px var(--fd); text-transform: uppercase; margin: 8px 0 6px; }
.trs-estado p { color: var(--ink2); margin-bottom: 16px; }

/* ---------- Cómo aplicar ---------- */
.trs-how { padding-block: 36px 64px; }
.trs-how ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.trs-how li { padding: 20px 28px 0 0; display: flex; gap: 16px; align-items: center; }
.trs-how li b { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; background: var(--teal); color: var(--on-teal); font: 800 24px var(--fd); border-radius: 2px; }
.trs-how li span { font-size: 17px; font-weight: 600; padding-top: 2px; }
.trs-how li small { display: block; font-weight: 400; color: var(--mut); font-size: 15px; }
.trs-need { margin-top: 22px; padding: 14px 16px; background: var(--sf); border: 1px solid var(--ln); }

/* ---------- Formulario: riel + cuerpo ---------- */
.trs-f-g { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; padding-block: 40px 72px; align-items: start; }
.trs-rail { position: sticky; top: 100px; } /* alto del header (76px) + 24px */
.trs-rail-vac { display: none; flex-direction: column; }
.trs-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.trs-rail-t { font: 800 42px/.95 var(--fd); text-transform: uppercase; margin: 6px 0 14px; }
.trs-dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ln); padding: 8px 0; font-size: 15px; }
.trs-dl dt { color: var(--mut); }
.trs-dl dd { font-weight: 600; text-align: right; }
.trs-steps { list-style: none; margin: 26px 0 18px; }
.trs-step { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; color: var(--mut); }
.trs-step .sn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font: 700 13px var(--fd); border: 1.5px solid var(--ln); color: var(--mut); }
.trs-step .sn-n { line-height: 1; }
.trs-step .sn-c { display: none; position: relative; top: 1px; }
.trs-step .sl { font-weight: 600; }
.trs-step .sl small { display: block; font-weight: 400; font-size: 13px; }
.trs-step.is-done { color: var(--ink2); cursor: pointer; }
.trs-step.is-done .sn-n { display: none; }
.trs-step.is-done .sn-c { display: inline; }
.trs-step.is-done .sn, .trs-step.is-on .sn { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.trs-step.is-on { color: var(--ink); }
.trs-step.is-on .sl { font-weight: 700; }
.trs-stepnow { display: none; margin-top: 10px; font-weight: 600; color: var(--ink2); font-size: 14px; }

/* Pasos (contenido) — sin tarjeta, tipografía de tablero */
.paso { background: transparent; border: 0; border-radius: 0; padding: 0; }
.paso h2 { display: block; font: 800 clamp(38px, 5vw, 64px)/.95 var(--fd); letter-spacing: 0; text-transform: uppercase; color: var(--ink); margin-bottom: 0; }
.paso h2 .trs-pn { display: inline-flex; align-items: center; justify-content: center; width: clamp(40px, 8vw, 56px); height: clamp(40px, 8vw, 56px); background: var(--teal); color: var(--on-teal); font-size: clamp(22px, 4vw, 30px); border-radius: 2px; margin-right: 16px; vertical-align: middle; }
.paso h2 .material-symbols-outlined, .paso h3 .material-symbols-outlined { display: none; }
.paso h3 { font: 700 26px var(--fd); text-transform: uppercase; color: var(--ink); margin: 32px 0 12px; padding-top: 12px; border-top: 2px solid var(--ink); }
.paso .descripcion { font-size: 17px; color: var(--ink2); margin: 10px 0 26px; }

.form-group { margin-bottom: 20px; }
.form-group label { font-size: 15px; margin-bottom: 6px; }
.form-row { gap: 0 20px; }
.paso .input-grande { font-size: 17px !important; min-height: 52px !important; padding: 13px 14px !important; border-radius: 2px !important; border-width: 1.5px !important; font-family: var(--fb) !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 3px solid var(--teal); outline-offset: 0; border-color: var(--ink); }
/* Flecha de los desplegables: la nativa queda pegada al borde. Se dibuja una propia a 18px del borde (clara/oscura) y se reserva el espacio a la derecha. */
.paso select.input-grande { -webkit-appearance: none; appearance: none; padding-right: 48px !important; cursor: pointer; background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f171a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .paso select.input-grande { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf2f2' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); }
/* Selector personalizable (Chromium: Chrome, Edge, Brave): la lista que se abre deja de ser la nativa gris/azul y usa la paleta del sitio.
   Mejora progresiva: donde no exista base-select (Safari/iOS, Firefox) se queda el desplegable nativo con la flecha de arriba. Sin sombras.
   Solo con mouse: en celular (Android/iOS) se deja el selector nativo del sistema (rueda en iOS, diálogo en Android), que es lo más cómodo con el dedo. */
@media (hover: hover) and (pointer: fine) { @supports (appearance: base-select) {
  .paso select.input-grande, .paso select.input-grande::picker(select) { appearance: base-select; }
  .paso select.input-grande { background-image: none; padding-right: 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .paso select.input-grande::picker-icon { content: ""; flex: none; width: 16px; height: 16px; background: var(--ink); transition: rotate .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; }
  .paso select.input-grande:open::picker-icon { rotate: 180deg; }
  .paso select.input-grande::picker(select) { min-width: anchor-size(width); max-height: min(340px, 50vh); margin-block: 4px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sf); color: var(--ink); }
  .paso select.input-grande option { display: flex; align-items: center; padding: 12px 14px; font: 500 17px var(--fb); color: var(--ink); border-radius: 2px; cursor: pointer; }
  .paso select.input-grande option:hover, .paso select.input-grande option:focus-visible { background: var(--rowh); }
  .paso select.input-grande option:checked { background: var(--teal); color: var(--on-teal); font-weight: 700; }
  .paso select.input-grande option:disabled, .paso select.input-grande option[value=""] { color: var(--mut); }
  .paso select.input-grande option[value=""]:checked { background: transparent; color: var(--mut); font-weight: 500; }
  .paso select.input-grande option::checkmark { display: none; }
} }
/* Fechas: el ícono de calendario también se separa del borde */
.paso input[type="date"].input-grande { padding-right: 22px !important; min-width: 0; max-width: 100%; }
/* iOS Safari: el campo de fecha ignora altura/alineación y puede desbordar su columna; se normaliza (el selector nativo de fecha sigue abriendo al tocar) */
@media (pointer: coarse) { .paso input[type="date"].input-grande { -webkit-appearance: none; appearance: none; text-align: left; } }
.paso input[type="date"].input-grande::-webkit-calendar-picker-indicator { cursor: pointer; margin-left: 8px; }
.paso .input-con-icono input { padding-left: 48px !important; } /* deja lugar al ícono (gana a .paso .input-grande) */
.hint-amigable, .link-ayuda-curp { font-size: 14px; }
.hint-amigable { color: var(--ink2); }
.campo-error .error-inline { font-size: 14px; }

.requisitos-puesto { background: var(--sf); border: 1px solid var(--ln); padding: 16px 18px; margin-bottom: 24px; }
.requisitos-puesto h4 { font: 700 24px var(--fd); text-transform: uppercase; }
.requisitos-puesto h4 .material-symbols-outlined { display: none; }
.privacidad-resumen-card, .checkbox-tarjeta, .resumen-tarjeta { background: var(--sf); }
.alerta-consejo { background: transparent; border: 0; border-left: 3px solid var(--ln); border-radius: 0; padding: 4px 0 4px 14px; font-size: 15px; color: var(--ink2); }
.alerta-consejo .material-symbols-outlined { display: none; }

/* Preguntas Sí/No y documentos */
.pregunta { background: var(--sf); }
.opciones-si-no button.seleccionado { color: var(--on-teal); }
.doc-tarjeta { border-width: 1px; border-radius: 2px; background: var(--sf); }
.doc-tarjeta.tiene-archivo { border-color: var(--ln); background: var(--sf); }
.doc-tarjeta-titulo .material-symbols-outlined { display: none; }
.doc-tarjeta-titulo { font-size: 17px; }
.doc-instruccion { font-size: 15px; }
.doc-badge-obligatorio, .doc-badge-opcional { border-radius: 2px; }
.btn-camara-accion, .btn-galeria-accion { border-radius: 2px; }
.btn-camara-accion { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn-camara-accion:hover { background: var(--teal-h); border-color: var(--teal-h); }
.btn-galeria-accion { background: transparent; }
.doc-preview-caja, .doc-preview-thumb, .btn-doc-quitar { border-radius: 2px; }
.doc-preview-estado { color: var(--ok); }
/* Sin bordes teal al pasar el cursor: usan el color de texto */
/* Casillas (aviso de privacidad y cambio de residencia): solo la casilla se marca. La fila/tarjeta no es clicable, así que sin cursor de mano ni resaltado al pasar. */
.checkbox-inline, .checkbox-tarjeta { cursor: default; }
.checkbox-inline input[type="checkbox"], .checkbox-tarjeta input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin: 0; cursor: pointer; }
.checkbox-inline { align-items: center; }
.checkbox-inline .checkbox-texto { color: var(--texto-primario); }
.checkbox-tarjeta .checkbox-texto { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-primario); }
@media (pointer: coarse) { .checkbox-inline input[type="checkbox"], .checkbox-tarjeta input[type="checkbox"] { width: 28px; height: 28px; } }
.documento-slot:hover, .opciones-si-no button:hover, .btn-galeria-accion:hover { border-color: var(--ink); }

/* Botones del wizard */
.acciones { margin-top: 32px; justify-content: space-between; }
.acciones .btn:only-child { margin-left: auto; }
.btn { font-family: var(--fb); font-size: 16px; border-radius: 2px; border-width: 1.5px; flex: 0 1 auto; min-width: 150px; }
.btn-primario { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn-primario:hover:not(:disabled) { background: var(--teal-h); border-color: var(--teal-h); transform: none; }
.btn-secundario { background: transparent; color: var(--ink); border-color: var(--ln); }
.btn-secundario:hover:not(:disabled) { background: transparent; border-color: var(--ink); }
.btn-grande { min-height: 52px; border-radius: 2px !important; font-weight: 700 !important; padding: 12px 24px !important; }
.btn-enviar-final { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--on-teal) !important; }
.btn-enviar-final:hover:not(:disabled) { background: var(--teal-h) !important; border-color: var(--teal-h) !important; }
.mensaje { border-radius: 2px; }

/* WhatsApp: verde #25D366 con texto blanco (pedido explícito; da ~2:1 de contraste, si se quiere más legible oscurecer el verde) */
.trs-btn-flotante-wa { border-radius: 2px; color: #fff; font-weight: 700; }
.trs-btn-flotante-wa:hover { color: #fff; transform: none; }

/* ---------- Gracias ---------- */
.gracias { border-radius: 2px; }
.gracias .id-caja { background: var(--sf); border-color: var(--ln); }
.gracias .id-caja-btn { border-color: var(--ln); border-radius: 2px; }
.gracias h2 { font: 800 clamp(34px, 5vw, 52px)/1 var(--fd); text-transform: uppercase; letter-spacing: 0; }
.gracias .consejos strong .material-symbols-outlined { display: none; }
.gracias p, .gracias .consejos li { font-size: 15px; }

/* ---------- Angosto (celular / tablet) ---------- */
@media (max-width: 860px) {
  .trs-nav { display: none; }
  .trs-theme-toggle { margin-left: auto; }
  .trs-hero-g { grid-template-columns: 1fr; padding-block: 0; }
  .trs-hero-t { padding: 36px 0 28px; }
  .trs-hero-p { min-height: 200px; margin: 4px 0 20px; }
  .trs-row.trs-th { display: none; }
  .trs-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 4px; }
  .trs-n { width: 34px; height: 34px; font-size: 14px; }
  .trs-meta { display: flex; gap: 18px; grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; }
  .trs-c i { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-right: 6px; font: 600 11px var(--fb); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
  .trs-go { min-width: 116px; min-height: 48px; padding: 0 10px; grid-column: 3; grid-row: 1; font-size: 14px; }
  .trs-how ol { grid-template-columns: 1fr; }
  .trs-how li { padding: 16px 0; }
  .trs-f-g { grid-template-columns: 1fr; gap: 20px; padding-block: 24px 56px; }
  .trs-rail { position: static; }
  .trs-rail .trs-dl, .trs-rail .trs-k { display: none; }
  .trs-rail-t { font-size: 30px; margin: 0 0 12px; }
  .trs-steps { display: flex; gap: 4px; margin: 0; }
  .trs-step { flex: 1; height: 5px; padding: 0; background: var(--ln); border: 0; overflow: hidden; }
  .trs-step.is-done, .trs-step.is-on { background: var(--teal); }
  .trs-step > * { display: none !important; }
  .trs-stepnow { display: block; }
}
@media (max-width: 640px) {
  .acciones .btn { flex: 1; min-width: 0; }
  .trs-board-h h2, .trs-board-h h1 { font-size: 38px; }
}