/* =====================================================================
   UI Dialog (Modal unificado) — estilo Aulas Móviles / Chromebooks

   Uso:
   - Incluye este CSS en TODOS los módulos/páginas.
   - El JS (ui-dialog.js) genera el HTML del modal y setea variables CSS
     para rojo/verde/azul según el tipo.
   ===================================================================== */

.am-dialog-backdrop{
  position:fixed;inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(2px);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  animation: am-backdrop-in 200ms ease forwards;
}

@keyframes am-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.am-dialog{
  width:min(560px,94vw);
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(2,6,23,.25);
  overflow:hidden;
  font-family:inherit;
  animation: am-dialog-in 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes am-dialog-in {
  from { opacity: 0; transform: scale(0.93) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Accent (default: blue). Overridden per-dialog using CSS variables. */
.am-dialog-top{
  height:10px;
  background:linear-gradient(90deg,var(--am-accent-2,#60a5fa),var(--am-accent,#3b82f6));
}

.am-dialog-body{padding:26px 26px 20px;text-align:center}

.am-dialog-icon{
  width:82px;height:82px;border-radius:999px;margin:0 auto 14px;
  display:grid;place-items:center;
  background:var(--am-accent-soft,rgba(59,130,246,.12));
  color:var(--am-accent,#3b82f6);
}
.am-dialog-icon svg{width:42px;height:42px}

.am-dialog-title{font-size:34px;font-weight:800;color:#0f172a;margin:0 0 8px}
.am-dialog-text{font-size:18px;line-height:1.45;color:#475569;margin:0;white-space:pre-line}

.am-dialog-html{font-size:16px;line-height:1.45;color:#475569;margin:0;text-align:left}
.am-dialog-html .am-kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;align-items:start;margin-top:14px}
.am-dialog-html .am-k{color:#64748b;font-weight:800}
.am-dialog-html .am-v{color:#0f172a;font-weight:600}
.am-dialog-html .am-warn{margin-top:14px;color:#b91c1c;font-weight:800}

.am-dialog-actions{display:flex;gap:14px;justify-content:center;padding:0 26px 24px}

.am-btn{
  min-width:160px;
  padding:14px 18px;
  border-radius:16px;
  border:0;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.am-btn-secondary{background:#f1f5f9;color:#334155}
.am-btn-primary{background:var(--am-accent,#3b82f6);color:#fff}
.am-btn-primary:hover{background:var(--am-accent-dark,#2563eb)}
.am-btn-secondary:hover{filter:brightness(.98)}
.am-btn:active{transform:scale(0.97);transition:transform 60ms ease}

/* ===== Confirmación de liberación centrada ===== */
.am-confirm-item { text-align: center; padding: 12px 0; }
.am-confirm-title { font-size: 18px; font-weight: 800; color: #0f172a; }
.am-confirm-sub { margin-top: 4px; font-size: 15px; font-weight: 600; color: #334155; }
.am-confirm-note { margin-top: 6px; font-size: 14px; color: #64748b; font-style: italic; }
.am-dialog-html .am-warn { text-align: center; }

@media (max-width: 520px){
  .am-dialog-actions{flex-direction:column}
  .am-btn{width:100%}
  .am-dialog-title{font-size:28px}
  .am-dialog-text{font-size:16px}
}