/* ============================================ DENTAL CARE — Sistema Clínico Tema: Clínico Elegante | Ivory & Deep Teal ============================================ */ :root { --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #F0EDE7; --sidebar-bg: #0D2B2B; --sidebar-hover: #163D3D; --accent: #0F7A85; --accent-light:#EAF5F6; --accent2: #C0785A; --accent3: #4A7FB5; --accent4: #D4A843; --danger: #C0392B; --text: #1C2626; --text-muted: #7A8A8A; --text-light: #B0BABA; --border: #DDD9D0; --shadow: 0 2px 12px rgba(0,0,0,0.07); --shadow-lg: 0 8px 40px rgba(0,0,0,0.14); --radius: 12px; --radius-sm: 8px; --sidebar-w: 240px; --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --transition: all 0.2s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); display: flex; min-height: 100vh; overflow-x: hidden; } /* Oculta el contenido protegido hasta que AUTH.proteger() confirme la sesión — evita el parpadeo de ver la página real por una fracción de segundo antes de la redirección a login. Las páginas privadas arrancan con ; proteger() quita la clase al confirmar. Si no hay sesión, la página cambia por completo (redirección), así que no hace falta revertir la ocultación aquí. Ver el timeout de seguridad en auth.js (por si proteger() nunca resuelve, ej. falla el CDN de Supabase) — sin eso, un error ahí dejaría la página oculta para siempre en vez de mostrar el problema. */ body.auth-checking { visibility: hidden; } /* ---- SCROLLBAR ---- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } /* ============ SIDEBAR ============ Fase 2 (Layout) — re-vestido con tokens --ds-* del design system "Clinical Precision" (src/styles/design-system.css). Mismo markup y mismo JS (src/core/ui.js) — solo cambian los valores visuales. */ .sidebar { width: var(--sidebar-w); background: var(--ds-surface-subtle, var(--sidebar-bg)); border-right: 1px solid var(--ds-border-low-contrast, transparent); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; padding: 1.5rem 1rem; } .sidebar-logo { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.5rem 1.5rem; border-bottom: 1px solid var(--ds-border-low-contrast, rgba(255,255,255,0.1)); margin-bottom: 1.5rem; } .logo-icon { font-size: 1.8rem; color: var(--ds-primary, var(--accent)); line-height: 1; } .sidebar-logo-img { max-width: 100%; height: auto; display: block; } .sidebar-logo-icon-img { height: 46px; width: auto; flex-shrink: 0; } .sidebar-logo-texto-img { width: 138px; height: auto; display: block; } .logo-title { font-family: var(--ds-font-family, var(--font-display)); font-size: 1.1rem; font-weight: 700; color: var(--ds-on-surface, #FFFFFF); letter-spacing: 0.02em; } .logo-sub { font-size: 0.65rem; color: var(--ds-on-surface-variant, rgba(255,255,255,0.4)); text-transform: uppercase; letter-spacing: 0.1em; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--ds-radius, var(--radius-sm)); color: var(--ds-on-surface-variant, rgba(255,255,255,0.55)); text-decoration: none; font-family: var(--ds-font-family, var(--font-body)); font-size: 0.875rem; font-weight: 500; transition: var(--transition); letter-spacing: 0.01em; } .nav-item:hover { background: var(--ds-surface-container-low, var(--sidebar-hover)); color: var(--ds-on-surface, rgba(255,255,255,0.9)); } .nav-item.active { background: var(--ds-primary-container, var(--accent)); color: var(--ds-on-primary-container, #fff); } .nav-icon { font-size: 20px; width: 20px; text-align: center; flex-shrink: 0; } .nav-item.disabled { color: var(--ds-outline-variant, rgba(255,255,255,0.25)); cursor: not-allowed; pointer-events: none; } .nav-item.disabled:hover { background: none; } .sidebar-footer { border-top: 1px solid var(--ds-border-low-contrast, rgba(255,255,255,0.1)); padding-top: 1rem; } .doctor-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; } .doctor-avatar { width: 36px; height: 36px; background: var(--ds-primary, var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--ds-on-primary, #fff); flex-shrink: 0; } .doctor-name { font-size: 0.82rem; font-weight: 600; color: var(--ds-on-surface, rgba(255,255,255,0.9)); } .doctor-role { font-size: 0.7rem; color: var(--ds-on-surface-variant, rgba(255,255,255,0.4)); } .btn-logout { background: none; border: none; cursor: pointer; color: var(--ds-on-surface-variant, rgba(255,255,255,0.4)); font-size: 1rem; padding: 0.25rem; transition: color 0.2s; } .btn-logout:hover { color: var(--ds-danger, #fff); } /* ============ MAIN ============ */ .main { margin-left: var(--sidebar-w); flex: 1; padding: 2rem 2.5rem; max-width: 1200px; background: var(--ds-background, transparent); } /* ---- TOPBAR ---- */ .topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; } .page-title { font-family: var(--ds-font-family, var(--font-display)); font-size: var(--ds-headline-lg-size, 2rem); font-weight: var(--ds-headline-lg-weight, 700); color: var(--ds-on-background, var(--text)); letter-spacing: var(--ds-headline-lg-tracking, -0.02em); } .page-date { color: var(--ds-on-surface-variant, var(--text-muted)); font-size: 0.875rem; margin-top: 0.25rem; } /* ============ BUTTONS ============ */ .btn-primary { background: var(--accent); color: #fff; border: none; padding: 0.65rem 1.5rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: var(--transition); letter-spacing: 0.01em; } .btn-primary:hover { background: #0b5860; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,122,133,0.3); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: var(--danger); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-danger:hover { opacity: 0.85; } .full-width { width: 100%; } /* ============ STATS GRID ============ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .stat-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 0.4rem; } .stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 1rem; } .stat-bar { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .stat-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); } .stat-fill.accent2 { background: var(--accent2); } .stat-fill.accent3 { background: var(--accent3); } .stat-fill.accent4 { background: var(--accent4); } /* ============ SECTION ============ */ .section-block { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 2rem; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .section-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text); } /* Ícono vectorial en línea con texto (títulos de sección, botones, badges). Reemplaza el patrón anterior de emojis Unicode. */ .icon-inline { font-size: 1.1em; vertical-align: -0.2em; margin-right: 0.3em; line-height: 1; } /* ---- FILTER TABS ---- */ .filter-tabs { display: flex; gap: 0.5rem; background: var(--surface-2); padding: 0.3rem; border-radius: var(--radius-sm); } .tab { background: transparent; border: none; padding: 0.4rem 0.85rem; border-radius: 6px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .tab.active, .tab:hover { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* ============ CITAS GRID ============ */ .citas-grid { display: grid; gap: 0.75rem; } .cita-card { display: grid; grid-template-columns: 80px 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); transition: var(--transition); cursor: pointer; } .cita-card:hover { border-color: var(--accent); background: var(--accent-light); transform: translateX(3px); } .cita-hora { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--accent); text-align: center; } .cita-hora small { display: block; font-family: var(--font-body); font-size: 0.7rem; color: var(--text-muted); font-weight: 400; } .cita-info .cita-nombre { font-weight: 600; font-size: 0.95rem; color: var(--text); } .cita-info .cita-motivo-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; } .badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .badge-pendiente { background: #FEF3C7; color: #92400E; } .badge-confirmada { background: #D1FAE5; color: #065F46; } .badge-completada { background: #DBEAFE; color: #1E40AF; } .badge-cancelada { background: #FEE2E2; color: #991B1B; } .cita-actions { display: flex; gap: 0.5rem; } .btn-icon { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.1); } .btn-icon:hover span { filter: brightness(10); } /* ============ PACIENTES TABLE ============ */ .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } thead th { text-align: left; padding: 0.75rem 1rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 2px solid var(--border); } tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); cursor: pointer; } tbody tr:hover { background: var(--accent-light); } tbody td { padding: 0.9rem 1rem; color: var(--text); vertical-align: middle; } .avatar-cell { display: flex; align-items: center; gap: 0.75rem; } .patient-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: #fff; flex-shrink: 0; } /* ============ SEARCH BAR ============ */ .search-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .search-input { flex: 1; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.875rem; background: var(--bg); color: var(--text); transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--accent); background: var(--surface); } /* ============ MODALS ============ */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(13, 43, 43, 0.55); backdrop-filter: blur(4px); z-index: 500; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.active { display: flex; animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 540px; box-shadow: var(--shadow-lg); animation: slideUp 0.2s ease; max-height: 90vh; overflow-y: auto; } .modal-sm { max-width: 420px; } .modal-lg { max-width: 720px; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--border); } .modal-header h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text); } .modal-close { background: none; border: none; font-size: 1rem; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: 4px; transition: var(--transition); } .modal-close:hover { background: var(--surface-2); color: var(--text); } .modal-body { padding: 1.5rem; } .modal-form { padding: 1.25rem 1.5rem; } /* ============ FORMS ============ */ .form-group { margin-bottom: 1.15rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; letter-spacing: 0.02em; } input, select, textarea { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.875rem; color: var(--text); background: var(--bg); transition: var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(15,122,133,0.1); } textarea { resize: vertical; min-height: 80px; } .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border); margin-top: 1rem; } /* ============ EXPEDIENTE ============ */ .expediente-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .exp-section { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); } .exp-section h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent); } .exp-field { margin-bottom: 0.75rem; } .exp-field .field-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.2rem; } .exp-field .field-value { font-size: 0.9rem; color: var(--text); } /* ---- OneDrive Docs Section ---- */ .docs-section { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); margin-top: 1.5rem; } .docs-section h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; } .doc-item { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .doc-item:last-child { border-bottom: none; } .doc-item a { color: var(--accent); text-decoration: none; font-weight: 500; } .doc-item a:hover { text-decoration: underline; } /* ============ HISTORIAL ============ */ .historial-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .historial-item:last-child { border-bottom: none; } .historial-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; } .historial-fecha { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; } .historial-desc { font-size: 0.875rem; color: var(--text); } /* ============ EMPTY STATE ============ */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .empty-state p { margin-bottom: 1rem; } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--sidebar-bg); color: #fff; padding: 0.85rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 999; animation: toastIn 0.3s ease; border-left: 4px solid var(--accent); display: flex; align-items: center; gap: 0.5rem; } .toast.error { border-left-color: var(--danger); } /* Ícono vectorial antes del mensaje — mostrarToast() usa textContent (no innerHTML, por seguridad ante XSS), así que el ícono se agrega puramente por CSS en vez de tocar cada llamada al toast. */ .toast::before { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; font-size: 1.2rem; line-height: 1; flex-shrink: 0; content: 'check_circle'; color: var(--accent); } .toast.error::before { content: 'error'; color: var(--danger); } @keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============ BADGES ============ */ .badge-required { background: #FEE2E2; color: #991B1B; font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 99px; font-weight: 600; letter-spacing: 0.04em; margin-left: 0.25rem; } /* Marca visible en cualquier dato de ejemplo (no conectado a Supabase todavía), para no confundirlo con información clínica/administrativa real. */ .demo-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--ds-surface-container, #F3F4F6); color: var(--ds-on-surface-variant, #6B7280); padding: 0.12rem 0.4rem; border-radius: 4px; } /* ---- BÚSQUEDA GLOBAL (TOPBAR) ---- */ .global-search { display: flex; align-items: center; gap: 0.6rem; background: var(--ds-surface-base, #fff); border: 1px solid var(--ds-border-low-contrast, var(--border)); border-radius: var(--ds-radius, 8px); padding: 0.55rem 0.9rem; max-width: 420px; width: 100%; color: var(--ds-on-surface-variant, var(--text-muted)); font-size: 0.875rem; cursor: text; } .global-search input { border: none; outline: none; background: transparent; flex: 1; font-size: 0.875rem; color: var(--ds-on-surface, var(--text)); font-family: var(--ds-font-family, var(--font-body)); } .global-search kbd { font-size: 0.7rem; color: var(--ds-on-surface-variant, var(--text-muted)); border: 1px solid var(--ds-border-low-contrast, var(--border)); border-radius: 4px; padding: 0.1rem 0.4rem; } .setup-hint { font-size: 0.8rem; color: var(--text-muted); background: var(--surface-2); padding: 0.75rem 1rem; border-radius: var(--radius-sm); line-height: 1.5; margin-top: 0.75rem; } /* ============ AVATAR COLORS ============ */ .av-teal { background: var(--accent); } .av-coral { background: var(--accent2); } .av-blue { background: var(--accent3); } .av-gold { background: var(--accent4); } .av-purple { background: #7C3AED; } .av-pink { background: #DB2777; } /* ============ COMBOBOX BÚSQUEDA (paciente en cita) ============ */ .cmb { position: relative; } .cmb-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; pointer-events: none; opacity: 0.6; } .cmb-input { padding-left: 2.3rem !important; } .cmb-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 240px; overflow-y: auto; box-shadow: var(--shadow-lg); } .cmb-item { padding: 0.6rem 0.85rem; font-size: 0.875rem; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); } .cmb-item:last-child { border-bottom: none; } .cmb-item:hover { background: var(--accent-light); color: var(--accent); } .cmb-empty { padding: 0.7rem 0.85rem; font-size: 0.85rem; color: var(--text-muted); } /* ============ RESPONSIVE ============ */ /* Botón hamburguesa: solo existe/visible en mobile (≤900px), fijo arriba a la izquierda. Reintroduce el sidebar que la media query de abajo esconde. */ .mobile-menu-toggle { display: none; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 99; /* justo debajo del sidebar (z-index 100) */ } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; } .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: 1rem; left: 1rem; z-index: 101; /* por encima del sidebar para poder cerrarlo desde el mismo botón */ width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ds-border-low-contrast, var(--border)); background: var(--ds-surface-base, var(--surface)); color: var(--ds-on-surface, var(--text)); box-shadow: 0 2px 8px rgba(15,23,42,0.12); cursor: pointer; } .mobile-menu-toggle .material-symbols-outlined { font-size: 24px; } .main { margin-left: 0; padding: 1.5rem; padding-top: 4.5rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .expediente-grid { grid-template-columns: 1fr; } .cita-card { grid-template-columns: 70px 1fr; } .cita-actions { display: none; } } @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .filter-tabs { flex-wrap: wrap; } } /* Hide admin-only nav items until auth confirms the role — prevents flash for subadmins */ .sidebar-nav [data-admin-only] { display: none; } .sidebar-nav [data-superadmin-only] { display: none; }