/*
 * Cookiebot compacto en móvil — SOLO España (se enlaza desde base.html bajo
 * request.country_code == 'ES', que es el único país con banner).
 *
 * Por qué (medido en prod el 2026-08-28, 390×844): el banner "bottom" con los
 * cuatro interruptores mide 828 px = el 98% de la pantalla, se pone encima de
 * los dos "Contactar ahora" de la ficha (591 px y 789 px) e intercepta el
 * clic hasta que el usuario decide. En LatAm no hay banner. Es la primera
 * fricción de toda conversión española y nunca se había medido (B-064).
 *
 * Qué hace, solo en móvil:
 *  - Lo deja ABAJO (v1 iba arriba; el titular lo prefirió abajo) pero
 *    limitado al 30% de la pantalla: 212 px medidos, el CTA del hero (541-580
 *    px) queda libre entero.
 *  - Esconde el logotipo y el panel de interruptores (siguen detrás de
 *    "Mostrar detalles") y deja dos acciones al mismo nivel y tamaño:
 *    "Permitir todas" y "Denegar", en una fila. "Permitir la selección" se
 *    oculta porque sin interruptores a la vista equivale a "Denegar".
 *  - Se oculta mientras el modal de contacto está abierto (Bootstrap pone
 *    `modal-open` en el body): medido, el banner abajo tapaba el botón
 *    "Ver teléfono y llamar" del propio modal.
 *  - Lo que sigue tapado con el banner abierto es el "Contactar ahora"
 *    sticky del pie; "Denegar" está a un toque. Escritorio: sin cambios.
 *
 * Es un TEST (P-023): conv/click de ES con LatAm como control, 14 días.
 * Si no mueve nada, se quita este fichero y el <link>.
 */
@media (max-width: 767px) {
  html body #CybotCookiebotDialog,
  #CybotCookiebotDialog.CybotEdge,
  #CybotCookiebotDialog[data-template] {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 30vh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding-bottom: 6px !important;
    transform: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18) !important;
  }
  /* Mientras el modal de contacto está abierto, el banner no compite con él. */
  body.modal-open #CybotCookiebotDialog {
    display: none !important;
  }
  #CybotCookiebotDialogHeader,
  #CybotCookiebotDialogBodyLevelButtonsSelectPane,
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    display: none !important;
  }
  #CybotCookiebotDialogBodyContent {
    padding: 12px 16px 4px !important;
  }
  #CybotCookiebotDialogBodyContentTitle {
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }
  #CybotCookiebotDialogBodyContentText {
    max-height: 3.3em !important;
    overflow: auto !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #444 !important;
  }
  #CybotCookiebotDialogBodyEdgeMoreDetails,
  #CybotCookiebotDialogBodyEdgeMoreDetails a {
    margin: 2px 0 !important;
    font-size: 13px !important;
  }
  #CybotCookiebotDialogFooter {
    padding-top: 4px !important;
  }
  /* Los dos botones en una fila, mismo tamaño y misma altura. */
  #CybotCookiebotDialogBodyButtonsWrapper {
    flex-direction: row !important;
    gap: 8px !important;
  }
  #CybotCookiebotDialogBodyButtonsWrapper > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 44px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background: #1f3a5f !important;
    border: 2px solid #1f3a5f !important;
    color: #fff !important;
  }
  #CybotCookiebotDialogBodyButtonDecline {
    background: #fff !important;
    border: 2px solid #1f3a5f !important;
    color: #1f3a5f !important;
  }
}