/* ===== Tokens (Light por defecto) ===== */
:root{
  --mdl2-capa-bg: radial-gradient(circle at center, rgba(239,239,239,.2) 0%, rgba(239,239,239,.5) 50%, rgba(239,239,239,.8) 80%);
  --mdl2-conten-bg:#fffd; /* blanco con alpha */
  --mdl2-border-color: transparent;
  --mdl2-tx:#5D5E5E;
  --mdl2-h2:#131517;
  --mdl2-icon-bg: rgba(19,21,23,.06);
  --mdl2-icon-tx:#5D5E5E;
  --mdl2-btn-bg:#333537;
  --mdl2-btn-tx:#fff;
  --mdl2-btn-bg-h:#535557;
  --mdl2-btn-tx-h:#eee;
  --mdl2-close:#888;
  --mdl2-close-h:#111;
}

/* ===== Modo DARK forzado por el toggle (un solo bloque) ===== */
body[data-theme="dark"]{
  --mdl2-capa-bg: radial-gradient(circle at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.8) 80%);
  --mdl2-conten-bg:#222d; /* #222 con alpha */
  --mdl2-border-color: rgba(255,255,255,.10);
  --mdl2-tx:#fff;
  --mdl2-h2:#fff;
  --mdl2-icon-bg: rgba(118,119,120,.5);
  --mdl2-icon-tx:#D2D4D7;
  --mdl2-btn-bg:#fff;
  --mdl2-btn-tx:#2E3031;
  --mdl2-btn-bg-h:#EBECED;
  --mdl2-btn-tx-h:#000;
  --mdl2-close:#aaa;
  --mdl2-close-h:#fff;
}

/* ===== Fallback: si JS aún no aplicó data-theme, respeta el SO ===== */
@media (prefers-color-scheme: dark){
  body:not([data-theme]){
    --mdl2-capa-bg: radial-gradient(circle at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.8) 80%);
    --mdl2-conten-bg:#222d;
    --mdl2-border-color: rgba(255,255,255,.10);
    --mdl2-tx:#fff;
    --mdl2-h2:#fff;
    --mdl2-icon-bg: rgba(118,119,120,.5);
    --mdl2-icon-tx:#D2D4D7;
    --mdl2-btn-bg:#fff;
    --mdl2-btn-tx:#2E3031;
    --mdl2-btn-bg-h:#EBECED;
    --mdl2-btn-tx-h:#000;
    --mdl2-close:#aaa;
    --mdl2-close-h:#fff;
  }
}

/* ===== Estilos del componente (usan variables) ===== */
.mdl2_abre { transition: background .2s; }

.mdl2_capa {
  position: fixed; inset: 0;
  background: var(--mdl2-capa-bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter:blur(1px);
  z-index:5;
}
.mdl2_capa.mdl2_visible { opacity: 1; visibility: visible; }

.mdl2_conten {
  font-family: colossus;
  background: var(--mdl2-conten-bg);
  padding:20px 24px; margin:4px;
  border-radius:16px;
  transform: translateY(-20px); transition: transform .3s;
  max-width:360px; width:100%;
  color: var(--mdl2-tx);
  border:1px solid var(--mdl2-border-color);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow: 0 0 0 1px rgba(19,21,23,0.08),0 3px 3px rgba(0,0,0,0.03),0 8px 7px rgba(0,0,0,0.04),0 17px 14px rgba(0,0,0,0.05),0 35px 29px rgba(0,0,0,0.06),0 -4px 4px rgba(0,0,0,0.04) inset;
}
.mdl2_capa.mdl2_visible .mdl2_conten { transform: translateY(0); }

.mdl2_header {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1em;
}
.mdl2_icono{
  font-size:23px; color: var(--mdl2-icon-tx);
  background-color: var(--mdl2-icon-bg);
  padding:3px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  width:45px; height:45px;
}
.mdl2_header h2 { color: var(--mdl2-h2); font-size:20px; margin:0 .5em; }

.mdl2_cerrar{
  background:none; border:none; font-size:30px;
  color: var(--mdl2-close);
  cursor:pointer; transition:color .2s; margin-left:auto;
}
.mdl2_cerrar:hover{ color: var(--mdl2-close-h); }

.mdl2_conten p{ text-align:center; font-size:16px; }

.mdl2_btn{
  font-family: colossus, Helvetica, arial;
  background: var(--mdl2-btn-bg);
  color: var(--mdl2-btn-tx);
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:10px 14px; font-size:13.5px;
  border:none; border-radius:8px; cursor:pointer; margin-bottom:.75em;
  transition: background .2s, transform .3s; font-weight:bold;
}
.mdl2_btn:hover{ background: var(--mdl2-btn-bg-h); color: var(--mdl2-btn-tx-h); }
.mdl2_btn:active{ transform: scale(.92); }