/* ============================================================================
   Aviso de cookies de magicandsailing.com (MC02 · ADR-0001, ADR-0005) — skin de CookieConsent 3.1.0.
   Misma estructura que la del motor; colores de la web (opciones de Salient: salient_redux).
   Los valores viven SOLO en el bloque de tokens (--ms-cc-*); el resto los usa con var().
   Contraste medido (WCAG 2.2 AA, A-4):
     texto --ms-cc-ink / --ms-cc-ink-2 sobre --ms-cc-surface ..... 13,26:1 / 8,27:1
     botón: --ms-cc-surface sobre --ms-cc-primary ................. 13,26:1 (hover 15,78:1)
     botón secundario: --ms-cc-primary sobre --ms-cc-sand .......... 12,30:1
     enlace y anillo de foco --ms-cc-accent sobre --ms-cc-surface ... 5,49:1
     interruptor ON --ms-cc-toggle-on / OFF --ms-cc-ink-2 ........... 3,36:1 / 8,27:1 (1.4.11)
     anillo interior blanco contra botón --ms-cc-primary ............ 13,26:1
   ============================================================================ */

/* Tokens: los comparten el aviso (#cc-main), los marcadores de vídeo (.ms-cc-embed, C03) y la política (C05). */
#cc-main,
.ms-cc-embed,
.ms-cc-policy,
.ms-cc-policy__actions {
  --ms-cc-surface: #ffffff;
  --ms-cc-ink: #003254;        /* azul de la web (header-transparent-dark, pie) */
  --ms-cc-ink-2: #4b4f52;      /* cta-text-color */
  --ms-cc-primary: #003254;
  --ms-cc-primary-h: #0a243c;  /* header-dropdown-background-hover */
  --ms-cc-sand: #fff5e9;       /* header-starting-color, texto del pie */
  --ms-cc-accent: #c72a3d;     /* accent-color («Buchen Sie») */
  --ms-cc-toggle-on: #3d999e;  /* header-background-color */
  --ms-cc-line: #dfe4e8;       /* separadores (decorativos) */
  --ms-cc-readonly: #6b7580;
  --ms-cc-overlay: rgba(0, 50, 84, .55); /* = --ms-cc-ink al 55 %; el velo no es texto */
  --ms-cc-radius: 8px;
  --ms-cc-pill: 999px;
  --ms-cc-gap: 16px;
  --ms-cc-toggle-h: 24px;      /* 2.5.8: objetivos ≥ 24 × 24 */
  --ms-cc-ring-in: 2px;
  --ms-cc-ring-out: 2px;
}

