/*
 * EL AVISO DE COOKIES Y EL CONTENIDO BLOQUEADO (site/partials/cookie-consent, consent-embed).
 * Igual en todos los temas: tira de sus variables (--site-*, --font-body) y mide en rem, asi que en
 * la tienda escala con --sh-scale. Discreto: una barra abajo (o una tarjeta en escritorio), sin
 * tapar la pagina ni la barra de compra del movil (--scc-lift la sube encima).
 */
.scc, .scc-modal, .scc-embed {
  --scc-bg: var(--site-card, #ffffff);
  --scc-fg: var(--site-fg, #111111);
  --scc-muted: var(--site-muted, #555555);
  --scc-line: var(--site-line, rgba(0, 0, 0, .14));
  --scc-accent: var(--site-accent, #0f766e);
  --scc-accent-ink: var(--site-accent-ink, #ffffff);
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--scc-fg);
}
.scc[hidden], .scc-modal[hidden] { display: none !important; }
/* Los temas visten p, h2 y button a su manera (tamaños grandes, mayusculas): aqui no. */
.scc p, .scc-dialog p, .scc-dialog h2, .scc-embed p { max-width: none; letter-spacing: normal; text-transform: none; min-height: 0; }
.scc *, .scc-modal *, .scc-embed * { box-sizing: border-box; }
html.scc-on body { padding-bottom: var(--scc-space, 0); }

.scc {
  position: fixed; z-index: 2147483000; left: 0; right: 0;
  bottom: var(--scc-lift, 0);
  background: var(--scc-bg);
  border-top: 1px solid var(--scc-line);
  box-shadow: 0 -0.5rem 1.75rem rgba(0, 0, 0, .14);
  font-size: 0.875rem; line-height: 1.45;
}
.scc-in { max-width: 72rem; margin: 0 auto; padding: 0.875rem 1rem; display: flex; gap: 0.75rem 1.5rem; align-items: center; flex-wrap: wrap; }
.scc-copy { flex: 1 1 26rem; min-width: 0; }
.scc-title { margin: 0 0 0.125rem; font-weight: 700; font-size: 0.9375rem; }
.scc-text { margin: 0; color: var(--scc-muted); }
.scc-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; font-weight: 600; }
.scc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scc-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.875rem;
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: 0.375rem;
  border: 1px solid var(--scc-accent); background: var(--scc-accent); color: var(--scc-accent-ink);
}
.scc-btn.is-ghost { background: transparent; color: var(--scc-fg); border-color: var(--scc-line); }
.scc-btn:focus-visible, .scc-link:focus-visible, .scc-close:focus-visible, .scc-cat input:focus-visible {
  outline: 0.1875rem solid var(--scc-accent); outline-offset: 0.125rem;
}

/* La tarjeta: abajo a la izquierda en escritorio, la misma barra en el movil. */
@media (min-width: 768px) {
  .scc-box { left: 1rem; right: auto; bottom: calc(1rem + var(--scc-lift, 0px)); max-width: 26rem; border: 1px solid var(--scc-line); border-radius: 0.625rem; }
  .scc-box .scc-in { padding: 1rem 1.125rem; }
  html.scc-on:has(.scc-box) body { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .scc-in { padding: 0.75rem 1rem; }
  .scc-actions { width: 100%; }
  .scc-actions .scc-btn { flex: 1 1 0; padding: 0 0.5rem; }
  .scc-actions .scc-btn.is-ghost { flex-basis: 100%; }
}

/* El panel de categorias: un dialogo de verdad. */
.scc-modal {
  position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0, 0, 0, .45);
}
html.scc-modal-on { overflow: hidden; }
.scc-dialog {
  position: relative; width: 100%; max-width: 34rem; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--scc-bg); color: var(--scc-fg); border-radius: 0.75rem; padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3); font-size: 0.875rem; line-height: 1.5; outline: none;
}
.scc-panel-title { margin: 0 2rem 0.5rem 0; font-size: 1.25rem; font-family: var(--font-display, inherit); }
.scc-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; border: 0; background: transparent;
  color: var(--scc-fg); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 0.375rem;
}
.scc-cats { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.625rem; }
.scc-cat { border: 1px solid var(--scc-line); border-radius: 0.5rem; padding: 0.75rem 0.875rem; }
.scc-cat p { margin: 0.25rem 0 0 1.75rem; color: var(--scc-muted); }
.scc-cat-head { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; cursor: pointer; }
.scc-cat-head input { width: 1.125rem; height: 1.125rem; accent-color: var(--scc-accent); margin: 0; }
.scc-cat-head small { margin-left: auto; font-weight: 600; color: var(--scc-muted); }

/* «Configurar cookies» del pie: un boton con cara de enlace del pie de cada tema. */
.scc-foot-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.scc-foot-link:focus-visible { outline: 0.125rem solid currentColor; outline-offset: 0.125rem; }

/* El contenido de fuera, bloqueado hasta consentir. */
.scc-embed {
  position: relative; width: 100%; background: var(--site-bg-2, #f1f1f1); border: 1px solid var(--scc-line);
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.scc-embed.is-fill { height: 100%; min-height: 20rem; }
.scc-embed.is-map { aspect-ratio: 16 / 10; }
.scc-embed.is-video { aspect-ratio: 16 / 9; }
.scc-embed[data-scc-loaded="1"] { border: 0; background: transparent; }
.scc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.scc-embed-hold { max-width: 26rem; padding: 1.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--scc-muted); }
.scc-embed-hold p { margin: 0 0 0.75rem; }
.scc-embed-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; margin: 0; }