/* ===================================================================
   PALETA DE MARCA - RentacarIQ
   ===================================================================
   Los cuatro colores del brand board. Todo el color de la web sale de
   aqui: si la marca cambia, se toca este bloque y nada mas.

   Regla de uso, que no es un capricho sino una medida de contraste:
   los rojos de marca NO se leen como texto sobre los fondos oscuros
   del sitio (#e92123 da 3,90:1 sobre #1a1a1a, por debajo del 4,5:1
   que exige WCAG AA). Por eso el rojo vive en los RELLENOS (iconos,
   botones, bordes, chips) y el texto va en blanco.

   La excepcion es .badge-filtros, que tiene fondo blanco: ahi el rojo
   oscuro da 5,87:1 y se usa literal.
   =================================================================== */
/* Campo trampa del filtro anti spam (lib/antispam.php).
   Se saca de la pantalla en vez de usar display:none, que algunos bots
   detectan y saltan. aria-hidden y tabindex="-1" lo dejan fuera del alcance
   de un lector de pantalla y del tabulador, asi que una persona no puede
   rellenarlo ni por accidente. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

:root {
  /* Los 4 colores del brand board */
  --marca-rojo: #e92123;        /* rojo vivo: iconos, bordes, rellenos */
  --marca-rojo-fuerte: #cc0014; /* rojo oscuro: fondo de boton (5,87:1 con texto blanco) */
  --marca-azul: #004aad;        /* azul: foco de teclado (8,13:1 con blanco) */
  --marca-blanco: #ffffff;

  /* Derivados, para no repetir rgba() a mano por el CSS */
  --marca-rojo-tenue: rgba(233, 33, 35, 0.15);  /* fondo de chip */
  --marca-rojo-sombra: rgba(233, 33, 35, 0.35); /* sombras y brillos */

  /* Grises del tema oscuro, ya existentes, nombrados para poder leerlos */
  --fondo-oscuro: #1a1a1a;
  --fondo-tarjeta: #2d2d2d;
  --texto-claro: #ffffff;
  --texto-apagado: #aaaaaa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  font-family: 'DM Sans', sans-serif;
}

/* BOTÓN PRINCIPAL */
.btn-principal,
a.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--marca-rojo) 0%, var(--marca-rojo-fuerte) 100%);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-principal::before,
a.btn-principal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-principal:hover,
a.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(204, 0, 20, 0.35);
}

.btn-principal:hover::before,
a.btn-principal:hover::before {
  opacity: 1;
}

/* ENTRANCE ANIMATIONS */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ZONAS PULSABLES EN MOVIL
   En pantalla tactil, cualquier boton o enlace de accion debe llegar a 44px de
   alto (minimo recomendado por Apple; Android recomienda 48). Se aplica solo en
   movil para no alterar el diseno de escritorio.

   La segunda condicion cubre el TELEFONO EN APAISADO (R-05): un iPhone 14 en
   horizontal mide 844x390 y no entra por los 768px de ancho, asi que se quedaba
   sin las zonas pulsables de 44px aun siendo una pantalla tactil. El tope de
   1024px de ancho deja fuera las ventanas de escritorio anchas y bajas. */
@media (max-width: 768px),
       (max-width: 1024px) and (max-height: 500px) {
  .btn-principal,
  a.btn-principal {
    min-height: 44px;
  }
}
/* ===================================================================
   CASILLAS DE CONSENTIMIENTO
   ===================================================================
   Compartidas por los DOS formularios de presupuesto: el de
   presupuesto.php y el que genera js/vehiculo.js en la ficha de coche.
   Por eso viven aqui y no en presupuesto.css, que la ficha no carga.

   Son dos casillas separadas y NO es un detalle de maquetacion: la de
   privacidad es obligatoria y la de publicidad es libre (art. 7.2 y 7.4
   del RGPD). Fundirlas en una sola invalidaria el consentimiento
   publicitario.
   =================================================================== */

.campo-check {
    display: flex;
    /* flex-start y no center: cada casilla tiene ahora dos lineas (el texto
       y su aclaracion), asi que centrar dejaria la casilla flotando en
       mitad del parrafo. */
    align-items: flex-start;
    gap: 10px;
    /* La fila entera es zona pulsable: la etiqueta lleva su for. */
    min-height: 44px;
    margin-bottom: 12px;
}

.campo-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    /* Alinea la casilla con la primera linea del texto. */
    margin-top: 11px;
    accent-color: var(--marca-rojo);
    cursor: pointer;
}

.campo-check label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    /* 14px y no menos: la guarda de R-07 es que ningun texto baje de 12px,
       y este es un texto que la ley exige que sea legible. */
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto-apagado);
    cursor: pointer;
}

.campo-check label a {
    color: var(--marca-blanco);
    /* En blanco sobre oscuro el color ya no distingue un enlace del texto
       que lo rodea: el subrayado es lo unico que lo identifica, asi que es
       permanente y no solo al pasar el raton. */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.campo-check label a:hover,
.campo-check label a:focus {
    text-decoration-thickness: 2px;
}

/* La aclaracion de cada casilla: para que se pueda dar el consentimiento
   con conocimiento de causa sin salir del formulario. */
.campo-check-detalle {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--texto-apagado);
    opacity: 0.85;
    margin-top: 2px;
}

/* Filete rojo en la obligatoria: la distingue de la opcional de un
   vistazo, sin recurrir a un asterisco que nadie sabe interpretar. */
.campo-check-obligatorio {
    border-left: 3px solid var(--marca-rojo);
    padding-left: 12px;
    margin-left: -15px;
}

@media (max-width: 480px) {
    .campo-check-obligatorio {
        margin-left: 0;
        padding-left: 10px;
    }
}