#cc-main {
  /* Variables de la librería */
  --cc-font-family: inherit;
  --cc-modal-border-radius: var(--ms-cc-radius);
  /* La librería reutiliza este radio en los bloques de categoría: con píldora, un bloque desplegado se vuelve
     una elipse que recorta la tabla. Radio medio aquí y píldora solo en los botones (abajo). */
  --cc-btn-border-radius: var(--ms-cc-radius);
  --cc-modal-margin: var(--ms-cc-gap);
  --cc-z-index: 2147483000;

  --cc-bg: var(--ms-cc-surface);
  --cc-primary-color: var(--ms-cc-ink);
  --cc-secondary-color: var(--ms-cc-ink-2);
  --cc-link-color: var(--ms-cc-accent);

  --cc-btn-primary-bg: var(--ms-cc-primary);
  --cc-btn-primary-color: var(--ms-cc-surface);
  --cc-btn-primary-border-color: var(--ms-cc-primary);
  --cc-btn-primary-hover-bg: var(--ms-cc-primary-h);
  --cc-btn-primary-hover-color: var(--ms-cc-surface);
  --cc-btn-primary-hover-border-color: var(--ms-cc-primary-h);

  --cc-btn-secondary-bg: var(--ms-cc-sand);
  --cc-btn-secondary-color: var(--ms-cc-primary);
  --cc-btn-secondary-border-color: var(--ms-cc-primary);
  --cc-btn-secondary-hover-bg: var(--ms-cc-surface);
  --cc-btn-secondary-hover-color: var(--ms-cc-primary);
  --cc-btn-secondary-hover-border-color: var(--ms-cc-primary-h);

  --cc-separator-border-color: var(--ms-cc-line);
  --cc-section-category-border: var(--ms-cc-line);

  --cc-toggle-on-bg: var(--ms-cc-toggle-on);
  --cc-toggle-off-bg: var(--ms-cc-ink-2);
  --cc-toggle-on-knob-bg: var(--ms-cc-surface);
  --cc-toggle-off-knob-bg: var(--ms-cc-surface);
  --cc-toggle-enabled-icon-color: var(--ms-cc-surface);
  --cc-toggle-disabled-icon-color: var(--ms-cc-surface);
  --cc-toggle-readonly-bg: var(--ms-cc-readonly);
  --cc-toggle-readonly-knob-bg: var(--ms-cc-surface);
  --cc-toggle-readonly-knob-icon-color: var(--ms-cc-readonly);

  --cc-cookie-category-block-bg: var(--ms-cc-sand);
  --cc-cookie-category-block-border: var(--ms-cc-line);
  --cc-cookie-category-block-hover-bg: var(--ms-cc-surface);
  --cc-cookie-category-block-hover-border: var(--ms-cc-line);
  --cc-cookie-category-expanded-block-bg: var(--ms-cc-surface);
  --cc-cookie-category-expanded-block-hover-bg: var(--ms-cc-sand);

  --cc-overlay-bg: var(--ms-cc-overlay);
  --cc-footer-bg: var(--ms-cc-sand);
  --cc-footer-color: var(--ms-cc-ink-2);
  --cc-footer-border-color: var(--ms-cc-line);
}

#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn {
  border-radius: var(--ms-cc-pill);
}

/* Interruptores a 24 px de alto (la librería los deja en 23 px: 2.5.8 pide ≥ 24 × 24). */
#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label {
  height: var(--ms-cc-toggle-h);
}

/* Foco visible con doble anillo dibujado con box-shadow, NO con outline: Salient anula los outline. El anillo
   interior blanco hace que se vea también sobre los botones azules. */
#cc-main :focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ms-cc-ring-in) var(--ms-cc-surface), 0 0 0 calc(var(--ms-cc-ring-in) + var(--ms-cc-ring-out)) var(--ms-cc-accent);
}

/* El botón de cerrar del panel anima `all` en la librería: el anillo de foco tardaría 150 ms en aparecer. Se
   limita la transición al fondo y al borde para que el foco se vea al instante. */
#cc-main .pm__close-btn {
  transition-property: background-color, border-color;
}

/* Los enlaces del aviso, subrayados: no se distinguen solo por el color (1.4.1). */
#cc-main a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  #cc-main {
    --cc-modal-transition-duration: 0s;
  }
}

/* ============================================================================
   Marcador de vídeo de YouTube bloqueado hasta Publicidad (C03 · ADR-0003, A-8).
   Texto --ms-cc-sand sobre --ms-cc-ink: 12,30:1 · botón --ms-cc-ink sobre --ms-cc-sand: 12,30:1.
   Sin miniatura de YouTube: cargarla sería una petición a Google.
   ============================================================================ */
.ms-cc-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--ms-cc-ink);
  color: var(--ms-cc-sand);
  border-radius: var(--ms-cc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--ms-cc-gap);
  text-align: center;
}

/* Los contenedores de WPBakery y de los bloques de WordPress reservan el 16:9 con padding-top (para un iframe
   absoluto). Con el marcador, ese hueco se anula y el propio marcador da la proporción: `aspect-ratio` crece si el
   texto no cabe (columna estrecha, zoom), así que nunca hace falta scroll dentro (1.4.10). Sin :has() (navegadores
   antiguos) solo queda un hueco de más encima. */
