/* ============================================================
   cg-confirm — diálogo de confirmación premium (sustituye confirm())
   Institutional Fintech: navy + ámbar, theme-aware. Ver public/js/cg-confirm.js

   jul-2026 — Estas reglas vivían dentro de `copilot-ui.css`, que SOLO carga el
   panel del gestor. El portal del cliente no lo carga, así que allí el diálogo
   habría salido sin estilo (texto plano al final de la página) y por eso sus
   vistas seguían usando el `confirm()` gris del navegador. Al estar en su propia
   hoja, las dos áreas comparten exactamente el mismo diálogo sin duplicar CSS ni
   arrastrar el resto del sistema de diseño del gestor al portal.
   ============================================================ */
.cg-confirm { position: fixed; inset: 0; z-index: 20000; display: none; align-items: center; justify-content: center; padding: 20px; }
.cg-confirm.is-open { display: flex; }
.cg-confirm__backdrop { position: absolute; inset: 0; background: rgba(12, 18, 34, 0.55); backdrop-filter: blur(2px); animation: cgConfirmFade .16s ease; }
.cg-confirm__dialog {
    position: relative; width: 100%; max-width: 420px; background: #ffffff; color: #1a2332;
    border-radius: 16px; padding: 28px 26px 22px; text-align: center;
    box-shadow: 0 24px 60px rgba(12, 18, 34, 0.28); animation: cgConfirmPop .18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.cg-confirm__icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: rgba(232, 168, 56, 0.14); color: #c0801a;
}
/* La variante peligrosa (eliminar, incobrable…) también tiñe el icono: el color
   del botón por sí solo se ve tarde, cuando el gestor ya está leyendo el texto. */
.cg-confirm--danger .cg-confirm__icon { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.cg-confirm__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; font-family: 'Instrument Serif', Georgia, serif; letter-spacing: .2px; }
.cg-confirm__message { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: #64748b; white-space: pre-line; }
/* Campo de texto de los avisos que piden un dato (window.cgPrompt): sustituye al
   prompt() gris del navegador, que no se puede etiquetar ni validar. */
.cg-confirm__input {
    width: 100%; margin: 0 0 18px; padding: 10px 12px; font-size: 14px; font-family: inherit;
    color: #1a2332; background: #ffffff; border: 1px solid #d8e0ea; border-radius: 9px; outline: none;
}
.cg-confirm__input:focus { border-color: #e8a838; box-shadow: 0 0 0 3px rgba(232, 168, 56, .18); }
.cg-confirm__actions { display: flex; gap: 10px; justify-content: center; }
.cg-confirm__btn {
    flex: 1; padding: 11px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: filter .12s ease, background .12s ease;
}
.cg-confirm__cancel { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.cg-confirm__cancel:hover { background: #e7edf4; }
.cg-confirm__btn--primary { background: #e8a838; color: #0c1222; }
.cg-confirm__btn--primary:hover { filter: brightness(1.05); }
.cg-confirm__btn--danger { background: #dc2626; color: #ffffff; }
.cg-confirm__btn--danger:hover { filter: brightness(1.06); }
.cg-confirm__btn:focus-visible { outline: 2px solid #0c1222; outline-offset: 2px; }
@keyframes cgConfirmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cgConfirmPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-color-scheme: dark) {
    .cg-confirm__dialog { background: #141b2d; color: #e8edf5; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
    .cg-confirm__message { color: #94a3b8; }
    .cg-confirm__cancel { background: #1e2740; color: #cbd5e1; border-color: #2b3652; }
    .cg-confirm__cancel:hover { background: #263150; }
}
:root[data-theme="dark"] .cg-confirm__dialog { background: #141b2d; color: #e8edf5; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .cg-confirm__message { color: #94a3b8; }
:root[data-theme="dark"] .cg-confirm__cancel { background: #1e2740; color: #cbd5e1; border-color: #2b3652; }
:root[data-theme="light"] .cg-confirm__dialog { background: #ffffff; color: #1a2332; }
@media (prefers-color-scheme: dark) {
    .cg-confirm__input { background: #0f1626; color: #e8edf5; border-color: #2b3652; }
}
:root[data-theme="dark"] .cg-confirm__input { background: #0f1626; color: #e8edf5; border-color: #2b3652; }
@media (prefers-reduced-motion: reduce) {
    .cg-confirm__backdrop, .cg-confirm__dialog { animation: none; }
}