/* ========================================================================== Modales — estilo unico del sistema -------------------------------------------------------------------------- Se carga DESPUES de style.css en layout.blade.php y layoutperfil.blade.php. Ese orden importa: style.css trae el look viejo del landing y pisa .modal-content (fondo #e2d7d5, radius 30px) y .btn-close (circulo negro con margen negativo -50px) de forma global y con !important. Todo lo que aca lleva !important es exactamente eso: revertir esas reglas, no capricho. Uso: agregar la clase `nk-modal` al div .modal fade

Las variables se declaran sobre .nk-modal y no en :root porque los modales de Bootstrap se mueven al final del , fuera del contenedor de pagina donde cada vista define su paleta. Sin esto heredarian del body y quedarian sin color. Variantes: .nk-modal-auth login / registro / recuperar clave (landing publico) .nk-modal-dark header con gradiente oscuro (modal de prompt de la API) ========================================================================== */ .nk-modal { --accent: #EC3D4E; --accent-soft: rgba(236,61,78,.10); --ink: #0d1c25; --ink-soft: #64727a; --ink-faint: #9aa6ac; --line: rgba(13,28,37,.08); /* Superficies: las usan chips y controles heredados de cada pantalla, que fuera del contenedor de pagina se quedarian sin valor. */ --panel: rgba(255,255,255,.58); --panel2: rgba(255,255,255,.82); --solid: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); } /* ── Contenedor ── */ .nk-modal .modal-content { border: 1px solid var(--line); border-radius: 20px; /* !important: style.css:349 fija #e2d7d5 y radius 30px globalmente */ background: rgba(255,255,255,.94) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 60px rgba(13,28,37,.18); color: var(--ink); } .nk-modal .modal-header { border-bottom: none; padding: 22px 26px 0; } .nk-modal .modal-body { padding: 18px 26px 24px; } .nk-modal .modal-footer { border-top: 1px solid var(--line); padding: 14px 26px; gap: 8px; } .nk-modal .modal-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } /* Header con separador, para modales de formulario largo */ .nk-modal-split .modal-header { border-bottom: 1px solid var(--line); padding: 18px 26px 14px; } /* ── Boton de cierre ── style.css:427 lo convierte en un circulo negro de 2rem colgando 50px hacia arriba. Hay que anular posicion, margen, padding y fondo, no solo repintar. */ .nk-modal .btn-close { position: static; flex: 0 0 auto; width: 30px; height: 30px; margin: 0 0 0 auto !important; left: auto !important; right: auto !important; padding: 0 !important; border: none; border-radius: 9px; background-color: rgba(13,28,37,.05) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d1c25'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 10px; font-size: 0; line-height: 0; color: transparent; opacity: .65; transition: opacity .14s, background-color .14s; } .nk-modal .btn-close:hover { opacity: 1; background-color: var(--accent-soft) !important; } .nk-modal .btn-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* El markup viejo mete un