/* ---------------------------------------------------------------------------
   cabitrans/cotizador — hoja del cotizador.
   No trae diseño propio: todo sale de las variables y las clases .rd-* de
   cabitrans/ui. Los valores de reserva son solo para que se pueda ver el
   paquete suelto; en una web real manda siempre la variable.
   --------------------------------------------------------------------------- */

.cot {
  --cot-u: var(--u, 4px);
  --cot-radio: var(--radio, 8px);
  --cot-borde: var(--c-borde, #dde3ea);
  color: var(--c-texto, #15202b);
  font-family: var(--f-texto, system-ui, sans-serif);
}

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

/* `hidden` tiene que ganar siempre: cualquier clase con `display` lo anula y
   el elemento se queda a la vista (pasó con el botón de quitar bulto). */
.cot [hidden] { display: none !important; }

/* Los iconos: un solo tamaño de serie y decorativos, así que no roban el clic
   a su botón o a su enlace. Sin esto un SVG sin medidas se come la caja. */
.cot svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; pointer-events: none; }

.cot h1, .cot h2, .cot h3, .cot .cot-titular {
  font-family: var(--f-titulos, var(--f-texto, system-ui, sans-serif));
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.cot h1 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); }
.cot h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }
.cot h3 { font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); }
.cot p  { margin: 0; line-height: 1.6; }

/* --------------------------------------------------------------- estructura */

.cot-pagina { padding: calc(var(--cot-u) * 8) 0 calc(var(--cot-u) * 16); }

