/* Diálogos de la Plataforma — lo que TE DETIENE (24/08/2026)
   ═══════════════════════════════════════════════════════════════════════

   POR QUE EXISTE
   --------------
   El panel usaba `alert()`, `confirm()` y `prompt()` del navegador. El peor
   de los tres estaba en el cambio de plan, y se veía así:

       app.sololatech.com dice
       ¿A qué plan quieres cambiar?
       1) Médico Clínica — $20/mes
       2) Clínico Básico — $29/mes
       …
       Escribe el número:  [____]

   Tres problemas, y ninguno es estético:

     · Se lee como un error del navegador, no como parte del producto. Pedir
       un número en una caja gris del sistema, para una operación que COBRA
       dinero, es exactamente donde un cliente se detiene.
     · Se puede marcar «no volver a mostrar diálogos» y dejar de ver avisos
       que importan sin enterarse.
     · Escribir «2» no es elegir un plan. Un número mal tecleado cambia la
       suscripción a otra cosa, y el diálogo no enseña qué incluye ninguna.

   El sistema de inventario ya había resuelto esto en su lado (T-09b,
   05/08/2026) con `css/dialogo.css` y `js/dialogo.js`. Esto es lo mismo,
   traído a la Plataforma y con la paleta OSCURA de este panel — el del
   inventario es claro, y copiarlo tal cual habría metido un cuadro blanco
   en una pantalla oscura, que es otra forma de parecer un cuadro ajeno.

   DOS FAMILIAS DISTINTAS, A PROPOSITO
   -----------------------------------
     · Un AVISO informa mientras sigues trabajando: esquina, se va solo.
     · Un DIALOGO te detiene porque tiene que detenerte: vas a cambiar de
       plan, o a cancelar. Centro de la pantalla, fondo velado, y no sigue
       hasta que respondes.

   Si se parecieran, el usuario aprendería a descartar los dos igual — y el
   que importa es justo el que no se debe descartar sin leer. */

.dlg-velo {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(4px);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dlg-vela .16s ease-out;
}

.dlg {
  background: var(--elev, #131d2e);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow, 0 18px 50px -12px rgba(0, 0, 0, .6));
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 28px 22px;
  text-align: center;
  color: var(--text, #e6edf6);
  animation: dlg-entra .2s cubic-bezier(.2, .9, .3, 1);
}

@keyframes dlg-vela { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-entra {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg-velo, .dlg { animation: none; }
}

/* El emblema redondo es lo que hace que se lea como diálogo y no como
   aviso, incluso antes de leer una palabra. */
.dlg__emblema {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlg__emblema svg { width: 26px; height: 26px; }

.dlg__titulo {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading, #fff);
  line-height: 1.3;
}

.dlg__detalle {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #93a3b8);
  white-space: pre-line;   /* los mensajes traen saltos de línea propios */
}

/* ── Lista de opciones (sustituye al prompt numerado) ────────────────── */
.dlg__opciones {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.dlg__opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px;
  background: var(--card-bg, rgba(255, 255, 255, .035));
  cursor: pointer;
}
.dlg__opcion:hover { background: var(--card-hi, rgba(255, 255, 255, .06)); }

/* El radio nativo no se puede pintar de forma fiable entre navegadores y
   aquí importa que se vea cuál está elegido ANTES de pulsar el botón que
   cobra. Se oculta accesiblemente y se dibuja la marca al lado. */
.dlg__opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.dlg__marca {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--faint, #76869d);
  position: relative;
}
.dlg__opcion input:checked + .dlg__marca {
  border-color: var(--accent, #2BC0D3);
}
.dlg__opcion input:checked + .dlg__marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent, #2BC0D3);
}
.dlg__opcion input:focus-visible + .dlg__marca {
  outline: 3px solid var(--accent, #2BC0D3);
  outline-offset: 3px;
}
.dlg__opcion:has(input:checked) {
  border-color: var(--accent, #2BC0D3);
  background: var(--grad-soft, rgba(43, 192, 211, .14));
}

.dlg__opcion-texto { flex: 1 1 auto; min-width: 0; }
.dlg__opcion-nombre {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--heading, #fff);
}
.dlg__opcion-detalle {
  font-size: 13px;
  color: var(--muted, #93a3b8);
  margin-top: 2px;
}
.dlg__opcion-precio {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent, #2BC0D3);
  white-space: nowrap;
}

/* ── Campo de texto (sustituye al prompt de texto libre) ─────────────── */
.dlg__campo {
  margin-top: 18px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  background: var(--card-bg, rgba(255, 255, 255, .035));
  color: var(--text, #e6edf6);
  font-family: inherit;
  font-size: 15px;
}
.dlg__campo:focus {
  outline: none;
  border-color: var(--accent, #2BC0D3);
  box-shadow: 0 0 0 3px rgba(43, 192, 211, .2);
}

.dlg__aviso {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #93a3b8);
  text-align: left;
  border-left: 2px solid var(--border, rgba(255, 255, 255, .12));
  padding-left: 12px;
  white-space: pre-line;
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.dlg__botones {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dlg__boton {
  flex: 1 1 0;
  max-width: 200px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.dlg__boton:disabled { opacity: .5; cursor: not-allowed; }
.dlg__boton:focus-visible {
  outline: 3px solid var(--accent, #2BC0D3);
  outline-offset: 2px;
}

.dlg__boton--secundario {
  background: transparent;
  border-color: var(--border, rgba(255, 255, 255, .14));
  color: var(--text, #e6edf6);
}
.dlg__boton--secundario:hover { background: var(--card-hi, rgba(255, 255, 255, .06)); }

/* El principal usa el color de marca: un diálogo se LEE, no se reconoce de
   un vistazo, así que aquí el color no carga significado. */
.dlg__boton--principal {
  background: var(--grad, linear-gradient(135deg, #2BC0D3, #12A5B8));
  color: #04121a;
}
.dlg__boton--principal:hover { filter: brightness(1.08); }

/* El destructivo NO. Ese rojo sí significa algo y no se negocia con la
   marca: es lo último que se ve antes de algo que no vuelve. */
.dlg__boton--peligro { background: #dc2626; color: #fff; }
.dlg__boton--peligro:hover { background: #b91c1c; }

.dlg--info    .dlg__emblema { background: rgba(43, 192, 211, .14); color: var(--accent, #2BC0D3); }
.dlg--exito   .dlg__emblema { background: rgba(34, 197, 94, .14);  color: #4ade80; }
.dlg--peligro .dlg__emblema { background: rgba(220, 38, 38, .16);  color: #f87171; }
.dlg--sesion  .dlg__emblema { background: rgba(255, 255, 255, .06); color: var(--muted, #93a3b8); }

@media (max-width: 480px) {
  .dlg { padding: 24px 20px 18px; }
  .dlg__botones { flex-direction: column-reverse; }
  .dlg__boton { max-width: none; }
}