/* =========================================================================
   Modal de confirmación (confirmDialog en common.js). Reemplaza al confirm()
   del navegador. Colores propios: la página de lección no carga shell.css.
   ========================================================================= */
.cq-dialog{
  border:0;padding:0;border-radius:20px;width:min(400px, calc(100vw - 32px));
  background:#fff;color:#172033;box-shadow:0 24px 60px rgba(23,32,51,.28);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.cq-dialog::backdrop{background:rgba(23,32,51,.45)}
.cq-dialog[open]{animation:cq-dialog-in .16s ease-out}
.cq-dialog[open]::backdrop{animation:cq-backdrop-in .16s ease-out}
@keyframes cq-dialog-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cq-backdrop-in{from{opacity:0}to{opacity:1}}

.cq-dialog-body{padding:26px 24px 8px;text-align:center}
.cq-dialog-icon{font-size:40px;line-height:1;margin-bottom:12px}
.cq-dialog-title{margin:0 0 8px;font-size:19px;font-weight:800}
.cq-dialog-text{margin:0;color:#667085;font-size:14px;line-height:1.5}

.cq-dialog-actions{display:flex;gap:10px;padding:18px 24px 22px}
.cq-dialog-actions button{
  flex:1;border:0;border-radius:25px;padding:12px 16px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;
  background:#008939;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.cq-dialog-actions button:hover{filter:brightness(1.06)}
.cq-dialog-actions button:focus-visible{outline:3px solid #19b5fe;outline-offset:2px}
.cq-dialog-actions .cq-cancel{background:#fff;color:#334155;border:1.5px solid #dbe1ec;box-shadow:none}
.cq-dialog-actions .cq-danger{background:#ff3340}

@media (prefers-reduced-motion:reduce){
  .cq-dialog[open],.cq-dialog[open]::backdrop{animation:none}
}