.cot-cabecera { display: grid; gap: calc(var(--cot-u) * 3); margin-bottom: calc(var(--cot-u) * 8); }
.cot-antetitulo {
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-primario, #0f766e);
}
.cot-cabecera p { color: var(--c-texto-suave, #5a6675); max-width: 62ch; font-size: 1.05rem; }

.cot-columnas { display: grid; gap: calc(var(--cot-u) * 6); align-items: start; }
/* En móvil el repaso del envío va ARRIBA: es el contexto de lo que se mira. */
.cot-lateral { order: -1; }
@media (min-width: 1000px) {
  .cot-columnas { grid-template-columns: minmax(0, 1fr) 21rem; gap: calc(var(--cot-u) * 10); }
  .cot-lateral { order: 0; position: sticky; top: calc(var(--cot-u) * 6); }
}

.cot-bloque { display: grid; gap: calc(var(--cot-u) * 5); }
.cot-bloque + .cot-bloque { margin-top: calc(var(--cot-u) * 9); }
.cot-bloque > header { display: grid; gap: calc(var(--cot-u) * 2); }
.cot-bloque > header p { color: var(--c-texto-suave, #5a6675); font-size: 0.95rem; max-width: 60ch; }

/* ------------------------------------------------------------------- pasos */

.cot-pasos {
  list-style: none; margin: 0 0 calc(var(--cot-u) * 7); padding: 0;
  display: flex; gap: calc(var(--cot-u) * 1.5); flex-wrap: wrap;
}
.cot-pasos li { display: flex; }

/* El número va DENTRO del enlace: si no, en móvil el enlace se queda sin
   texto visible y el objetivo que se pulsa mide cero. */
.cot-pasos a, .cot-pasos .cot-paso {
  display: inline-flex; gap: calc(var(--cot-u) * 2); align-items: center;
  min-height: 44px; padding-inline: calc(var(--cot-u) * 2);
  border-radius: calc(var(--cot-radio) - 2px);
  font-size: 0.86rem; color: var(--c-texto-suave, #5a6675); text-decoration: none; white-space: nowrap;
}
.cot-pasos i {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
  border-radius: 999px; border: 1px solid var(--cot-borde);
  font-size: 0.78rem; font-weight: 650; font-style: normal; font-variant-numeric: tabular-nums;
}
.cot-pasos [data-estado="hecho"] a { color: var(--c-texto, #15202b); }
.cot-pasos [data-estado="hecho"] i {
  background: var(--c-primario, #0f766e); border-color: transparent; color: var(--c-primario-contraste, #fff);
}
.cot-pasos [data-estado="hecho"] i { font-size: 0; }
.cot-pasos [data-estado="hecho"] i::before { content: "✓"; font-size: 0.9rem; }
.cot-pasos [data-estado="actual"] .cot-paso { color: var(--c-texto, #15202b); font-weight: 650; }
.cot-pasos [data-estado="actual"] i {
  background: var(--c-primario, #0f766e); border-color: transparent; color: var(--c-primario-contraste, #fff);
}
.cot-pasos a:hover { background: color-mix(in srgb, var(--c-primario, #0f766e) 8%, transparent); color: var(--c-primario, #0f766e); }
.cot-pasos a:focus-visible { outline: 2px solid var(--c-primario, #0f766e); outline-offset: 2px; }

/* En móvil solo se lee el paso en el que estás; los demás quedan en su número,
   que sigue midiendo 44 px de alto y de ancho. */
@media (max-width: 620px) {
  .cot-pasos [data-estado] > :is(a, .cot-paso) > span:not(.cot-solo-lectores) { display: none; }
  .cot-pasos [data-estado="actual"] > .cot-paso > span { display: inline; }
  .cot-pasos a, .cot-pasos .cot-paso { min-width: 44px; justify-content: center; }
}

/* ------------------------------------------------------------- modalidades */

.cot-modos { display: grid; gap: calc(var(--cot-u) * 2); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.cot-modo { position: relative; display: grid; }
.cot-modo input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cot-modo > span {
  display: grid; gap: calc(var(--cot-u) * 1.5); align-content: start;
  min-height: 5.5rem; height: 100%; padding: calc(var(--cot-u) * 3.5);
  border: 1.5px solid var(--cot-borde); border-radius: var(--cot-radio);
  background: var(--c-superficie, #fff);
  transition: border-color var(--t-rapida, 150ms) ease, box-shadow var(--t-rapida, 150ms) ease, transform var(--t-rapida, 150ms) ease;
}
.cot-modo svg { width: 1.5rem; height: 1.5rem; color: var(--c-primario, #0f766e); }
.cot-aviso svg, .cot-velo svg { width: 1.25rem; height: 1.25rem; }
.cot-modo b { font-size: 0.95rem; font-weight: 650; line-height: 1.25; }
.cot-modo small { color: var(--c-texto-suave, #5a6675); font-size: 0.8rem; line-height: 1.35; }
.cot-modo input:hover + span { border-color: var(--c-primario, #0f766e); }
.cot-modo input:focus-visible + span { outline: 2px solid var(--c-primario, #0f766e); outline-offset: 2px; }
.cot-modo input:checked + span {
  border-color: var(--c-primario, #0f766e);
  box-shadow: inset 0 0 0 1px var(--c-primario, #0f766e), var(--sombra-1, 0 1px 2px rgb(0 0 0 / 7%));
}

/* ------------------------------------------------------------------ campos */

.cot-rejilla { display: grid; gap: calc(var(--cot-u) * 4); }
.cot-rejilla[data-cols="2"] { grid-template-columns: 1fr; }
.cot-rejilla[data-cols="3"] { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cot-rejilla[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-rejilla[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cot-campo { display: grid; gap: calc(var(--cot-u) * 1.5); align-content: start; min-width: 0; }
/* La etiqueta arriba, el campo en la misma línea de base en toda la fila y la
   pista debajo: así una fila de dos campos no se descuadra por una ayuda larga. */
.cot-campo > label { align-self: end; }
.cot-campo > label, .cot-leyenda {
  font-size: 0.82rem; font-weight: 600; color: var(--c-texto, #15202b);
}
.cot-campo .cot-pista { font-size: 0.78rem; color: var(--c-texto-suave, #5a6675); }

.cot-campo input:not([type="checkbox"]):not([type="radio"]),
.cot-campo select,
.cot-campo textarea {
  width: 100%; min-height: 48px; padding: 0 calc(var(--cot-u) * 3);
  font: inherit; font-size: 1rem; color: inherit;
  background: var(--c-superficie, #fff);
  border: 1px solid var(--cot-borde); border-radius: var(--cot-radio);
  transition: border-color var(--t-rapida, 150ms) ease, box-shadow var(--t-rapida, 150ms) ease;
  -webkit-appearance: none; appearance: none;
}
.cot-campo textarea { min-height: 6.5rem; padding: calc(var(--cot-u) * 3); line-height: 1.5; resize: vertical; }
.cot-campo select {
  padding-right: calc(var(--cot-u) * 9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6675' stroke-width='1.6'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right calc(var(--cot-u) * 3) center; background-size: 1rem;
}
.cot-campo input:focus-visible, .cot-campo select:focus-visible, .cot-campo textarea:focus-visible {
  outline: none; border-color: var(--c-primario, #0f766e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primario, #0f766e) 22%, transparent);
}
.cot-campo[data-error] input, .cot-campo[data-error] select, .cot-campo[data-error] textarea { border-color: var(--c-error, #c0392b); }
.cot-error { font-size: 0.8rem; color: var(--c-error, #c0392b); display: flex; gap: calc(var(--cot-u) * 1.5); align-items: flex-start; }
.cot-error svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.1rem; }

.cot-casilla { display: flex; gap: calc(var(--cot-u) * 1.5); align-items: flex-start; font-size: 0.95rem; line-height: 1.5; cursor: pointer;
  /* El área que se toca es la etiqueta entera, no el cuadrito: 44 px de alto
     mínimo (CALIDAD 1) sin agrandar la casilla, que quedaría enorme. */
  min-height: 44px; padding-block: calc(var(--cot-u) * 1.5); }
/* La casilla DIBUJA 22 px y OCUPA 44: por debajo de 40 el revisor la mide como
   área táctil pequeña (CALIDAD §1), y agrandar el cuadrito afea el formulario.
   El margen negativo devuelve el relleno para que la fila no se descoloque. */
.cot-casilla input { flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; margin: -10px 0 -10px -11px; padding: 0; border: 0;
  background: transparent; display: grid; place-content: center; cursor: pointer; }
.cot-casilla input::before { content: ""; width: 22px; height: 22px; border-radius: var(--radio-s, 3px);
  border: 1.5px solid var(--c-borde-fuerte, #9aa6b5); background: var(--c-fondo, #fff);
  transition: background-color .15s ease, border-color .15s ease; }
.cot-casilla input:hover::before { border-color: var(--c-primario, #0f766e); }
.cot-casilla input:focus-visible { outline: 3px solid var(--c-primario, #0f766e); outline-offset: -8px; border-radius: 8px; }
.cot-casilla input:checked::before { background: var(--c-primario, #0f766e); border-color: var(--c-primario, #0f766e);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E");
  background-size: 15px 15px; background-position: center; background-repeat: no-repeat; }
.cot-casilla span { min-width: 0; }
.cot-casilla small { display: block; color: var(--c-texto-suave, #5a6675); font-size: 0.82rem; margin-top: calc(var(--cot-u)); }
.cot-casillas { display: grid; gap: calc(var(--cot-u) * 3.5); }

/* ------------------------------------------------------- autocompletado CP */

.cot-sugiere { position: relative; }
.cot-lista {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px);
  max-height: 16rem; overflow-y: auto; margin: 0; padding: calc(var(--cot-u));
  list-style: none; background: var(--c-superficie, #fff);
  border: 1px solid var(--cot-borde); border-radius: var(--cot-radio);
  box-shadow: var(--sombra-2, 0 8px 24px rgb(0 0 0 / 12%));
}
.cot-lista:empty, .cot-lista[hidden] { display: none; }
.cot-lista li > button {
  display: flex; gap: calc(var(--cot-u) * 2); align-items: baseline; justify-content: space-between;
  width: 100%; min-height: 44px; padding: calc(var(--cot-u) * 2) calc(var(--cot-u) * 2.5);
  font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: calc(var(--cot-radio) - 2px); color: inherit;
}
.cot-lista li > button:hover, .cot-lista li > button[aria-selected="true"] {
  background: color-mix(in srgb, var(--c-primario, #0f766e) 10%, transparent);
}
.cot-lista code { font-family: var(--f-mono, ui-monospace, monospace); font-size: 0.85rem; color: var(--c-texto-suave, #5a6675); }

/* ------------------------------------------------------------------ bultos */

.cot-bultos { display: grid; gap: calc(var(--cot-u) * 4); }
.cot-bulto {
  display: grid; gap: calc(var(--cot-u) * 3.5);
  padding: calc(var(--cot-u) * 4);
  border: 1px solid var(--cot-borde); border-radius: var(--cot-radio);
  background: var(--c-superficie, #fff);
}
.cot-bulto > header { display: flex; gap: calc(var(--cot-u) * 2); align-items: center; justify-content: space-between; }
.cot-bulto > header h3 { font-size: 0.86rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-texto-suave, #5a6675); }
.cot-medidas { display: grid; gap: calc(var(--cot-u) * 3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .cot-medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cot-quitar {
  display: inline-flex; gap: calc(var(--cot-u) * 1.5); align-items: center;
  min-height: 44px; padding: 0 calc(var(--cot-u) * 2);
  font: inherit; font-size: 0.85rem; color: var(--c-texto-suave, #5a6675);
  background: none; border: 0; border-radius: var(--cot-radio); cursor: pointer;
}
.cot-quitar:hover { color: var(--c-error, #c0392b); }

/* ----------------------------------------------------------------- ofertas */

.cot-filtros { display: flex; gap: calc(var(--cot-u) * 2) calc(var(--cot-u) * 3); align-items: center; flex-wrap: wrap; }
.cot-filtros span { font-size: 0.82rem; color: var(--c-texto-suave, #5a6675); }
.cot-filtros select { width: auto; min-width: 12rem; padding-right: calc(var(--cot-u) * 9); }

.cot-ofertas { display: grid; gap: calc(var(--cot-u) * 4); }

.cot-oferta {
  position: relative; display: grid; gap: calc(var(--cot-u) * 4);
  padding: calc(var(--cot-u) * 5);
  background: var(--c-superficie, #fff);
  border: 1.5px solid var(--cot-borde); border-radius: var(--cot-radio);
  box-shadow: var(--sombra-1, 0 1px 2px rgb(0 0 0 / 6%));
  transition: border-color var(--t-rapida, 150ms) ease, box-shadow var(--t-media, 250ms) ease;
}
.cot-oferta:hover { border-color: var(--c-primario, #0f766e); box-shadow: var(--sombra-2, 0 10px 28px rgb(0 0 0 / 10%)); }
.cot-oferta[data-destacada] { border-color: var(--c-primario, #0f766e); }
@media (min-width: 760px) {
  .cot-oferta { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: calc(var(--cot-u) * 8); }
  .cot-oferta > .cot-ficha { grid-column: 1 / -1; }
}

.cot-oferta-marca { display: flex; gap: calc(var(--cot-u) * 3); align-items: center; margin-bottom: calc(var(--cot-u) * 3); }
.cot-oferta-marca img { width: auto; height: 1.6rem; max-width: 7.5rem; object-fit: contain; object-position: left center; }
.cot-oferta-marca b { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); }
.cot-oferta h3 { margin-bottom: calc(var(--cot-u) * 2); }

.cot-etiquetas { position: absolute; top: calc(var(--cot-u) * -2.5); left: calc(var(--cot-u) * 4); display: flex; gap: calc(var(--cot-u) * 2); flex-wrap: wrap; }
.cot-etiqueta {
  padding: calc(var(--cot-u) * 0.75) calc(var(--cot-u) * 2.5);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 999px; background: var(--c-primario, #0f766e); color: var(--c-primario-contraste, #fff);
}
.cot-etiqueta[data-tipo="rapida"] { background: var(--c-acento, #b45309); color: var(--c-primario-contraste, #fff); }

.cot-datos { display: grid; gap: calc(var(--cot-u) * 2) calc(var(--cot-u) * 6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.cot-datos > div { display: grid; gap: calc(var(--cot-u) * 0.5); }
.cot-datos dt { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); }
.cot-datos dd { margin: 0; font-size: 0.95rem; }

.cot-precio { display: grid; gap: calc(var(--cot-u) * 2); justify-items: start; }
@media (min-width: 760px) { .cot-precio { justify-items: end; text-align: right; } }
.cot-precio-cifra {
  font-family: var(--f-titulos, inherit); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cot-precio small { display: block; font-size: 0.8rem; color: var(--c-texto-suave, #5a6675); margin-top: calc(var(--cot-u)); }
.cot-precio .rd-boton { white-space: nowrap; }

.cot-ficha { margin-top: calc(var(--cot-u) * 3); border-top: 1px solid var(--cot-borde); padding-top: calc(var(--cot-u) * 3); }
.cot-ficha > summary {
  display: inline-flex; gap: calc(var(--cot-u) * 1.5); align-items: center;
  min-height: 44px; font-size: 0.85rem; font-weight: 600; color: var(--c-primario, #0f766e); cursor: pointer;
}
.cot-ficha > summary::marker, .cot-ficha > summary::-webkit-details-marker { content: ""; display: none; }
.cot-ficha > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-rapida, 150ms) ease; }
.cot-ficha[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.cot-ficha-cuerpo { display: grid; gap: calc(var(--cot-u) * 4); padding-top: calc(var(--cot-u) * 3); }
.cot-ficha-cuerpo h4 { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); }
.cot-ficha-cuerpo ul { margin: calc(var(--cot-u) * 1.5) 0 0; padding-left: calc(var(--cot-u) * 4.5); display: grid; gap: calc(var(--cot-u) * 1.5); font-size: 0.9rem; line-height: 1.5; color: var(--c-texto-suave, #5a6675); }

.cot-vehiculo { display: flex; gap: calc(var(--cot-u) * 4); align-items: center; flex-wrap: wrap; }
.cot-vehiculo img { width: 8rem; height: auto; max-height: 5rem; object-fit: contain; }
.cot-vehiculo ul { margin: 0; padding-left: calc(var(--cot-u) * 4.5); font-size: 0.88rem; color: var(--c-texto-suave, #5a6675); }

/* ------------------------------------------------------- resumen (lateral) */

.cot-resumen { display: grid; gap: calc(var(--cot-u) * 4); padding: calc(var(--cot-u) * 5); background: var(--c-superficie, #fff); border: 1px solid var(--cot-borde); border-radius: var(--cot-radio); }
.cot-resumen h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); }
.cot-ruta { display: grid; gap: calc(var(--cot-u) * 3); margin: 0; }
.cot-ruta > div { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: calc(var(--cot-u) * 3); align-items: start; }
.cot-ruta dt { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); grid-column: 2; }
.cot-ruta dd { margin: 0; font-size: 0.98rem; font-weight: 600; grid-column: 2; overflow-wrap: anywhere; }
.cot-punto { grid-row: span 2; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 999px; border: 2.5px solid var(--c-primario, #0f766e); }
.cot-punto[data-fin] { background: var(--c-primario, #0f766e); }
.cot-resumen-lineas { display: grid; gap: calc(var(--cot-u) * 2); margin: 0; padding-top: calc(var(--cot-u) * 4); border-top: 1px solid var(--cot-borde); font-size: 0.92rem; }
.cot-resumen-lineas > div { display: flex; gap: calc(var(--cot-u) * 3); justify-content: space-between; }
.cot-resumen-lineas dt { color: var(--c-texto-suave, #5a6675); }
.cot-resumen-lineas dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cot-total { padding-top: calc(var(--cot-u) * 3); border-top: 1px solid var(--cot-borde); display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--cot-u) * 3); }
.cot-total span { font-size: 0.86rem; color: var(--c-texto-suave, #5a6675); }
.cot-total b { font-family: var(--f-titulos, inherit); font-size: 1.45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ avisos */

.cot-aviso {
  display: flex; gap: calc(var(--cot-u) * 3); align-items: flex-start;
  padding: calc(var(--cot-u) * 4);
  border: 1px solid var(--cot-borde); border-left: 3px solid var(--c-texto-suave, #5a6675);
  border-radius: var(--cot-radio); background: var(--c-superficie, #fff);
  font-size: 0.94rem; line-height: 1.55;
}
.cot-aviso svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.cot-aviso > div { display: grid; gap: calc(var(--cot-u) * 1.5); min-width: 0; }
.cot-aviso strong { font-weight: 650; }
.cot-aviso[data-tono="error"] { border-left-color: var(--c-error, #c0392b); color: var(--c-texto, #15202b); }
.cot-aviso[data-tono="error"] svg { color: var(--c-error, #c0392b); }
.cot-aviso[data-tono="aviso"] { border-left-color: var(--c-aviso, #b45309); }
.cot-aviso[data-tono="aviso"] svg { color: var(--c-aviso, #b45309); }
.cot-aviso[data-tono="exito"] { border-left-color: var(--c-exito, #15803d); }
.cot-aviso[data-tono="exito"] svg { color: var(--c-exito, #15803d); }
.cot-aviso[data-tono="prueba"] { border-left-color: var(--c-acento, #b45309); background: color-mix(in srgb, var(--c-acento, #b45309) 7%, var(--c-superficie, #fff)); }
.cot-aviso ul { margin: 0; padding-left: calc(var(--cot-u) * 4.5); display: grid; gap: calc(var(--cot-u)); }

/* ------------------------------------------------------------------ acciones */

.cot-acciones {
  display: flex; gap: calc(var(--cot-u) * 3); flex-wrap: wrap; align-items: center;
  margin-top: calc(var(--cot-u) * 8); padding-top: calc(var(--cot-u) * 6);
  border-top: 1px solid var(--cot-borde);
}
.cot-acciones > .cot-empuja { margin-left: auto; }
@media (max-width: 560px) {
  .cot-acciones { flex-direction: column-reverse; align-items: stretch; }
  .cot-acciones > .cot-empuja { margin-left: 0; }
  .cot-acciones .rd-boton { width: 100%; justify-content: center; }
}

.cot-atras { display: inline-flex; gap: calc(var(--cot-u) * 1.5); align-items: center; min-height: 44px; font-size: 0.92rem; color: var(--c-texto-suave, #5a6675); text-decoration: none; }
.cot-atras:hover { color: var(--c-primario, #0f766e); }

/* -------------------------------------------------------------- formas de pago */

.cot-pagos { display: grid; gap: calc(var(--cot-u) * 3); }
.cot-pago { position: relative; }
.cot-pago input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.cot-pago > span {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: calc(var(--cot-u) * 3);
  align-items: start; padding: calc(var(--cot-u) * 4);
  border: 1.5px solid var(--cot-borde); border-radius: var(--cot-radio);
  background: var(--c-superficie, #fff);
  transition: border-color var(--t-rapida, 150ms) ease;
}
.cot-pago > span::before {
  content: ""; grid-column: 1; grid-row: 1;
  width: 1.25rem; height: 1.25rem; margin-top: 0.1rem;
  border: 2px solid var(--cot-borde); border-radius: 999px;
}
/* Sin esto el <small> cae en la columna del círculo (1,4 rem) y el texto sale
   a una palabra por línea. */
.cot-pago b, .cot-pago small { grid-column: 2; }
.cot-pago input:checked + span { border-color: var(--c-primario, #0f766e); box-shadow: inset 0 0 0 1px var(--c-primario, #0f766e); }
.cot-pago input:checked + span::before { border-color: var(--c-primario, #0f766e); border-width: 6px; }
.cot-pago input:focus-visible + span { outline: 2px solid var(--c-primario, #0f766e); outline-offset: 2px; }
.cot-pago b { display: block; font-size: 0.98rem; }
.cot-pago small { display: block; margin-top: calc(var(--cot-u)); font-size: 0.85rem; line-height: 1.5; color: var(--c-texto-suave, #5a6675); }

/* ------------------------------------------------------------ confirmación */

.cot-final { display: grid; gap: calc(var(--cot-u) * 6); max-width: 46rem; }
.cot-ref {
  display: inline-flex; gap: calc(var(--cot-u) * 2); align-items: baseline;
  padding: calc(var(--cot-u) * 3) calc(var(--cot-u) * 5);
  background: var(--c-fondo, #f6f8fa); border: 1px dashed var(--cot-borde); border-radius: var(--cot-radio);
}
.cot-ref span { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-texto-suave, #5a6675); }
.cot-ref code { font-family: var(--f-mono, ui-monospace, monospace); font-size: 1.1rem; font-weight: 650; overflow-wrap: anywhere; }
.cot-siguientes strong, .cot-final strong { white-space: nowrap; }
.cot-siguientes { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--cot-u) * 4); counter-reset: s; }
/* Con `display:grid` en el <li>, un <strong> o un <a> dentro del texto se
   convierte en otro elemento de la rejilla y el párrafo se descoloca. Con
   posición absoluta el contenido sigue siendo un solo bloque de texto. */
.cot-siguientes li {
  counter-increment: s; position: relative;
  padding-left: calc(var(--cot-u) * 8); min-height: 1.9rem;
  font-size: 0.96rem; line-height: 1.55;
}
.cot-siguientes li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 999px; background: var(--c-primario, #0f766e); color: var(--c-primario-contraste, #fff);
  font-size: 0.82rem; font-weight: 700;
}

/* ---------------------------------------------------------- widget (héroe) */

.cot-widget {
  display: grid; gap: calc(var(--cot-u) * 4);
  padding: calc(var(--cot-u) * 5);
  background: var(--c-superficie, #fff);
  border: 1px solid var(--cot-borde); border-radius: var(--cot-radio);
  box-shadow: var(--sombra-2, 0 10px 30px rgb(0 0 0 / 10%));
}
.cot-widget .cot-modos { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.cot-widget .cot-modo > span { min-height: 0; padding: calc(var(--cot-u) * 2.5); gap: calc(var(--cot-u)); }
.cot-widget .cot-modo small { display: none; }
.cot-widget .cot-modo svg { width: 1.2rem; height: 1.2rem; }
.cot-widget .rd-boton { width: 100%; justify-content: center; }

/* ------------------------------------------------------------------ varios */

.cot-cargando { display: inline-flex; gap: calc(var(--cot-u) * 2); align-items: center; }
.cot-cargando::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 999px;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: cot-gira 700ms linear infinite;
}
@keyframes cot-gira { to { transform: rotate(360deg); } }
.cot-velo {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: calc(var(--cot-u) * 6); text-align: center;
  background: color-mix(in srgb, var(--c-oscuro, #10181f) 70%, transparent);
  color: #fff; font-size: 1.05rem;
}
.cot-velo[hidden] { display: none; }
.cot-nada { padding: calc(var(--cot-u) * 10) calc(var(--cot-u) * 5); text-align: center; border: 1px dashed var(--cot-borde); border-radius: var(--cot-radio); color: var(--c-texto-suave, #5a6675); }
.cot-solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cot-descartados { font-size: 0.86rem; color: var(--c-texto-suave, #5a6675); }
.cot-descartados summary {
  min-height: 44px; display: inline-flex; gap: calc(var(--cot-u) * 1.5); align-items: center;
  cursor: pointer; color: var(--c-primario, #0f766e); font-weight: 600;
}
.cot-descartados summary::marker, .cot-descartados summary::-webkit-details-marker { content: ""; display: none; }
.cot-descartados summary::after {
  content: ""; width: .45rem; height: .45rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-rapida, 150ms) ease;
}
.cot-descartados[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cot-descartados ul { margin: calc(var(--cot-u) * 2) 0 0; padding-left: calc(var(--cot-u) * 4.5); display: grid; gap: calc(var(--cot-u) * 1.5); }

@media (prefers-reduced-motion: reduce) {
  .cot *, .cot *::before, .cot *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------- filtros de las ofertas */
.cot-filtros__etiqueta { font-size: 0.85rem; font-weight: 600; }
.cot-filtros__cuenta { font-size: 0.85rem; color: var(--c-texto-suave, #5a6675); }
.cot-pastillas { display: inline-flex; flex-wrap: wrap; gap: calc(var(--cot-u) * 1.5); }
.cot-pastilla { min-height: 44px; padding: 0 calc(var(--cot-u) * 4);
  border: 1px solid var(--c-borde, #d7dee8); border-radius: var(--radio, 8px);
  background: var(--c-fondo, #fff); color: inherit; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.cot-pastilla:hover { border-color: var(--c-primario, #0f766e); }
.cot-pastilla[aria-pressed="true"] { border-color: var(--c-primario, #0f766e);
  background: var(--c-primario, #0f766e); color: var(--c-primario-contraste, #fff); }