/* ========================================= CLINICQ - SISTEMA DE TEMAS v1.1 ========================================= Este archivo define los temas visuales que se aplican según la configuración del tenant. Uso: El loader.js agrega una clase al : - theme-kids (default) - theme-professional - theme-custom IMPORTANTE: Los iconos FontAwesome NO deben ser afectados ========================================= */ /* ========================================= 1. VARIABLES BASE (Heredadas del tenant) ========================================= */ :root { /* Variables de tenant (definidas por loader.js) */ --tenant-primary: #00C4B4; --tenant-primary-dark: #009688; --tenant-accent: #FF5E78; --tenant-success: #22c55e; --tenant-error: #ef4444; --tenant-bg-gradient: linear-gradient(135deg, #E0F7FA 0%, #E8F5E9 100%); /* Variables de tema (sobrescritas por cada tema) */ --theme-font-body: 'Quicksand', sans-serif; --theme-font-heading: 'Fredoka One', cursive; --theme-radius-sm: 15px; --theme-radius-md: 25px; --theme-radius-lg: 50px; --theme-shadow: 0 12px 24px -6px rgba(0, 196, 180, 0.25); } /* ========================================= PROTEGER ICONOS FONTAWESOME ========================================= */ .fas, .far, .fab, .fa, [class^="fa-"], [class*=" fa-"], .sidebar-item i, .sidebar i, i.fas, i.far, i.fab, i.fa { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } /* ========================================= 2. TEMA KIDS (Default - Sin cambios) ========================================= El tema kids mantiene los estilos originales: - Fuentes: Fredoka One + Quicksand - Colores: Turquesa + Rosa coral - Bordes: Muy redondeados (50px) - Background: Gradiente animado pastel ========================================= */ body.theme-kids { --theme-font-body: 'Quicksand', sans-serif; --theme-font-heading: 'Fredoka One', cursive; --theme-radius-sm: 15px; --theme-radius-md: 25px; --theme-radius-lg: 50px; /* Kids mantiene el gradiente animado */ background: linear-gradient(-45deg, #e0f7fa, #e8f5e9, #fff3e0, #fce4ec); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } /* ========================================= 3. TEMA PROFESIONAL ========================================= Diseño limpio y moderno para clínicas de adultos: - Fuentes: Inter + Poppins - Colores: Azul profesional - Bordes: Moderadamente redondeados (8-12px) - Background: Sólido claro ========================================= */ body.theme-professional { --theme-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --theme-font-heading: 'Poppins', sans-serif; --theme-radius-sm: 8px; --theme-radius-md: 12px; --theme-radius-lg: 16px; --theme-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Background sólido, sin animación */ background: #f8fafc !important; animation: none !important; /* Colores profesionales por defecto */ --primary: var(--tenant-primary, #0ea5e9); --primary-dark: var(--tenant-primary-dark, #0284c7); --accent: var(--tenant-accent, #06b6d4); --success: var(--tenant-success, #22c55e); --error: var(--tenant-error, #ef4444); } /* --- Fuentes Profesionales --- */ body.theme-professional { font-family: var(--theme-font-body); } body.theme-professional h1, body.theme-professional h2, body.theme-professional h3, body.theme-professional h4, body.theme-professional .nav-btn, body.theme-professional .action-btn, body.theme-professional .btn-outline, body.theme-professional .link, body.theme-professional span, body.theme-professional p, body.theme-professional a:not(.sidebar-item), body.theme-professional div, body.theme-professional input, body.theme-professional select, body.theme-professional textarea, body.theme-professional button, body.theme-professional label { font-family: var(--theme-font-body); } body.theme-professional h1, body.theme-professional h2, body.theme-professional h3, body.theme-professional h4 { font-family: var(--theme-font-heading); font-weight: 600; } /* --- Colores de Títulos --- */ body.theme-professional h1, body.theme-professional h2, body.theme-professional h3 { color: #1e293b; } /* --- Bordes Redondeados Moderados --- */ body.theme-professional .container, body.theme-professional .wide-container { border-radius: var(--theme-radius-md); box-shadow: var(--theme-shadow); } body.theme-professional input, body.theme-professional select, body.theme-professional textarea { border-radius: var(--theme-radius-sm); border: 1px solid #e2e8f0; } body.theme-professional input:focus, body.theme-professional select:focus, body.theme-professional textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } body.theme-professional .nav-btn, body.theme-professional .action-btn, body.theme-professional .btn-outline, body.theme-professional .btn-small { border-radius: var(--theme-radius-sm); } /* --- Botones Profesionales --- */ body.theme-professional .action-btn { background: var(--primary); font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } body.theme-professional .action-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } body.theme-professional .btn-outline { border: 1.5px solid var(--primary); color: var(--primary); } body.theme-professional .btn-outline:hover { background: var(--primary); color: white; } /* --- Navbar Profesional --- */ body.theme-professional header.navbar-floating:not(.navbar-internal) { border-radius: var(--theme-radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } body.theme-professional .user-btn { border-radius: var(--theme-radius-sm); border: 1.5px solid var(--primary); } /* --- Tabs y Toggles Profesionales --- */ body.theme-professional .tab-container, body.theme-professional .toggle-container { border-radius: var(--theme-radius-sm); background: #f1f5f9; } body.theme-professional .tab-btn, body.theme-professional .toggle-btn { border-radius: 6px; } body.theme-professional .tab-btn.active, body.theme-professional .toggle-btn.active { background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* --- Tablas Profesionales --- */ body.theme-professional .admin-table { border-radius: var(--theme-radius-sm); overflow: hidden; } body.theme-professional .admin-table th { background: var(--primary); font-weight: 600; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.05em; } /* --- Cards y Containers --- */ body.theme-professional .welcome-card { border-radius: var(--theme-radius-md); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } body.theme-professional .info-card, body.theme-professional .stat-card { border-radius: var(--theme-radius-sm); box-shadow: var(--theme-shadow); } /* --- Modals Profesionales --- */ body.theme-professional .modal-content { border-radius: var(--theme-radius-md); } body.theme-professional .modal-header { border-radius: var(--theme-radius-md) var(--theme-radius-md) 0 0; } /* --- Dropdown Profesional --- */ body.theme-professional .dropdown-content { border-radius: var(--theme-radius-sm); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* --- Landing Profesional --- */ body.theme-professional .hero-section { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); } body.theme-professional .service-card { border-radius: var(--theme-radius-sm); } body.theme-professional .testimonial-card { border-radius: var(--theme-radius-sm); } /* --- Sidebar Profesional --- */ body.theme-professional .sidebar { background: #ffffff; border-right: 1px solid #e2e8f0; } body.theme-professional .sidebar-item.active { background: rgba(14, 165, 233, 0.1); border-left: 3px solid var(--primary); } /* --- Formularios Profesionales --- */ body.theme-professional .form-group label { font-weight: 500; color: #475569; font-size: 0.875em; } body.theme-professional .file-upload-wrapper { border-radius: var(--theme-radius-sm); border: 2px dashed #cbd5e1; } body.theme-professional .file-upload-wrapper:hover { border-color: var(--primary); background: rgba(14, 165, 233, 0.02); } /* --- Notificaciones Profesionales --- */ body.theme-professional .notification-item { border-radius: var(--theme-radius-sm); } body.theme-professional .badge-dot { font-family: var(--theme-font-body) !important; } /* --- Dashboard Cards Profesionales --- */ body.theme-professional .dash-btn-patient { border-radius: var(--theme-radius-sm); font-weight: 600; } /* --- Odontograma Profesional --- */ body.theme-professional .tooth-btn { border-radius: 6px; } /* ========================================= 4. TEMA CUSTOM (Usa variables del tenant) ========================================= Permite personalización completa desde el tenant.config.js ========================================= */ body.theme-custom { --theme-font-body: var(--tenant-font-body, 'Inter', sans-serif); --theme-font-heading: var(--tenant-font-heading, 'Poppins', sans-serif); --theme-radius-sm: var(--tenant-radius-sm, 10px); --theme-radius-md: var(--tenant-radius-md, 16px); --theme-radius-lg: var(--tenant-radius-lg, 24px); background: var(--tenant-bg-gradient, #f8fafc); } /* ========================================= 5. UTILIDADES DE TEMA ========================================= */ /* Forzar estilo profesional en elementos específicos */ .force-professional { font-family: 'Inter', sans-serif !important; border-radius: 8px !important; } /* Forzar estilo kids en elementos específicos */ .force-kids { font-family: 'Fredoka One', cursive !important; border-radius: 50px !important; } /* Transiciones suaves para cambio de tema */ body, body * { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ========================================= 6. RESPONSIVE AJUSTES POR TEMA ========================================= */ @media (max-width: 768px) { body.theme-professional .container { border-radius: var(--theme-radius-sm); margin: 15px; padding: 20px; } body.theme-professional header.navbar-floating:not(.navbar-internal) { border-radius: var(--theme-radius-sm); top: 10px; width: 95%; } } /* ========================================= 7. PRINT STYLES ========================================= */ @media print { body.theme-professional, body.theme-kids { background: white !important; animation: none !important; } } /* ========================================= 8. SIDEBAR MODERNO (Estilo SUNNU) ========================================= Sidebar colapsable con hover-expand Compatible con ambos temas ========================================= */ /* --- Variables del Sidebar Moderno --- */ :root { --sidebar-modern-width: 260px; --sidebar-modern-collapsed: 72px; --sidebar-modern-bg: #ffffff; --sidebar-modern-border: #e5e7eb; --sidebar-modern-text: #6b7280; --sidebar-modern-text-hover: #111827; --sidebar-modern-active-bg: rgba(14, 165, 233, 0.1); --sidebar-modern-active-text: #0ea5e9; --sidebar-modern-active-border: #0ea5e9; } /* Tema Kids - Sidebar con colores turquesa */ body.theme-kids { --sidebar-modern-active-bg: rgba(0, 196, 180, 0.1); --sidebar-modern-active-text: #00C4B4; --sidebar-modern-active-border: #00C4B4; } /* --- Sidebar Base Moderno --- */ body.theme-professional .sidebar, body.theme-kids .sidebar { background: var(--sidebar-modern-bg); border-right: 1px solid var(--sidebar-modern-border); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04); } /* --- Header del Sidebar --- */ body.theme-professional .sidebar-header, body.theme-kids .sidebar-header { border-bottom: 1px solid var(--sidebar-modern-border); padding: 16px !important; padding-top: 16px !important; /* Sobrescribir el padding-top: 80px del original */ min-height: auto !important; display: flex !important; align-items: center !important; gap: 12px !important; } body.theme-professional .sidebar-logo, body.theme-kids .sidebar-logo { width: 40px !important; height: 40px !important; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block !important; } body.theme-professional .sidebar-brand, body.theme-kids .sidebar-brand { color: #111827; font-weight: 700; font-size: 1.1em; flex: 1; display: block !important; } body.theme-professional .sidebar-collapse-btn, body.theme-kids .sidebar-collapse-btn { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; } body.theme-professional .sidebar-collapse-btn:hover, body.theme-kids .sidebar-collapse-btn:hover { background: #e5e7eb; color: #111827; } /* --- Secciones del Sidebar --- */ body.theme-professional .sidebar-section, body.theme-kids .sidebar-section { color: #9ca3af; font-size: 0.7em; font-weight: 600; letter-spacing: 0.5px; padding: 20px 16px 8px; } /* --- Items del Sidebar --- */ body.theme-professional .sidebar-item, body.theme-kids .sidebar-item { color: var(--sidebar-modern-text); margin: 2px 8px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid transparent; transition: all 0.2s ease; } body.theme-professional .sidebar-item:hover, body.theme-kids .sidebar-item:hover { background: #f9fafb; color: var(--sidebar-modern-text-hover); } body.theme-professional .sidebar-item.active, body.theme-kids .sidebar-item.active { background: var(--sidebar-modern-active-bg); color: var(--sidebar-modern-active-text); border-left-color: var(--sidebar-modern-active-border); font-weight: 600; } /* --- Iconos del Sidebar (IMPORTANTE) --- */ body.theme-professional .sidebar-item i, body.theme-kids .sidebar-item i { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; font-size: 1.1em; width: 24px; text-align: center; color: inherit; flex-shrink: 0; } /* --- Texto del Sidebar --- */ body.theme-professional .sidebar-item span, body.theme-kids .sidebar-item span { font-family: var(--theme-font-body); font-size: 0.9em; } /* --- Footer del Sidebar --- */ body.theme-professional .sidebar-footer, body.theme-kids .sidebar-footer { border-top: 1px solid var(--sidebar-modern-border); padding: 12px 0; margin-top: auto; } body.theme-professional .sidebar-footer .logout-item, body.theme-kids .sidebar-footer .logout-item { color: #ef4444; } body.theme-professional .sidebar-footer .logout-item:hover, body.theme-kids .sidebar-footer .logout-item:hover { background: rgba(239, 68, 68, 0.1); } /* --- Badge de Notificaciones --- */ body.theme-professional .sidebar-badge, body.theme-kids .sidebar-badge { background: #ef4444; color: white; font-size: 0.7em; padding: 2px 8px; border-radius: 10px; font-weight: 600; } /* ========================================= 9. SIDEBAR COLAPSADO - HOVER EXPAND ========================================= Cuando está colapsado, se expande al hover ========================================= */ /* Estado colapsado base */ body.theme-professional .sidebar.collapsed, body.theme-kids .sidebar.collapsed { width: var(--sidebar-modern-collapsed); } /* Ocultar textos cuando está colapsado */ body.theme-professional .sidebar.collapsed .sidebar-brand, body.theme-kids .sidebar.collapsed .sidebar-brand, body.theme-professional .sidebar.collapsed .sidebar-item span, body.theme-kids .sidebar.collapsed .sidebar-item span, body.theme-professional .sidebar.collapsed .sidebar-section, body.theme-kids .sidebar.collapsed .sidebar-section { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; } /* Centrar iconos cuando está colapsado */ body.theme-professional .sidebar.collapsed .sidebar-item, body.theme-kids .sidebar.collapsed .sidebar-item { justify-content: center; padding: 12px; } body.theme-professional .sidebar.collapsed .sidebar-item i, body.theme-kids .sidebar.collapsed .sidebar-item i { margin: 0; font-size: 1.3em; } /* Header colapsado */ body.theme-professional .sidebar.collapsed .sidebar-header, body.theme-kids .sidebar.collapsed .sidebar-header { justify-content: center !important; padding: 16px 8px !important; padding-top: 16px !important; min-height: auto !important; flex-wrap: wrap !important; display: flex !important; } body.theme-professional .sidebar.collapsed .sidebar-logo, body.theme-kids .sidebar.collapsed .sidebar-logo { width: 36px !important; height: 36px !important; display: block !important; margin: 0 auto !important; } body.theme-professional .sidebar.collapsed .sidebar-brand, body.theme-kids .sidebar.collapsed .sidebar-brand { display: none !important; opacity: 0 !important; width: 0 !important; overflow: hidden !important; } body.theme-professional .sidebar.collapsed .sidebar-collapse-btn, body.theme-kids .sidebar.collapsed .sidebar-collapse-btn { display: none !important; } /* Rotar flecha cuando está colapsado */ body.theme-professional .sidebar.collapsed .sidebar-collapse-btn i, body.theme-kids .sidebar.collapsed .sidebar-collapse-btn i { transform: rotate(180deg); font-size: 10px; } /* ========================================= 10. HOVER EXPAND (Expansión al pasar mouse) ========================================= */ body.theme-professional .sidebar.collapsed:hover, body.theme-kids .sidebar.collapsed:hover { width: var(--sidebar-modern-width) !important; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); } body.theme-professional .sidebar.collapsed:hover .sidebar-brand, body.theme-kids .sidebar.collapsed:hover .sidebar-brand { opacity: 1 !important; width: auto !important; display: block !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-item span, body.theme-kids .sidebar.collapsed:hover .sidebar-item span { opacity: 1 !important; width: auto !important; display: inline !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-section, body.theme-kids .sidebar.collapsed:hover .sidebar-section { opacity: 1 !important; width: auto !important; font-size: 0.7em !important; display: block !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-item, body.theme-kids .sidebar.collapsed:hover .sidebar-item { justify-content: flex-start !important; padding: 10px 12px !important; gap: 12px !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-item i, body.theme-kids .sidebar.collapsed:hover .sidebar-item i { font-size: 1.1em !important; width: 20px !important; margin: 0 !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-header, body.theme-kids .sidebar.collapsed:hover .sidebar-header { justify-content: flex-start !important; padding: 16px !important; gap: 12px !important; display: flex !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-logo, body.theme-kids .sidebar.collapsed:hover .sidebar-logo { width: 45px !important; height: 45px !important; display: block !important; flex-shrink: 0 !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-brand, body.theme-kids .sidebar.collapsed:hover .sidebar-brand { display: block !important; opacity: 1 !important; width: auto !important; flex: 1 !important; } body.theme-professional .sidebar.collapsed:hover .sidebar-collapse-btn, body.theme-kids .sidebar.collapsed:hover .sidebar-collapse-btn { position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; display: flex !important; flex-shrink: 0 !important; } /* ========================================= 11. AJUSTES MAIN CONTENT CON SIDEBAR ========================================= */ /* Cuando sidebar está colapsado */ body.theme-professional .sidebar.collapsed + .main-content, body.theme-kids .sidebar.collapsed + .main-content { margin-left: var(--sidebar-modern-collapsed); } /* Navbar ajuste con sidebar colapsado */ body.theme-professional.sidebar-active.sidebar-collapsed .navbar-floating, body.theme-kids.sidebar-active.sidebar-collapsed .navbar-floating { left: var(--sidebar-modern-collapsed); width: calc(100% - var(--sidebar-modern-collapsed)); } /* ========================================= 12. TOOLTIPS PARA SIDEBAR COLAPSADO ========================================= */ body.theme-professional .sidebar.collapsed .sidebar-item, body.theme-kids .sidebar.collapsed .sidebar-item { position: relative; } body.theme-professional .sidebar.collapsed .sidebar-item::after, body.theme-kids .sidebar.collapsed .sidebar-item::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1f2937; color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.8em; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 1000; pointer-events: none; } body.theme-professional .sidebar.collapsed .sidebar-item:hover::after, body.theme-kids .sidebar.collapsed .sidebar-item:hover::after { opacity: 1; visibility: visible; } /* No mostrar tooltip cuando sidebar está expandido por hover */ body.theme-professional .sidebar.collapsed:hover .sidebar-item::after, body.theme-kids .sidebar.collapsed:hover .sidebar-item::after { opacity: 0 !important; visibility: hidden !important; }