/* ═══════ 💬 EL DIÁLOGO DE DIDACTIO (26/09/2026) ═══════ Jaume, 26/09/2026, viendo el de «¿No recuerdas tus datos?» del login: «el texto en negro y negrita del título me gusta, este estilo me gusta mucho, para aplicar en muchos diálogos existentes, con botones en naranja, rosa y azul, los colores de Didactio». 📌 SE PONE A PROPÓSITO, NUNCA SOLO. Todo cuelga de la clase `dlg-d` en el `
`: un diálogo que no la lleve se ve exactamente como antes. Así se pasa pantalla a pantalla, mirando cada una (CLAUDE.md: una pantalla, que la mire, y seguir). LAS PIEZAS ⚠️ Los !important son contra main.css, que da a `button` y a `.modal-content` alto, sombra, mayúsculas y 80px de relleno abajo. Sin ellos el botón sale con la forma de la plantilla. */ .modal.dlg-d .modal-content { border-radius:22px; padding:28px 30px 26px !important; box-shadow:0 30px 80px rgba(20,10,80,0.35); overflow-x:hidden; } /* 🧽 LA BARRA DE DESPLAZAMIENTO (Jaume, 26/09/2026, en «Configurar la prueba»: «algo falla en el diálogo, bordes de la derecha y el scroll»). La del navegador, con sus flechas y su canal gris, se pegaba al borde y cortaba las esquinas redondeadas. Ahora es fina, sin flechas ni canal, y se aparta de las esquinas (margin del canal = el radio). 📌 Dos recetas a propósito: Chrome/Edge/Safari usan ::-webkit-scrollbar; Firefox, scrollbar-width. Si se pusiera scrollbar-width también para Chrome, este IGNORARÍA las ::-webkit (desde Chrome 121) y volvería la barra gruesa. */ .modal.dlg-d .modal-content::-webkit-scrollbar { width:10px; } .modal.dlg-d .modal-content::-webkit-scrollbar-button { display:none; height:0; } .modal.dlg-d .modal-content::-webkit-scrollbar-track { background:transparent; margin:22px 0; } .modal.dlg-d .modal-content::-webkit-scrollbar-thumb { background:#d6d0f5; border-radius:10px; border:3px solid #fff; } .modal.dlg-d .modal-content::-webkit-scrollbar-thumb:hover { background:#b9aff0; } @supports not selector(::-webkit-scrollbar) { .modal.dlg-d .modal-content { scrollbar-width:thin; scrollbar-color:#d6d0f5 transparent; } } /* Con pie fijo, el pie llega hasta abajo del todo (se come el relleno de abajo) */ .modal.dlg-d .modal-content:has(.dlg-pie) { padding-bottom:0 !important; } /* ⚠️ Los que llevan un botón redondo flotante DENTRO (guardar, copiar…) necesitaban los 80px de abajo de main.css: sin ellos el botón tapaba el final del contenido (se vio en «Copiar medidas de inclusión», 26/09/2026) */ .modal.dlg-d .modal-content:has(.boton-circulo) { padding-bottom:90px !important; } .modal.dlg-d .modal-content > form { margin-bottom:0 !important; } .dlg-d .dlg-rot { margin:0 0 4px !important; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:#FF6124; text-align:left !important; } .dlg-d .dlg-rot.rosa { color:#E5006D; } .dlg-d .dlg-rot.azul { color:#1900dc; } .dlg-d .dlg-tit { display:flex; align-items:center; gap:10px; margin:0 32px 8px 0 !important; font-size:1.6rem; font-weight:800; color:#14113a !important; line-height:1.2; } .dlg-d .dlg-tit svg { width:24px; height:24px; flex:0 0 auto; } .dlg-d .dlg-apo { margin:0 0 20px !important; color:#5d5b70; font-size:0.95em; line-height:1.55; text-align:left !important; } /* El pie: pegado abajo aunque el contenido haga scroll, con los botones a la derecha */ .dlg-d .dlg-pie { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin:18px -30px 0 !important; padding:16px 30px 22px; background:#fff; border-top:1px solid #eeeaf9; } /* Los botones: altos, redondeados y sin las mayúsculas de la plantilla */ .dlg-d .dlg-btn { display:inline-flex !important; align-items:center; justify-content:center; gap:8px; min-width:130px; height:50px !important; line-height:1.2 !important; padding:0 24px !important; border:0 !important; border-radius:14px !important; font-size:0.95em !important; font-weight:700; letter-spacing:0.02em; text-transform:none !important; cursor:pointer; color:#fff !important; transition:background-color .15s, transform .08s; } .dlg-d .dlg-btn:active { transform:translateY(2px); } .dlg-d .dlg-btn svg { width:18px; height:18px; stroke:currentColor; } .dlg-d .dlg-btn.azul { background:#1900dc !important; box-shadow:0 8px 20px rgba(25,0,220,0.25) !important; } .dlg-d .dlg-btn.azul:hover { background:#1400b0 !important; } .dlg-d .dlg-btn.naranja { background:#FF6124 !important; box-shadow:0 8px 20px rgba(255,97,36,0.28) !important; } .dlg-d .dlg-btn.naranja:hover { background:#e8521a !important; } .dlg-d .dlg-btn.rosa { background:#E5006D !important; box-shadow:0 8px 20px rgba(229,0,109,0.25) !important; } .dlg-d .dlg-btn.rosa:hover { background:#c8005f !important; } .dlg-d .dlg-btn.claro { background:#f1effb !important; color:#1900dc !important; box-shadow:none !important; } .dlg-d .dlg-btn.claro:hover { background:#e6e2fb !important; } /* 🔁 LOS DIÁLOGOS QUE YA EXISTÍAN (26/09/2026). Muchos pintan sus botones con form_generar() —el PHP los escribe al pintar la página, no están en el código del diálogo— y no se les puede poner la clase. Dentro de un `dlg-d`, el botón de enviar sale en azul y el de «Cerrar» o «Cancelar», en claro, como .dlg-btn. Y el título que no lleve .dlg-tit (h2/h3 directos del modal), con el mismo negro. */ .dlg-d .modal-content input[type="submit"]:not(.dlg-btn), .dlg-d .modal-content input[type="button"].primary:not(.dlg-btn) { height:50px !important; line-height:50px !important; padding:0 24px !important; border:0 !important; border-radius:14px !important; font-size:0.95em !important; font-weight:700; letter-spacing:0.02em; text-transform:none !important; background:#1900dc !important; color:#fff !important; box-shadow:0 8px 20px rgba(25,0,220,0.25) !important; } .dlg-d .modal-content input[type="submit"]:not(.dlg-btn):hover, .dlg-d .modal-content input[type="button"].primary:not(.dlg-btn):hover { background:#1400b0 !important; } .dlg-d .modal-content input[type="button"][value="Cerrar"]:not(.dlg-btn), .dlg-d .modal-content input[type="button"][value="Cancelar"]:not(.dlg-btn) { height:50px !important; line-height:50px !important; padding:0 24px !important; border:0 !important; border-radius:14px !important; font-size:0.95em !important; font-weight:700; text-transform:none !important; background:#f1effb !important; color:#1900dc !important; box-shadow:none !important; } /* Y los de form_button_lucide(): `button.button primary` es la acción y `button.button` a secas, Cancelar */ .dlg-d .modal-content button.button.primary:not(.dlg-btn) { height:50px !important; line-height:1.2 !important; padding:0 24px !important; border:0 !important; border-radius:14px !important; font-size:0.95em !important; font-weight:700; text-transform:none !important; letter-spacing:0.02em; background:#1900dc !important; color:#fff !important; box-shadow:0 8px 20px rgba(25,0,220,0.25) !important; } .dlg-d .modal-content button.button.primary:not(.dlg-btn):hover { background:#1400b0 !important; } .dlg-d .modal-content button.button.primary:not(.dlg-btn):disabled { background:#b9b2ee !important; box-shadow:none !important; opacity:1 !important; } .dlg-d .modal-content button.button:not(.primary):not(.dlg-btn) { height:50px !important; line-height:1.2 !important; padding:0 24px !important; border:0 !important; border-radius:14px !important; font-size:0.95em !important; font-weight:700; text-transform:none !important; background:#f1effb !important; color:#1900dc !important; box-shadow:none !important; } .dlg-d .modal-content button.button:not(.primary):not(.dlg-btn):hover { background:#e6e2fb !important; } .dlg-d .modal-content > h2:not(.dlg-tit), .dlg-d .modal-content > h3:not(.dlg-tit) { color:#14113a !important; font-weight:800; } @media (max-width:520px) { .modal.dlg-d .modal-content { padding:22px 18px 0 !important; } .dlg-d .dlg-pie { margin:18px -18px 0 !important; padding:14px 18px 18px; } .dlg-d .dlg-pie .dlg-btn { flex:1 1 0; min-width:0; } .dlg-d .dlg-tit { font-size:1.35rem; } } /* ═══════ ⚠️ Y LOS AVISOS DE CONFIRMAR (duDialog), CON EL MISMO ASPECTO (26/09/2026) ═══════ Jaume, preguntado si pasar al estilo nuevo los «¿Quieres eliminar…?»: «sí». Son 246 llamadas a `new duDialog(…)` por toda la aplicación y NO se tocan: se viste la librería desde aquí, que carga después de duDialog.css. Mismo título negro y en negrita, texto gris, esquinas de 22px y los botones altos: el de aceptar en azul y el otro en claro. 📌 Solo CSS: la librería, sus callbacks y lo que escribe cada pantalla siguen igual. */ .du-dialog .dlg-wrapper { border-radius:22px !important; box-shadow:0 30px 80px rgba(20,10,80,0.35) !important; overflow:hidden; } .du-dialog .dlg-header { font-family:'ClashDisplay', 'Geomanist', sans-serif !important; font-size:1.45rem !important; font-weight:800 !important; color:#14113a !important; letter-spacing:0 !important; line-height:1.25 !important; padding:24px 52px 8px 26px !important; } .du-dialog .dlg-cerrar { top:18px !important; right:20px !important; color:#bbb !important; } .du-dialog .dlg-content { color:#5d5b70 !important; font-size:15.5px !important; line-height:1.55 !important; letter-spacing:0 !important; padding:4px 26px 20px !important; } /* 🔔 EL AVISO SIN TÍTULO (showAlert y los duDialog de solo mensaje), 27/09/2026 (Jaume: «los bordes demasiado redondeados, y no está alineado verticalmente, tiene demasiado aire en la parte superior»). El de título + pie con 22px de radio y este mismo margen es el que Jaume aprobó tal cual; aquí la caja es mucho más pequeña —un icono y una línea— y se nota desproporcionada: radio más chico (14px, el mismo de los botones) y el margen de arriba igualado al relleno de abajo (20px), para que el texto quede centrado y no descolgado hacia abajo. */ .du-dialog.dlg--no-title .dlg-wrapper { border-radius:14px !important; } .du-dialog.dlg--no-title .dlg-content { margin-top:16px !important; } .du-dialog .dlg-actions { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; padding:16px 26px 22px !important; border-top:1px solid #eeeaf9; } .du-dialog .dlg-action { height:48px; line-height:48px !important; padding:0 24px !important; min-width:110px; border-radius:14px !important; border:0 !important; font-size:14.5px !important; letter-spacing:0.02em !important; text-transform:none !important; } .du-dialog .dlg-action + .dlg-action { margin-left:0 !important; } .du-dialog .dlg-action.ok-action { background:#1900dc !important; color:#fff !important; box-shadow:0 8px 20px rgba(25,0,220,0.25) !important; } .du-dialog .dlg-action.ok-action:hover, .du-dialog .dlg-action.ok-action:focus { background:#1400b0 !important; } .du-dialog .dlg-action.cancel-action { background:#f1effb !important; color:#1900dc !important; box-shadow:none !important; } .du-dialog .dlg-action.cancel-action:hover, .du-dialog .dlg-action.cancel-action:focus { background:#e6e2fb !important; } @media (max-width:480px) { .du-dialog .dlg-header { font-size:1.2rem !important; padding:20px 46px 6px 20px !important; } .du-dialog .dlg-content { padding:4px 20px 16px !important; } .du-dialog .dlg-actions { padding:14px 20px 18px !important; } .du-dialog .dlg-action { flex:1 1 0; min-width:0; padding:0 12px !important; } } /* ═══════ 🍞 EL TOAST (02/10/2026) ═══════ Avisos que llegan de un endpoint (page_show_alert → showToast, assets/scripts.js). Abajo a la IZQUIERDA (el mismo 02/10, Jaume: a la derecha tapaba los botones fijos de abajo), con una barra que se vacía durante el tiempo en pantalla; el ratón encima la detiene. En móvil, a todo el ancho. Texto y negrita en negro; sin azul ni franja: fondo verde suave si va bien, rojo suave si falla (Jaume). z-index por encima del banner de licencia (10001) y por debajo de los diálogos (999999). */ #toastCont { position:fixed; left:20px; bottom:44px; z-index:200000; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 24px)); pointer-events:none; } .toast-d { position:relative; overflow:hidden; pointer-events:auto; background:#fff; color:#000; border-radius:12px; border:1px solid #cfcfcf; box-shadow:0 14px 34px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18); animation:toastEntra .28s ease-out; } .toast-d.toast-error { background:#fbdcdc; border-color:#eba3a3; } .toast-d.toast-aviso { background:#ffefc2; border-color:#e8c766; } .toast-d.toast-ok { background:#d4efdd; border-color:#93cfa8; } .toast-d.toast-info { background:#e9e9e9; border-color:#c4c4c4; } .toast-d .toast-txt { padding:14px 40px 16px 16px; font-size:15px; line-height:1.4; overflow-wrap:anywhere; max-height:40vh; overflow-y:auto; } .toast-d .toast-txt b, .toast-d .toast-txt strong { color:#000; } .toast-d .toast-x { position:absolute; top:4px; right:6px; width:28px; height:28px; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; color:#666 !important; font-size:22px; line-height:26px; cursor:pointer; text-transform:none !important; } .toast-d .toast-x:hover { color:#000 !important; } .toast-d .toast-barra { position:absolute; left:0; bottom:0; height:4px; width:100%; background:#9a9a9a; transform-origin:left center; animation-name:toastBarra; animation-timing-function:linear; animation-fill-mode:forwards; } .toast-d.toast-error .toast-barra { background:#d93025; } .toast-d.toast-aviso .toast-barra { background:#feb700; } .toast-d.toast-ok .toast-barra { background:#1f9d55; } .toast-d:hover .toast-barra { animation-play-state:paused; } .toast-d.toast-sale { opacity:0; transform:translateY(24px); transition:opacity .25s, transform .25s; } @keyframes toastEntra { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } } @keyframes toastBarra { from { transform:scaleX(1); } to { transform:scaleX(0); } } @media (max-width:480px) { #toastCont { left:12px; bottom:40px; } } @media (prefers-reduced-motion: reduce) { .toast-d { animation:none; } .toast-d.toast-sale { transition:none; } }