/* cookie-ui.css — layout y capas para fs-cc_* */

/* ============================= */
/* Variables                     */
/* ============================= */
:root{
  --clg-gap: 16px;
  --clg-z-base: 2147483600;                 /* MUY alto para evitar conflictos */
  --clg-radius: 20px;
  --clg-shadow: 0 12px 32px rgba(0,0,0,.25);
}

/* ============================= */
/* Estados base / visibilidad    */
/* ============================= */
[hidden]{ display: none !important; }
.clg-visible-off{ display: none !important; }

#cookie-banner,
#cookie-preferences,
#cookie-manager-trigger,
.fs-cc_cookie-component,
.fs-cc_preference-component{
  transition: opacity .25s ease, visibility .25s ease;
  opacity:0; visibility:hidden; pointer-events:none;
}
#cookie-banner.is-visible,
#cookie-preferences.is-visible,
#cookie-manager-trigger.is-visible,
.fs-cc_cookie-component.is-visible,
.fs-cc_preference-component.is-visible{
  opacity:1; visibility:visible; pointer-events:auto;
}

.is-hiding{ opacity:.001; }

/* ============================= */
/* Banner (abajo-izquierda)      */
/* ============================= */
#cookie-banner,
.fs-cc_cookie-component{
  position: fixed !important;
  left: var(--clg-gap) !important;
  right: auto !important;
  bottom: var(--clg-gap) !important;
  z-index: calc(var(--clg-z-base) + 0) !important;
  max-width: min(560px, calc(100vw - 2 * var(--clg-gap)));
  background: transparent !important; /* tu tema estila el interior */
  padding: 0 !important;
  border: 0 !important;
}
.fs-cc_cookie-component .fs-cc_modal{
  border-radius: var(--clg-radius);
  box-shadow: var(--clg-shadow);
}

/* ============================= */
/* Manager / Preferencias (modal)*/
/* ============================= */
#cookie-preferences,
.fs-cc_preference-component{
  position: fixed !important;
  inset: 0 !important;                                 /* ocupa toda la pantalla */
  z-index: var(--clg-z-base) !important;               /* contexto por encima del sitio */
  display: none;
  overflow: hidden !important;
}
#cookie-preferences.is-visible,
.fs-cc_preference-component.is-visible{
  display:block;
}

/* Wrapper: pantalla completa (¡lleva z-index!) */
.cookie-preference_wrapper{
  position: relative !important;
  z-index: calc(var(--clg-z-base) + 2) !important;     /* > overlay */
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 24px !important; box-sizing: border-box;
  overflow: auto;
}

/* Modal SIEMPRE por ENCIMA del overlay */
#cookie-preferences .fs-cc_modal,
.fs-cc_preference-component .fs-cc_modal{
  position: relative !important;
  z-index: calc(var(--clg-z-base) + 3) !important;     /* tope superior */
  max-width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  color: inherit;
  border-radius: var(--clg-radius); box-shadow: var(--clg-shadow);
  overflow: auto; pointer-events: auto !important;
}

/* Overlay: debajo del modal */
#cookie-preferences > .cookie-preference_background,
.fs-cc_preference-component > .cookie-preference_background{
  position: absolute !important;
  inset: 0 !important;
  z-index: calc(var(--clg-z-base) + 1) !important;     /* justo debajo del wrapper/modaI */
  background: rgba(0,0,0,.5) !important;
  display: none !important;
  pointer-events: none !important;
}
#cookie-preferences > .cookie-preference_background.is-visible,
.fs-cc_preference-component > .cookie-preference_background.is-visible{
  display:block !important;
  pointer-events:auto !important;                      /* clic para cerrar */
}

/* ============================= */
/* Trigger persistente           */
/* ============================= */
#cookie-manager-trigger.clg-trigger,
a.clg-trigger{
  position: fixed !important;
  left: var(--clg-gap) !important;
  bottom: calc(var(--clg-gap) + 72px) !important;
  z-index: calc(var(--clg-z-base) + 4) !important;     /* por encima de todo lo de cookies */
  display: none;
}

/* Look & feel tipo fs-cc (botón secundario reducido) */
#cookie-manager-trigger.clg-trigger button{
  all: unset;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #fff; color:#111;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  font: 600 14px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  cursor: pointer;
}
#cookie-manager-trigger.clg-trigger button:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
#cookie-manager-trigger.is-visible{ display:block; }

/* ============================= */
/* Declaración (fluye con la web)*/
/* ============================= */
.fs-cc_declaration-component{
  display:block !important;
  position:static !important;
  opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important;
  z-index:auto !important;                               /* no compite con el modal */
  background:transparent !important;
}
.fs-cc_declaration-component *{ z-index:auto !important; }

/* ============================= */
/* Responsive                    */
/* ============================= */
@media (max-width: 480px){
  .cookie-preference_wrapper{ padding:16px !important; }
  #cookie-preferences .fs-cc_modal,
  .fs-cc_preference-component .fs-cc_modal{
    max-height: calc(100vh - 32px);
  }
}