/* ==========================================================
   VUELVA USTED MAÑANA — Aviso y panel de cookies
   Compartido por el juego y las páginas legales (necesita tokens.css).
   Tres botones del mismo peso (criterio AEPD). Todo en @layer components.
   ========================================================== */
@layer components {

  /* ---------------- Aviso: una papeleta abajo ---------------- */
  .cc-banner {
    position: fixed;
    z-index: 70;
    left: max(var(--gutter), env(safe-area-inset-left, 0px));
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
    max-width: 720px;
    padding: 16px 16px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--e3);
    font: 400 var(--fs-sm)/1.45 var(--ui);
    animation: k-fade-up var(--d-base) var(--ease-out) both;
  }
  .cc-title {
    margin: 0 0 4px;
    font: 700 var(--fs-md)/1.3 var(--ui);
    color: var(--ink);
    text-wrap: balance;
  }
  .cc-banner p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
  .cc-banner a, .cc-dialog a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  /* Tres secundarios idénticos: ninguno destaca sobre los demás */
  .cc-btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: 600 var(--fs-sm)/1.2 var(--ui);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--d-fast) var(--ease-std), scale var(--d-press) var(--ease-out);
  }
  @media (hover: hover) {
    .cc-btn:hover { background: var(--sunken); }
  }
  .cc-btn:active { scale: .98; }

  /* Móvil: los tres botones en una sola fila de 44 px */
  @media (max-width: 520px) {
    .cc-banner { padding: 14px 12px 12px; }
    .cc-actions { flex-wrap: nowrap; gap: 6px; }
    .cc-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  }

  /* Móvil en vertical: hoja a sangre pegada al borde inferior. Una tarjeta flotante dejaba
     ver el texto de la página por sus márgenes al desplazarse por detrás. */
  @media (max-width: 599px) and (orientation: portrait) {
    .cc-banner {
      left: 0;
      right: 0;
      bottom: 0;
      max-width: none;
      border-width: 1px 0 0;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      padding-left: max(12px, env(safe-area-inset-left, 0px));
      padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
  }
  /* Móvil bajo (≤ 620 px): título y texto en un mismo párrafo, para dejar más página legible */
  @media (max-width: 599px) and (max-height: 620px) and (orientation: portrait) {
    .cc-banner { padding-top: 12px; }
    .cc-title { display: inline; margin: 0 .35em 0 0; font-size: .875rem; line-height: 1.4; }
    .cc-banner p { display: inline; font-size: .8125rem; line-height: 1.4; }
    .cc-actions { margin-top: 10px; }
  }

  /* Móvil en horizontal: una sola franja de unos 80 px */
  @media (orientation: landscape) and (max-height: 520px) {
    .cc-banner {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 980px;
      padding: 10px 12px 10px 16px;
      bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }
    .cc-text { flex: 1 1 auto; min-width: 0; font-size: .8125rem; line-height: 1.4; }
    /* Título y texto en el mismo párrafo visual: una franja de unos 80 px */
    .cc-title { display: inline; margin: 0 .35em 0 0; font-size: .8125rem; line-height: 1.4; }
    .cc-banner p { display: inline; font-size: .8125rem; line-height: 1.4; }
    .cc-banner > .cc-actions { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0; }
    .cc-banner .cc-btn { padding: 0 12px; white-space: nowrap; }
  }
  /* Escritorio: texto a la izquierda, los tres botones (iguales) a la derecha */
  @media (min-width: 900px) and (min-height: 521px) {
    .cc-banner {
      display: flex;
      align-items: center;
      gap: 24px;
      max-width: 1040px;
      padding: 16px 16px 16px 20px;
      bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
    .cc-text { flex: 1 1 auto; min-width: 0; }
    .cc-banner > .cc-actions { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0; }
    .cc-banner .cc-btn { padding: 0 18px; white-space: nowrap; }
  }

  /* ---------------- Panel de configuración (<dialog>) ---------------- */
  .cc-dialog {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: min(560px, calc(100% - 2 * var(--gutter)));
    max-width: none;
    height: fit-content;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--e3);
    font: 400 var(--fs-sm)/1.5 var(--ui);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .cc-dialog[open] { display: flex; flex-direction: column; animation: k-pop var(--d-base) var(--ease-out); }
  .cc-dialog::backdrop { background: var(--scrim); }
  @supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .cc-dialog::backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  }
  /* Sin showModal(): un velo hecho con la sombra del propio panel */
  .cc-dialog.cc-fallback { box-shadow: 0 0 0 100vmax var(--scrim), var(--e3); }

  .cc-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .cc-grab { display: none; }
  .cc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px 8px 20px;
    border-bottom: 1px solid var(--line);
  }
  .cc-head h2 {
    margin: 0;
    font: 700 var(--fs-lg)/1.25 var(--ui);
    text-wrap: balance;
  }
  .cc-x {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
  }
  @media (hover: hover) {
    .cc-x:hover { background: var(--sunken); color: var(--ink); }
  }
  .cc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 8px;
  }
  .cc-body p { margin: 0; }
  .cc-lead { padding: 10px 0 6px; color: var(--ink-2); }
  .cc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .cc-row:last-of-type { border-bottom: 0; }
  .cc-row-t { min-width: 0; }
  .cc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-md); }
  .cc-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: var(--green-bg);
    color: var(--green);
    font: 600 var(--fs-cap)/1 var(--ui);
  }
  .cc-body .cc-desc { margin-top: 2px; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }
  .cc-more { padding: 8px 0 4px; color: var(--ink-2); font-size: .8125rem; }
  .cc-dialog .cc-actions {
    margin: 0;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  /* Interruptor: pista visible + casilla real (accesible) encima */
  .cc-switch {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    cursor: pointer;
  }
  .cc-switch input {
    position: absolute;
    inset: -6px;
    z-index: 1;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .cc-track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    background: var(--switch-off);
    transition: background-color var(--d-fast) var(--ease-std);
  }
  .cc-track::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26, 24, 20, .35);
    transition: translate var(--d-fast) var(--ease-out);
  }
  .cc-switch input:checked + .cc-track { background: var(--green); }
  .cc-switch input:checked + .cc-track::after { translate: 20px 0; }
  .cc-switch input[aria-disabled="true"] { cursor: not-allowed; }
  .cc-switch input[aria-disabled="true"] + .cc-track {
    background-image: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255, 255, 255, .22) 4px 6px);
  }
  .cc-switch input:focus-visible + .cc-track { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* Móvil en vertical: hoja que sube desde abajo */
  @media (max-width: 760px) and (orientation: portrait), (max-width: 520px) {
    .cc-dialog {
      inset: auto 0 0 0;
      width: 100%;
      max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)));
      margin: 0;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .cc-dialog[open] { animation: k-sheet-up 260ms var(--ease-out); }
    .cc-grab {
      display: block;
      width: 36px;
      height: 4px;
      margin: 8px auto 0;
      border-radius: var(--r-pill);
      background: var(--line-strong);
    }
    .cc-head { padding: 4px 8px 8px 16px; }
    .cc-body { padding: 4px 16px 8px; }
    .cc-dialog .cc-actions { flex-direction: column; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)); }
    .cc-dialog .cc-btn { flex: none; width: 100%; }
  }

  /* Móvil en horizontal: tarjeta a toda altura, botones en fila */
  @media (orientation: landscape) and (max-height: 520px) {
    .cc-dialog { max-height: calc(100dvh - 16px); }
    .cc-head { padding: 6px 8px 6px 16px; }
    .cc-head h2 { font-size: 17px; }
    .cc-row { padding: 8px 0; }
    .cc-dialog .cc-actions { flex-wrap: nowrap; padding: 8px 16px max(8px, env(safe-area-inset-bottom, 0px)); }
  }

  @media (forced-colors: active) {
    .cc-banner, .cc-dialog { border: 2px solid CanvasText; }
    .cc-track { forced-color-adjust: none; background: GrayText; border: 1px solid CanvasText; }
    .cc-switch input:checked + .cc-track { background: Highlight; }
  }
}