/**
 * stk-caritas.css v0.4.16 — fixes perdidos + modal de error
 *
 * Cambios v0.4:
 *   - v0.4.16: 3 ajustes recuperados que se habían perdido del archivo +
 *     modal de error de detección de cara:
 *       (1) padding-top: 0 en #stk-mobile #stk-landing → el carrusel del gato
 *           pega al header arriba (antes había franja gris encima).
 *       (2) !important en margin-left/margin-right/width/max-width de
 *           #stk-mobile #stkm-config-stage → carrusel del gato ocupa ancho
 *           completo del viewport (stk-widget.css tiene reglas con !important
 *           con menos especificidad pero que ganaban sobre la nuestra).
 *       (3) #stk-mobile .stk-badge-popular { display: none } → oculta el
 *           badge "POPULAR" amarillo/blanco en los botones de tamaño/cantidad
 *           del landing mobile.
 *     Modal:
 *       - #stk-err-modal: aparece cuando el backend devuelve no_face_detected,
 *         face_too_small o multiple_faces. En lugar de tirar al usuario al
 *         landing con texto en rojo, ahora aparece overlay centrado con icono,
 *         título, descripción y botón "Intentar de nuevo". Funciona en desktop
 *         y mobile (reglas al final del archivo, fuera de cualquier @media).
 *   - v0.4.15: header mobile rediseñado (negro + logo Vulcan blanco)
 *
 * Cambios v0.4:
 *   - v0.4.15: rediseño del header del editor mobile (.stkm-header):
 *       - Fondo negro (#000)
 *       - Botón "VOLVER" reemplazado visualmente por el logo Vulcan blanco
 *         (el SVG original es negro, se invierte con filter:brightness(0)
 *         invert(1) para mostrarlo en blanco). El texto "VOLVER" se oculta
 *         pero el botón sigue siendo clickeable y conserva su rol de volver.
 *       - Precio (#stkm-total / .stkm-header-price) en blanco.
 *       NOTA: estas reglas solo afectan al header del EDITOR mobile, no al
 *       header negro de WordPress de arriba del todo (que es independiente).
 *   - v0.4.14: la regla de v0.4.13 no surtía efecto porque AL FINAL del archivo
 *     había un SEGUNDO @media (max-width: 768px) con #stk-mobile #stk-landing
 *     { padding: 0; } que ganaba por orden de cascada (mismo selector, viene
 *     después). Quitada esa línea "padding: 0" del bloque "Neutralizar reglas
 *     desktop" (el resto de propiedades — display, max-width, margin, gap — sí
 *     se mantienen porque siguen siendo necesarias).
 *   - v0.4.13: padding 20px a cada lado en el landing (#stk-landing):
 *       - Afecta a heading, secciones de configuración, label "Escoge tu material",
 *         botones de tamaño/cantidad y demás contenido del landing.
 *       - EXCEPCIÓN 1: #stkm-config-stage (carrusel de fotos de ejemplo arriba)
 *         mantiene ancho completo del viewport (margin -20px + width calc(100%+40px)
 *         + max-width:none para anular box-sizing:border-box).
 *       - EXCEPCIÓN 2: #stk-l-mats (materiales del landing) también a ancho completo
 *         del viewport. Mismo patrón que #stk-mats del editor (v0.4.12): margin
 *         negativo -20px + padding interno 20px → primer material alineado con el
 *         resto del contenido pero los demás materiales desbordan los bordes al
 *         scrollear horizontalmente. Scrollbar oculto.
 *   - v0.4.12: ajustes estéticos finales del editor mobile (Jean 2026-05-22):
 *       - Fondo blanco en .stkm-editor-body y #stk-mats (antes era gris)
 *       - Cards .stkm-option-btn: fondo gris #ececef (un poco más claro que el
 *         stage del capibara)
 *       - Labels de cards (.stkm-option-label): color #555 (más oscuro que el
 *         #888 default — mejor legibilidad)
 *       - Botón "Cambiar Foto": mismo gris #ececef sin borde, font 12px
 *       - Botón AÑADIR: font 12px (mismo que option-value), text-transform:
 *         none (para que respete capitalización del HTML "Añadir" si se cambia)
 *       - Gaps uniformes a 12px (antes 8px) en .stkm-options y .stkm-editor-buttons,
 *         y margin-bottom 12px en .stkm-options → todo respira igual
 *       - Barra de scroll horizontal de #stk-mats OCULTA (scroll funcional con
 *         el dedo, sólo se quita el indicador visual)
 *       - #stk-mats ahora ocupa ancho completo del viewport (margin negativo
 *         -16px + padding 16px) → los materiales desbordan visualmente hasta
 *         los bordes de la pantalla cuando el usuario scrollea horizontalmente,
 *         pero el primer material queda alineado con el inicio de las cards.
 *   - v0.4.11: estilos del icono flotante #stkm-color-icon (rueda arcoíris
 *     conic-gradient, 36×36, bottom-right del #stkm-editor-stage, oculto por
 *     defecto y mostrado vía JS sólo cuando hasImage && material==='vinyl') y
 *     del grid .stkm-color-grid del drawer #stkm-drawer-color (9 columnas,
 *     círculos perfectos con border-radius:50%, borde 1px en el swatch blanco).
 *     El drawer hereda .stkm-drawer existente de stk-mobile.css; lo único
 *     custom es el grid de swatches.
 *   - v0.4.10: rediseño layout inferior — grid 3 columnas (Acabado/Tamaño/
 *     Cantidad) + botonera row (Cambiar Foto | AÑADIR) para que TODO quepa
 *     sin scroll. Eliminadas reglas v0.4.7/8/9 sobre scroll/sticky.
 *   - v0.4.9: scroll vertical en mobile no funcionaba en iOS Safari real
 *     aunque el override de overflow estaba presente. iOS ignora overrides sin
 *     suficiente especificidad. Replicamos el patrón EXACTO de troqueladas
 *     (stk-mobile.css), que sí funciona en iOS. → Abandonado en v0.4.10:
 *     mejor solución es que el contenido no necesite scroll.
 *   - v0.4.8: scroll vertical en mobile + header sticky (insuficiente sin
 *     !important para iOS — sustituido por v0.4.9).
 *   - v0.4.7: contenido al 80% del stage para dejar aire alrededor.
 *   - v0.4.6: layout mobile completo del editor (flechas absolute en stage,
 *     Cambiar Foto como 4ta card, AÑADIR full-width).
 *   - v0.4.5: fix mobile face-layer width 197% (cara descentrada).
 *   - v0.4.4: arreglado header de comentario.
 *
 * Cambios v0.3:
 *   - face_w = 130% (era 197%)
 *   - target_eye_y = 60% (era 60.5%)
 *   - .face-layer envuelve <img>, y va DENTRO de .face-mask (NO hermanos)
 *   - .disguise-layer usa <img>, no SVG inline (con object-fit:contain)
 *
 * Las 5 constantes finales:
 *   TARGET_EYE_Y_PCT = 60%    -> posición Y de los ojos en el stage
 *   FACE_W_PCT       = 130%   -> ancho de la cara como % del stage
 *   MASK_RX_PCT      = 29%    -> radio X del oval (clip-path)
 *   MASK_RY_PCT      = 31.5%  -> radio Y del oval (clip-path)
 *   MASK_CY_PCT      = 63%    -> centro Y del oval (clip-path)
 */