.wpb_video_widget .wpb_wrapper > .wpb_video_wrapper:has(> .ms-cc-embed),
.wpb_video_wrapper:has(> .ms-cc-embed) {
  padding-top: 0;
}

.wp-block-embed__wrapper:has(> .ms-cc-embed)::before {
  display: none;
}

.ms-cc-embed__placeholder {
  max-width: 36em;
}

.ms-cc-embed__title {
  font-weight: 700;
  margin: 0 0 .5em;
  color: inherit;
}

.ms-cc-embed__text {
  margin: 0 0 1em;
  color: inherit;
  line-height: 1.4;
}

.ms-cc-embed .ms-cc-embed__button {
  background: var(--ms-cc-sand);
  color: var(--ms-cc-ink);
  border: 2px solid var(--ms-cc-sand);
  border-radius: var(--ms-cc-pill);
  padding: .6em 1.4em;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  /* Salient anima el box-shadow de los botones (0,45 s): el anillo de foco tardaría en verse. */
  transition: background-color .15s ease;
}

.ms-cc-embed .ms-cc-embed__button:hover {
  background: var(--ms-cc-surface);
}

/* Foco: anillo crema + rojo sobre el azul del marcador (Salient anula los outline). */
.ms-cc-embed .ms-cc-embed__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ms-cc-ring-in) var(--ms-cc-ink), 0 0 0 calc(var(--ms-cc-ring-in) + var(--ms-cc-ring-out)) var(--ms-cc-sand);
}

/* El título del vídeo completa el nombre accesible del botón sin repetirse a la vista. */
.ms-cc-embed__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Política de cookies (C05 · ADR-0006, A-10). Tabla con scroll horizontal propio (región enfocable) para no
   romper el reflow a 320 px (1.4.10). Botón: blanco sobre --ms-cc-primary 13,26:1.
   ============================================================================ */
.ms-cc-policy__updated,
.ms-cc-policy__status {
  color: var(--ms-cc-ink-2);
}

.ms-cc-policy__status {
  font-weight: 700;
}

.ms-cc-policy__category {
  margin: 0 0 var(--ms-cc-gap);
}

.ms-cc-policy__table {
  overflow-x: auto;
  margin: 0 0 var(--ms-cc-gap);
}

.ms-cc-policy__table:focus-visible,
.ms-cc-policy a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ms-cc-ring-in) var(--ms-cc-surface), 0 0 0 calc(var(--ms-cc-ring-in) + var(--ms-cc-ring-out)) var(--ms-cc-accent);
}

.ms-cc-policy table {
  width: 100%;
  border-collapse: collapse;
}

.ms-cc-policy caption {
  text-align: left;
  font-weight: 700;
  padding: .5em 0;
  color: var(--ms-cc-ink);
}

.ms-cc-policy th,
.ms-cc-policy td {
  text-align: left;
  vertical-align: top;
  padding: .5em .75em;
  border: 1px solid var(--ms-cc-line);
  color: var(--ms-cc-ink);
}

.ms-cc-policy thead th {
  background: var(--ms-cc-sand);
}

.ms-cc-policy a {
  text-decoration: underline;
}

.ms-cc-policy__actions .ms-cc-settings-button {
  background: var(--ms-cc-primary);
  color: var(--ms-cc-surface);
  border: 2px solid var(--ms-cc-primary);
  border-radius: var(--ms-cc-pill);
  padding: .6em 1.4em;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}

.ms-cc-policy__actions .ms-cc-settings-button:hover {
  background: var(--ms-cc-primary-h);
}

.ms-cc-policy__actions .ms-cc-settings-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ms-cc-ring-in) var(--ms-cc-surface), 0 0 0 calc(var(--ms-cc-ring-in) + var(--ms-cc-ring-out)) var(--ms-cc-accent);
}
