/* Dialogos de confirmacion y de entrada, y avisos flotantes. */

/* ===================================================================
   Diálogos y avisos flotantes propios
   Reemplazan alert() / confirm() / prompt(), que el navegador pinta a
   su manera y rompen el tablero. Son los mismos tokens de color, se
   manejan con teclado y devuelven una promesa.
   =================================================================== */
.velo-dialogo{position:fixed;inset:0;z-index:100;background:var(--velo);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:velo-entra .14s ease-out}
.dialogo{background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  width:100%;max-width:420px;padding:22px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.4);
  animation:dialogo-entra .18s cubic-bezier(.2,.8,.2,1)}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}
@keyframes dialogo-entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.dialogo .emblema{width:38px;height:38px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;margin-bottom:13px}
.dialogo .emblema.pregunta{background:var(--marca-suave);color:var(--marca)}
.dialogo .emblema.riesgo{background:var(--callado-suave);color:var(--callado)}
.dialogo h2{font-size:17px;font-weight:600;letter-spacing:-.015em}
.dialogo p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--tinta-2)}
.dialogo .campo{margin-top:16px}
.dialogo .con-boton{display:flex;gap:8px}
.dialogo .con-boton input{flex:1;min-width:0}
.dialogo .error{margin-top:8px;font-size:13px;color:var(--callado)}
.dialogo-botones{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
@media(max-width:460px){
  .dialogo-botones{flex-direction:column-reverse}
  .dialogo-botones .btn{width:100%}
}

#flotantes{position:fixed;z-index:110;right:16px;bottom:16px;
  display:flex;flex-direction:column-reverse;gap:9px;max-width:min(380px,calc(100vw - 32px))}
.flotante{display:flex;align-items:flex-start;gap:9px;
  background:var(--panel);border:1px solid var(--linea);border-left:3px solid var(--nunca);
  border-radius:9px;padding:11px 12px;font-size:13.5px;line-height:1.45;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
  animation:flotante-entra .2s cubic-bezier(.2,.8,.2,1)}
.flotante.se-va{animation:flotante-sale .18s ease-in forwards}
@keyframes flotante-entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes flotante-sale{to{opacity:0;transform:translateX(16px)}}
.flotante.ok{border-left-color:var(--al-dia)}
.flotante.ok > svg{color:var(--al-dia)}
.flotante.mal{border-left-color:var(--callado)}
.flotante.mal > svg{color:var(--callado)}
.flotante.ambar{border-left-color:var(--demorado)}
.flotante.ambar > svg{color:var(--demorado)}
.flotante.info{border-left-color:var(--marca)}
.flotante.info > svg{color:var(--marca)}
.flotante > svg{margin-top:1px;flex:none}
.flotante .texto{flex:1;min-width:0}
.flotante .cerrar{flex:none;width:20px;height:20px;border-radius:4px;color:var(--tinta-3);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.flotante .cerrar:hover{background:var(--panel-2);color:var(--tinta)}
@media(max-width:560px){ #flotantes{right:12px;left:12px;bottom:12px;max-width:none} }