/* El cartel de consentimiento de la portada — spec 0137.
 *
 * NO ES UN MODAL (R4): no hay capa que oscurezca, no atrapa el foco y no
 * bloquea el scroll. Se puede leer y usar la portada entera con el cartel
 * puesto. Ancla abajo porque ahi tapa lo menos posible de una pagina que se
 * lee de arriba hacia abajo.
 *
 * `position: fixed` no es solo estetico: el runtime del disenador inyecta
 * `html,body{height:100%}` y `#dc-root{height:100%}`, y un cartel en el flujo
 * normal quedaria sujeto a esa altura. Fijo es inmune (medido, M6 del plan).
 *
 * Todo color sale de var(--tc-*), que la portada carga desde tokens.css.
 */

.tc-consentimiento {
  position: fixed;
  inset-inline: var(--tc-space-16);
  bottom: var(--tc-space-16);
  z-index: 40;
  margin-inline: auto;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: var(--tc-space-16);
  flex-wrap: wrap;
  padding: var(--tc-space-16);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-12);
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-overlay);
  font-family: var(--tc-font-family);
}

.tc-consentimiento__texto {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tc-text);
}

/* La portada pinta TODOS sus enlaces con su propio azul y sin subrayado. Este
 * vive dentro de un parrafo de texto corrido, donde sin subrayado no se
 * distingue de una palabra en negrita. */
.tc-consentimiento__texto a {
  color: var(--tc-primary-text);
  text-decoration: underline;
}

.tc-consentimiento__acciones {
  display: flex;
  gap: var(--tc-space-8);
  flex: 0 0 auto;
}

/* 44px de alto minimo: el objetivo tactil de la Constitucion. No es `height`
 * sino `min-height`, para que un texto que crezca —o una traduccion mas
 * larga— no quede cortado. */
.tc-consentimiento__boton {
  min-height: 44px;
  padding-inline: var(--tc-space-16);
  border-radius: var(--tc-radius-8);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms cubic-bezier(.2, 0, 0, 1);
}

/* --tc-primary-700 es EXACTAMENTE el azul con el que la portada pinta sus
 * botones de alta, y --tc-primary-800 exactamente su hover. La paleta de la
 * portada ya estaba adentro del sistema de diseno; no hacia falta un token
 * aparte.
 *
 * NO se usa --tc-accent, que fue el primer intento y estuvo mal. En la portada
 * ese token no es fijo: un listener de scroll hace
 * setProperty('--tc-accent', <data-accent de la seccion visible>), y hay NUEVE
 * valores distintos — azul, teal, violeta, ambar, naranja y un rojo. El cartel
 * es fijo y persistente, asi que su boton principal cambiaba de color mientras
 * el visitante scrolleaba, y en la seccion de seguimiento quedaba ROJO: el
 * color que en todo el resto del producto significa destructivo, puesto en la
 * unica accion que queremos que la gente elija.
 *
 * Ninguno de los dos tokens se redefine en los bloques de tema oscuro, asi que
 * esto vale igual en la portada (que fija data-theme="light") y en privacidad. */
.tc-consentimiento__boton.is-primario {
  background: var(--tc-primary-700);
  color: var(--tc-on-primary);
}

.tc-consentimiento__boton.is-primario:hover {
  background: var(--tc-primary-800);
}

/* Secundario en peso visual, NO en alcance (R3): mismo alto, mismo objetivo
 * tactil, un clic, sin scroll para llegar. Rechazar no puede costar mas
 * trabajo que aceptar. */
.tc-consentimiento__boton.is-secundario {
  background: var(--tc-surface);
  border-color: var(--tc-border-strong);
  color: var(--tc-text);
}

.tc-consentimiento__boton.is-secundario:hover {
  background: var(--tc-surface-soft);
}

/* En telefono los botones pasan a ocupar el ancho y se reparten en partes
 * iguales: a 360px, dos botones al lado del texto dejan objetivos de 80px que
 * se aprietan mal con el pulgar. */
@media (max-width: 480px) {
  .tc-consentimiento {
    inset-inline: var(--tc-space-8);
    bottom: var(--tc-space-8);
  }

  .tc-consentimiento__acciones {
    flex: 1 1 100%;
  }

  .tc-consentimiento__boton {
    flex: 1 1 0;
  }
}