/* ============================================================ drawers.css — estilos del sistema de drawers y del LOGIN/INICIO Extraído de app/ui/drawers.js (bloque drawerStyles) — Fase 1 limpieza. Cargar SIEMPRE al final de los del (gana por cascada a las copias en main.css/responsive.css, igual que antes el bloque inyectado). NO contiene los workarounds JS inline (:focus/.selected con transition:none). ============================================================ */ .drawer-overlay { position: fixed; inset: 0; /* Atenuación suave (era 0.7 = muy oscuro para liquid glass). El efecto lo da el blur, no el negro. */ background: rgba(0, 0, 0, var(--fr-overlay-op, 0.32)); backdrop-filter: blur(var(--fr-overlay-blur, 6px)); -webkit-backdrop-filter: blur(var(--fr-overlay-blur, 6px)); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .drawer-overlay.active { opacity: 1; pointer-events: auto; } /* Login: pantalla completa con aurora → overlay casi transparente (deja ver la aurora a la derecha, igual que el fondo del portal del paciente), no el velo negro 0.7 de los demás drawers. */ .drawer-overlay.login-mode { background: rgba(0, 0, 0, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } .drawer { position: fixed; top: 0; bottom: 0; /* Esmerilado tipo cmd+k: usa --glass-bg (lo controla el slider de Opacidad) + blur fuerte (--glass-blur del slider de Desenfoque + refuerzo). Así el drawer se vuelve vidrio esmerilado de verdad y reacciona a tus dos sliders. (El #drawer-login lo sobre-escribe a transparente.) */ background: rgba(var(--fr-drawer-rgb, var(--glass-bg-rgb, 20,20,30)), var(--fr-drawer-op, var(--glass-opacity))); backdrop-filter: blur(calc(var(--glass-blur, 16px) + var(--fr-drawer-blur, 30px))); -webkit-backdrop-filter: blur(calc(var(--glass-blur, 16px) + var(--fr-drawer-blur, 30px))); border: 1px solid var(--glass-border); z-index: 1001; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,0.5); } /* Drawer de inicio: liquid glass — cristal claro translúcido (deja ver el fondo) con blur. */ #drawer-login { background: rgba(18, 22, 38, 0); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); border-color: var(--glass-border, rgba(255,255,255,0.16)); } /* tarjetas de usuario en cristal claro (no oscuras) — como el portal del paciente */ #drawer-login .login-card { background: var(--surface-2, rgba(255,255,255,0.05)) !important; border-color: var(--glass-border, rgba(255,255,255,0.12)) !important; } /* liquid glass en campos, tarjetas y botón (guía: prefs de u001 — blur fuerte, cristal claro) */ #drawer-login .form-input, #drawer-login .login-card, #drawer-login .login-card-pass-input, #drawer-login form button[type="submit"] { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* (1) sin la palabra "Iniciar Sesión" · header colapsado para subir el logo */ #drawer-login .drawer-title { display: none; } #drawer-login .drawer-header { display: block; padding: 0; min-height: 0; border-bottom: none; } /* (3) campos casi al ras del cristal (sin gradiente que resalte) */ #drawer-login .form-input { background: var(--input-bg, rgba(255,255,255,0.055)); border: 1px solid var(--glass-border, rgba(255,255,255,0.12)); } /* Foco: SOLO color del logo (teal #00afc2), sin glow ni relleno. !important para ganarle al tema. */ #drawer-login .form-input:focus { border-color: #00afc2 !important; background: var(--input-bg, rgba(255,255,255,0.055)) !important; box-shadow: none !important; } /* El morado/lila venía del :focus-visible global (outline var(--accent) #c084fc + box-shadow morado), que en los inputs salta hasta al hacer clic. Lo forzamos al teal del logo y sin glow en todo el login. */ #drawer-login :focus-visible { outline-color: #00afc2 !important; box-shadow: none !important; } /* (6) placeholder chico y fino; el texto escrito mantiene su tamaño */ #drawer-login .form-input::placeholder { font-size: 0.82rem; font-weight: 400; opacity: .5; } /* (7) botón Iniciar sesión = cristal líquido */ #drawer-login form button[type="submit"] { background: var(--btn-ghost-bg, rgba(255,255,255,0.10)) !important; border: 1px solid var(--glass-border, rgba(255,255,255,0.22)) !important; color: var(--text-main, #fff) !important; box-shadow: 0 2px 14px rgba(0,0,0,0.18) !important; font-weight: 500 !important; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transition: background .25s, border-color .25s, transform .15s; } #drawer-login form button[type="submit"]:hover { background: var(--btn-ghost-hover, rgba(255,255,255,0.17)) !important; border-color: var(--glass-border, rgba(255,255,255,0.34)) !important; } #drawer-login form button[type="submit"]:active { transform: scale(0.985); } /* (4) Modo foco: al elegir tarjeta, la tarjeta seleccionada crece y se centra ENCIMA del password (esto se aplica por JS con transiciones inline), se oculta el campo de usuario (su valor se sigue usando) y se colapsan las demás. Los campos y el enlace de passkey quedan SIEMPRE en su sitio. */ #login-stack.focus-card .login-or, #login-stack.focus-fields #login-cards { display: none !important; } #login-stack.focus-card .login-username-row { display: none; } #login-stack.focus-card .login-main-fields { animation: lcFadeUp .36s ease both; } @keyframes lcFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes lcPop { from { opacity: .35; } to { opacity: 1; } } [data-theme="light"] .drawer { background: var(--surface-bg, rgba(242, 244, 255, 0.97)); color: var(--text-main, #0d0d1a); border-color: rgba(0,0,0,0.1); box-shadow: 0 0 40px rgba(0,0,0,0.18); } [data-theme="light"] .drawer-title { color: var(--primary); } [data-theme="light"] .drawer-close { color: rgba(0,0,0,0.45); } [data-theme="light"] .drawer-close:hover { background: rgba(0,0,0,0.07); color: #000; } [data-theme="light"] .drawer-header { border-bottom-color: rgba(0,0,0,0.1); } [data-theme="light"] .search-result-item, [data-theme="light"] .historic-item { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .search-result-item:hover, [data-theme="light"] .historic-item:hover { background: rgba(0,0,0,0.04); } [data-theme="glass"] .drawer { background: rgba(var(--fr-drawer-rgb, 10,10,28), var(--fr-drawer-op, var(--glass-opacity, 0.82))); backdrop-filter: blur(calc(var(--glass-blur, 30px) + var(--fr-drawer-blur, 30px))); -webkit-backdrop-filter: blur(calc(var(--glass-blur, 30px) + var(--fr-drawer-blur, 30px))); } .drawer-right { right: 0; transform: translateX(100%); border-left: 2px solid var(--primary); } .drawer-left { left: 0; border-right: 2px solid var(--primary); } .drawer.active { transform: translateX(0); } .drawer-header { padding: 20px; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; } .drawer-title { margin: 0; font-size: 1.2rem; color: var(--primary); } .drawer-close { background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: all 0.2s; } .drawer-close:hover { background: var(--glass-bg, rgba(255, 255, 255, 0.1)); color: var(--text-main, white); } .drawer-body { flex: 1; overflow-y: auto; } .search-result-item, .historic-item { padding: 15px; border-bottom: 1px solid var(--glass-border); cursor: pointer; transition: background 0.2s; } .search-result-item:hover, .historic-item:hover { background: var(--glass-bg, rgba(255, 255, 255, 0.05)); } .historic-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .historic-item-id { font-size: 0.75rem; color: var(--primary); background: rgba(56, 189, 248, 0.15); padding: 2px 8px; border-radius: 4px; } .historic-item-info { font-size: 0.85rem; color: var(--text-muted); } .historic-delete-btn { border: 1px solid rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); color: #ef4444; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .historic-delete-btn:hover { background: rgba(239, 68, 68, 0.22); }