:root{
  --scava-primary:#155EFF;
  --scava-surface:#ffffff;
  --scava-text:#0b0f1a;
  --scava-muted:#6b7280;
  --scava-ring:#dbe4ff;
  --shadow-xl:0 24px 70px rgba(2,8,23,.25);
  --r-xl:18px; --r-lg:14px; --r-md:10px;
  --scava-icon-size: 52px;   /* 48–56 queda muy bien */
  --scava-glyph-size: 30px;  /* tamaño del dibujo dentro del cuadro */
  /* Escala global de tipografía del modal (ajusta 1.08–1.18) */
  --scava-font-scale: 1.12;
}

@media (prefers-color-scheme: dark){
  :root{
    --scava-surface:#0c1220;
    --scava-text:#e9eefc;
    --scava-muted:#99a3b2;
    --scava-ring:#1f2a55;
    --shadow-xl:0 24px 70px rgba(0,0,0,.6);
  }
}

/* Oculto por defecto; el JS lo muestra */
.scava-modal[hidden]{ display:none!important; }

/* Contenedor fullscreen centrado */
.scava-modal{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  padding:clamp(8px,2vw,20px);
}

.scava-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(7,12,24,.58);
  backdrop-filter:saturate(120%) blur(3px);
  opacity:0; transition:opacity .2s ease;
  z-index:0;
}

/* Diálogo */
.scava-modal__dialog{
  position:relative; z-index:1; isolation:isolate;
  width:min(980px,100%); max-height:min(90vh,880px);
  display:flex; flex-direction:column;
  background:var(--scava-surface); color:var(--scava-text);
  border-radius:var(--r-xl); border:1px solid var(--scava-ring);
  box-shadow:var(--shadow-xl); overflow:hidden;
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .22s ease, opacity .22s ease;

  /* Escala tipográfica global */
  font-size: calc(1rem * var(--scava-font-scale));
  line-height: 1.55;
}

/* Estado abierto */
.scava-modal.is-open .scava-modal__backdrop{ opacity:1; }
.scava-modal.is-open .scava-modal__dialog{ transform:none; opacity:1; }

/* Header */
.scava-modal__header{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:18px 22px 14px; border-bottom:1px solid var(--scava-ring);
  background:linear-gradient(180deg, rgba(21,94,255,.06), transparent);
}



/* Candado outline, mismo estilo pero más grande y “gordo” */
.scava-icon{
  width: var(--scava-icon-size);
  height: var(--scava-icon-size);
  display: block;
  border-radius: 14px;
  background-color: var(--scava-primary); /* color del trazo */

  /* Máscara con el nuevo SVG outline grueso (ruta absoluta) */
  -webkit-mask: url('/css/assets/lock-outline-bold.svg') center/var(--scava-glyph-size) var(--scava-glyph-size) no-repeat;
          mask: url('/css/assets/lock-outline-bold.svg') center/var(--scava-glyph-size) var(--scava-glyph-size) no-repeat;

  /* un leve peso visual para integrarlo mejor */
  filter: drop-shadow(0 1px 0 rgba(2,8,23,.06));
}

/* Fallback si el navegador no soporta mask */
@supports not (mask: url('')) {
  .scava-icon{
    background:
      var(--scava-primary)
      url('/css/assets/lock-outline-white.svg') center/var(--scava-glyph-size) var(--scava-glyph-size) no-repeat;
    border-radius: 14px;
  }
}


.scava-headings h3{
  margin:0 0 2px;
  font-size: calc(1.25rem * var(--scava-font-scale));
}
.scava-subtitle{
  margin:0; color:var(--scava-muted);
  font-size: calc(.96rem * var(--scava-font-scale));
}

/* Botón cerrar (X) */
.scava-modal__close{
  position:absolute; top:10px; right:12px;
  width:38px; height:38px; border-radius:999px;
  border:0; background:transparent; color:var(--scava-muted);
  font-size:26px; line-height:1; cursor:pointer;
}
.scava-modal__close:hover{ color:var(--scava-text); }

/* Cuerpo con scroll interno */
.scava-modal__content{
  padding:18px 20px;
  overflow:auto; overscroll-behavior:contain;
  background:var(--scava-surface);
}

/* Footer (no se usa) */
.scava-modal__footer{ display:none !important; }

/* Grid responsivo */
.scava-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){
  .scava-grid{ grid-template-columns:1.05fr .95fr; gap:22px; }
}
.scava-col>p{ margin:0 0 12px; }
.scava-col, .scava-illustrations{ background:var(--scava-surface); }

/* Steps (cards) */
.scava-steps{ display:grid; gap:12px; margin:10px 0 16px; }
.scava-step{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  padding:12px; border:1px solid var(--scava-ring);
  border-radius:var(--r-lg); background:rgba(21,94,255,.04);
}
.scava-step h4{ margin:0 0 .25rem; font-size:1.06em; }
.scava-badge{
  display:grid; place-items:center; width:34px; height:34px; border-radius:999px;
  background:var(--scava-primary); color:#fff; font-weight:700;
}
.scava-chip{
  display:inline-block; padding:.1rem .45rem; border-radius:999px;
  background:rgba(21,94,255,.08); border:1px solid var(--scava-ring);
}

/* Details + animación “deslizada” */
.scava-details summary{ cursor:pointer; font-weight:600; color:var(--scava-primary); }
.scava-details p{ margin:.5rem 0; }
.scava-details .dd-body{
  overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .30s ease, opacity .22s ease;
}
.scava-details[open] .dd-body{
  max-height:1000px; opacity:1;
}

/* (Por si quedó el checkbox en HTML, lo oculto) */
.scava-checkbox{ display:none !important; }

/* Imágenes (enteras, no recortadas) + zoom */
.scava-illustrations{ display:grid; gap:14px; align-content:start; }
.scava-figure{ margin:0; }
.scava-figure img{
  display:block; width:100%; height:auto;
  max-height:none; object-fit:contain;
  border-radius:12px; border:1px solid var(--scava-ring);
  box-shadow:0 6px 22px rgba(2,8,23,.12);
  cursor:zoom-in;
}
.scava-figure figcaption{
  margin-top:6px; color:var(--scava-muted);
  font-size: calc(.92rem * var(--scava-font-scale));
}
.scava-figure img.is-zoomed{
  position:fixed; inset:4% 4%;
  width:auto; height:auto; max-width:92vw; max-height:92vh;
  object-fit:contain; z-index:10000; background:#000;
  cursor:zoom-out; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* RTL */
html[dir="rtl"] .scava-modal__dialog{ direction:rtl; }
html[dir="rtl"] .scava-modal__close{ left:12px; right:auto; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .scava-modal__dialog, .scava-modal__backdrop{ transition:none; }
}