:root {
  --caritas-target-eye-y: 60.5%;
  --caritas-face-w:       197%;
  --caritas-mask-rx:      29%;
  --caritas-mask-ry:      31.5%;
  --caritas-mask-cy:      63%;
}

/* ═══════════════════════════════════════════════════
   STAGE COMPUESTO — cuadrado, lado = S
═══════════════════════════════════════════════════ */
#stk-caritas-stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
  background: transparent;
}

/* Capa máscara: clip-path oval, dentro va la cara */
#stk-caritas-face-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  clip-path: ellipse(
    var(--caritas-mask-rx) var(--caritas-mask-ry)
    at 50% var(--caritas-mask-cy)
  );
  -webkit-clip-path: ellipse(
    var(--caritas-mask-rx) var(--caritas-mask-ry)
    at 50% var(--caritas-mask-cy)
  );
}

/* Cara: contenedor con ancho fijo (130% del stage) + transform shift Y */
#stk-caritas-face-layer {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--caritas-face-w);
  height: auto;
  transform: translateX(-50%) translateY(var(--face-shift, 0px));
  pointer-events: none;
}

#stk-caritas-face-layer img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Disfraz: <img> al 100% del stage, con object-fit:contain por si el SVG no es cuadrado */
#stk-caritas-disguise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#stk-caritas-disguise img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* SVG del halo: misma posición y mismo comportamiento de contain que el <img> */
#stk-caritas-disguise > svg#stk-caritas-halo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   CARRUSEL EDITOR — flechas laterales (fuera del oval)
═══════════════════════════════════════════════════ */
/* Anular el contenedor: ahora actúa como overlay sobre todo el stage */
#stk-ed-carousel {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: 10;
  pointer-events: none;  /* clicks pasan; solo botones reciben */
  user-select: none;
}

