/* ============================================================================
   CONFIRMAR UN APAGADO · el aspecto de assets/confirmar.js (CEO, 23 oct 2026)
   Copia del <dialog> del Dashboard (.dialogo de bot-dashboard/assets/
   dashboard.css): fondo oscuro, la caja biselada y los botones abajo a la
   derecha; en el móvil, apilados a lo ancho con la acción arriba.
   Muestrario, «Componentes 13».
   ========================================================================== */
.cfm{margin:auto;padding:0;border:0;background:transparent;color:var(--texto-1);width:min(30rem,calc(100% - 2rem));max-width:none;overflow:visible}
.cfm::backdrop{background:rgba(23,17,13,.82)}
.cfm-in{padding:var(--esp-caja, 1.75rem);display:flex;flex-direction:column;gap:var(--esp-3, .75rem);--caja-fondo:var(--surface);margin:0}
.cfm-ante{margin:0}
/* La pregunta: la de U.confirmar (.dialogo-pregunta), en MAYÚSCULAS. La
   familia la pone el token por escalón: Dharma M 800 en la escala grande
   (Administración, 34 → 42 px) y Poppins 600 en la compacta (Dashboard,
   20 px). El corte de 32 px se respeta solo. */
.cfm-titulo{margin:0;font-family:var(--fuente-subtitulo);font-weight:800;letter-spacing:calc(.01em + var(--tracking-subtitulo));
  font-size:var(--tipo-subtitulo);line-height:.95;text-transform:uppercase;color:var(--texto-1);overflow-wrap:anywhere}
:root.escala-compacta .cfm-titulo{font-weight:var(--peso-titular);line-height:var(--interlinea-titular)}
.cfm-texto{margin:0;font-size:var(--tipo-cuerpo);color:var(--texto-2)}
.cfm-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-3)}
.cfm-botones{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-end;gap:var(--esp-3, .75rem);margin-top:var(--esp-3, .75rem)}
/* La acción de apagar: fantasma con el filo y el texto amarillos (como
   «Apagar el bot» de Servidores). El amarillo lleno queda para encender. */
.cfm-si{--filo-color:var(--borde-vivo, var(--yellow));color:var(--yellow)}

/* EN TRUFAS, EL ISOTIPO ENCIMA (CEO, 23 oct 2026): centrado, y con él la
   pregunta y el texto también centrados. Una medida fija (alto) y la otra
   auto: la marca nunca se deforma. */
.cfm-logo{display:block;width:auto;height:4.5rem;margin:0 auto var(--esp-2, .5rem)}
.cfm-con-logo .cfm-ante,.cfm-con-logo .cfm-titulo,.cfm-con-logo .cfm-texto,.cfm-con-logo .cfm-nota{text-align:center}
.cfm-con-logo .cfm-botones{justify-content:center}

@media (prefers-reduced-motion:no-preference){
  .cfm[open] .cfm-in{animation:cfm-aparecer .35s var(--curva, cubic-bezier(.22,1,.36,1))}
  @keyframes cfm-aparecer{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .cfm-in{padding:var(--esp-rejilla, 1.25rem)}
  .cfm-logo{height:3.75rem}
  .cfm-botones{flex-direction:column-reverse;align-items:stretch}
  .cfm-botones .btn{width:100%}
}