/* Label oculto */
#stk-ed-carousel-track {
  display: none;
}

/* Flechas grandes a los lados, centradas verticalmente */
.stk-ed-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 38px;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
}
#stk-ed-carousel-prev { left: 8px; }
#stk-ed-carousel-next { right: 8px; }

.stk-ed-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.06);
}
.stk-ed-carousel-arrow:active {
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(-50%) scale(0.94);
}

/* ═══════════════════════════════════════════════════
   PROGRESS OVERLAY
═══════════════════════════════════════════════════ */
.stk-process-overlay {
  position: absolute;
  inset: 0;
  background: #d8d8d8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 20;
  border-radius: inherit;
}

.stk-process-text {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.stk-process-bar-wrap {
  width: 240px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 999px;
  overflow: hidden;
}

.stk-process-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffc107, #ffeb3b);
  transition: width 0.4s ease;
  border-radius: 999px;
}

/* Stage del editor: dejar espacio inferior para el carrusel */
#stk-editor #stk-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding-bottom: 60px;
}

/* ═══════════════════════════════════════════════
   MOBILE OVERRIDES (cuando el wrapper es #stk-mobile)
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stage caritas debe ocupar todo el ancho disponible en mobile */
  #stk-mobile #stk-stage {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding-bottom: 0;
    /* Centrar el contenido (#stk-caritas-stage reducido al 80%) */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Contenido del editor: 80% del stage para dejar aire alrededor
     y que el halo de los materiales se vea correctamente sin ser cortado
     por el viewport. Encogemos físicamente (no con transform: scale) para
     que placeHaloImage() calcule las coordenadas correctas — usa
     getBoundingClientRect() y un transform causaría doble escalado. */
  #stk-mobile #stk-caritas-stage {
    width: 80%;
    height: 80%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
  }

  #stk-mobile #stk-caritas-face-mask {
    width: 100%;
    height: 100%;
  }

  /* ─── Carrusel de disfraces: flechas a los lados del capibara ───
     El #stkm-ed-carousel está dentro del #stkm-editor-stage (PHP v0.13+),
     que tiene position:relative. Las flechas se posicionan absolutas. */
  #stk-mobile #stkm-editor-stage {
    position: relative;
  }
  #stk-mobile #stkm-ed-carousel {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    z-index: 10;
  }
  /* Label del disfraz: lo ocultamos en mobile, sólo flechas visibles */
  #stk-mobile #stk-ed-carousel-track {
    display: none;
  }
  #stk-mobile #stk-ed-carousel-prev,
  #stk-mobile #stk-ed-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.85);
    border: 0;
    border-radius: 50%;
    color: #111;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 11;
    margin: 0;
    cursor: pointer;
  }
  #stk-mobile #stk-ed-carousel-prev { left: 6px;  right: auto; }
  #stk-mobile #stk-ed-carousel-next { right: 6px; left: auto; }

  /* ─── Grid de 3 columnas: Acabado / Tamaño / Cantidad ───
     Cards más compactas porque caben 3 en lugar de 2. */
  #stk-mobile .stkm-options {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #stk-mobile .stkm-options .stkm-option-btn {
    padding: 10px 8px;
  }
  #stk-mobile .stkm-options .stkm-option-label {
    font-size: 10px;
  }
  #stk-mobile .stkm-options .stkm-option-value {
    font-size: 12px;
  }
  #stk-mobile .stkm-options .stkm-option-arrow {
    width: 14px;
    height: 14px;
  }

  /* ─── Botonera inferior: Cambiar Foto (gris) + AÑADIR (verde) en row ───
     Dos botones de igual ancho (flex:1) lado a lado. Cambiar Foto envuelve
     el <input type="file"> oculto (position:absolute, 0×0 invisible). */
  #stk-mobile .stkm-editor-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  #stk-mobile .stkm-editor-buttons > .stkm-btn-change {
    flex: 1;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    margin: 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    color: #111;
    cursor: pointer;
    line-height: 1;
    position: relative;
  }
  #stk-mobile .stkm-editor-buttons > .stkm-btn-change input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  #stk-mobile .stkm-editor-buttons > #stk-cart-btn {
    flex: 1;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    font-size: 15px;
    line-height: 1;
  }

  /* ─── Icono flotante de color del borde (rueda arcoíris) ───
     Visible sólo cuando state.hasImage && state.material==='vinyl'.
     La visibilidad la gestiona stk-caritas-mobile.js vía display block/none. */
  #stk-mobile #stkm-color-icon {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 25;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: none;
  }

  /* ─── Grid de colores dentro del drawer #stkm-drawer-color ───
     9 columnas, swatches circulares (border-radius: 50%). El swatch blanco
     lleva un borde 1px para distinguirlo del fondo. */
  #stk-mobile .stkm-color-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    padding: 4px 0;
  }
  #stk-mobile .stkm-color-sw {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
  }
  #stk-mobile .stkm-color-sw--white {
    border: 1px solid #ddd;
  }

  /* ─── AJUSTES ESTÉTICOS v0.4.12 ─── */
  /* Fondo blanco del editor body y de la sección de materiales */
  #stk-mobile .stkm-editor-body {
    background: #fff;
  }
  #stk-mobile #stk-mats {
    background: #fff;
  }

  /* Materiales a ancho completo del viewport (desbordan los bordes del editor).
     Margin negativo -16px compensa el padding del .stkm-editor-body, y el
     padding-left/right 16px mantiene el PRIMER material alineado con el inicio
     de las cards de abajo. */
  #stk-mobile #stk-mats {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    width: calc(100% + 32px);
  }

  /* Ocultar barra de scroll horizontal de materiales (scroll sigue funcional
     con el dedo, solo se quita la barra visual) */
  #stk-mobile #stk-mats {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #stk-mobile #stk-mats::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Cards con fondo gris (un poco más claro que el stage del capibara) */
  #stk-mobile .stkm-options .stkm-option-btn {
    background: #ececef;
  }
  /* Labels de cards más oscuros para mejor legibilidad */
  #stk-mobile .stkm-options .stkm-option-label {
    color: #555;
  }

  /* Espaciado uniforme 12px entre cards y entre cards/botones */
  #stk-mobile .stkm-options {
    gap: 12px;
    margin-bottom: 12px;
  }
  #stk-mobile .stkm-editor-buttons {
    gap: 12px;
  }

  /* Botón "Cambiar Foto" con mismo gris que las cards y texto a 12px */
  #stk-mobile .stkm-editor-buttons > .stkm-btn-change {
    background: #ececef;
    border-color: transparent;
    font-size: 12px;
  }

  /* Botón AÑADIR: texto 12px (= "Brillante") y respeta capitalización del HTML */
  #stk-mobile .stkm-editor-buttons > #stk-cart-btn {
    font-size: 12px;
    text-transform: none;
  }

  /* ─── PADDING LATERAL LANDING v0.4.13 ─── */
  /* Padding 20px a cada lado del landing (afecta a heading, secciones, etc.) */
  #stk-mobile #stk-landing {
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* EXCEPCIÓN 1: carrusel de fotos de ejemplo arriba mantiene ancho completo.
     Margin negativo compensa el padding del landing; width calc(100%+40px) y
     max-width:none anulan el border-box que recortaría el ancho. */
  #stk-mobile #stkm-config-stage {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
  }
  /* EXCEPCIÓN 2: materiales del landing a ancho completo del viewport.
     Mismo patrón que #stk-mats del editor: margin -20px + padding interno 20px
     → primer material alineado con el contenido del landing, los demás
     desbordan los bordes al scrollear. Scrollbar oculto. */
  #stk-mobile #stk-l-mats {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% + 40px);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #stk-mobile #stk-l-mats::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* ─── OCULTAR BADGE "POPULAR" en mobile ─── */
  #stk-mobile .stk-badge-popular {
    display: none;
  }

  /* ─── HEADER MOBILE REDISEÑADO v0.4.15 ─── */
  /* Header con fondo negro (en lugar de blanco) */
  .stkm-header {
    background: #000;
  }
  /* Botón VOLVER reemplazado por logo Vulcan blanco.
     - color: transparent + font-size 0 → oculta el texto "VOLVER"
     - background-image: SVG del logo (originalmente negro)
     - filter: brightness(0) invert(1) → invierte negro a blanco
     - El botón sigue clickeable, sigue volviendo al landing */
  #stk-mobile #stk-editor-back.stkm-header-cancel {
    color: transparent;
    font-size: 0;
    width: 120px;
    height: 28px;
    background: url("https://vulcansticker.es/wp-content/uploads/2026/05/icon-vulcansticker-c002-e2e778.svg") no-repeat left center / contain;
    filter: brightness(0) invert(1);
  }
  /* Precio en blanco (antes era negro #000) */
  .stkm-header-price,
  #stkm-total {
    color: #fff;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE: stk-landing/stk-editor del widget caritas mobile
   Neutralizar reglas desktop:
   - #stk-landing { display: grid } (stk-desktop.css)
   - #stk-editor { display: none !important } @ max-width 768px (stk-desktop.css)
   El switch entre landing/editor se hace con body.stk-editor-open
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  #stk-mobile #stk-landing {
    display: block;
    grid-template-columns: none;
    max-width: none;
    margin: 0;
    /* padding ya definido en v0.4.13: 0 vertical + 20px horizontal */
    gap: 0;
  }
  #stk-mobile #stk-editor {
    display: none !important;
  }
  body.stk-editor-open #stk-mobile #stk-editor {
    display: block !important;
  }
  body.stk-editor-open #stk-mobile #stk-landing {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════
   MODAL DE ERROR (v0.4.16)
   Aparece cuando el backend devuelve un error de detección de cara.
   Funciona en desktop y mobile. Oculto por defecto (#stk-err-modal[hidden]).
   ═══════════════════════════════════════════════ */
#stk-err-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  animation: stkErrFadeIn 0.2s ease-out;
}
#stk-err-modal[hidden] {
  display: none;
}
#stk-err-modal .stk-err-card {
  background: #fff;
  border-radius: 16px;
  max-width: 360px;
  width: 100%;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: stkErrScaleIn 0.25s ease-out;
}
#stk-err-modal .stk-err-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
}
#stk-err-modal .stk-err-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
}
#stk-err-modal .stk-err-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 24px;
}
#stk-err-modal .stk-err-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
}
#stk-err-modal .stk-err-btn:hover {
  background: #1a1a1a;
}
#stk-err-modal .stk-err-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
@keyframes stkErrFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes stkErrScaleIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════
   iPad fix: scroll horizontal en materiales (layout desktop)
   En iPad, stk-caritas-core.js elimina #stk-mobile del DOM y queda solo
   #stk-v38 (layout desktop). La regla .stk-panel .stk-mats de stk-desktop.css
   tiene "overflow: hidden !important", lo que impide scroll táctil con dedo.
   Esta regla solo aplica en dispositivos touch (no afecta desktop con mouse,
   donde el mouse-follow de bindMatsScroll sigue funcionando como siempre).
   ═══════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  #stk-v38 .stk-panel .stk-mats {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Ocultar halo y disguise mientras el overlay de upload está visible
   (sino el halo sobresale del stage y se ve detrás del overlay) */
#stk-stage:has(> .stk-process-overlay) #stk-caritas-halo,
#stk-stage:has(> .stk-process-overlay) #stk-caritas-disguise {
  visibility: hidden;
}

/* ═══════════════════════════════════════════════════
   CONSENT CHECKBOX (legal — padres/tutores de menor)
   ═══════════════════════════════════════════════════ */
.stk-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  margin-bottom: 12px;
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #444;
  cursor: pointer;
  user-select: none;
}
.stk-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--stk-accent, #22a653);
}
.stk-consent span {
  flex: 1;
}

/* Botón Subir Foto deshabilitado hasta marcar consent */
.stk-upload-btn[data-consent-required="1"]:not(.stk-consent-ok),
.stkm-upload-main[data-consent-required="1"]:not(.stk-consent-ok) {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Override mobile: caja Total alineada con el ancho del botón (sin margin lateral)
   y con padding bottom extra para respirar */
#stk-mobile .stkm-config-price {
  margin: 0 0 12px 0;
  padding: 16px 16px 22px 16px;
}