/* * demo.css * File include item demo only specific css only ******************************************************************************/ /** * Tema IDOO - Sistema Médico * ------------------------------------------------------------------------------------- * Paleta de colores azul cielo y cyan para clínicas y doctores * Coloca este archivo en: assets/css/idoo-medical-theme.css * E incluye en el después de core.css */ /* ===== VARIABLES DE COLOR IDOO ===== */ :root { --idoo-primary: #2196F3; --idoo-primary-dark: #1976D2; --idoo-primary-light: #64B5F6; --idoo-secondary: #00BCD4; --idoo-secondary-dark: #0097A7; --idoo-success: #4CAF50; --idoo-success-dark: #388E3C; --idoo-danger: #F44336; --idoo-danger-dark: #D32F2F; --idoo-warning: #FF9800; --idoo-info: #00BCD4; /* Backgrounds */ --idoo-bg-light: #E3F2FD; --idoo-bg-secondary: #E0F7FA; --idoo-bg-success: #E8F5E9; --idoo-bg-danger: #FFEBEE; --idoo-bg-warning: #FFF3E0; } [data-bs-theme="dark"] { --idoo-primary: #64B5F6; --idoo-primary-dark: #42A5F5; --idoo-secondary: #26C6DA; --idoo-bg-light: #1A2F3F; --idoo-bg-secondary: #1A3A3F; --idoo-bg-success: #1F3A24; --idoo-bg-danger: #3A1F1E; } /* ===== BOTONES IDOO ===== */ /* Botón principal con gradiente */ .btn-idoo-primary { background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-primary-dark) 100%); color: white; border: none; transition: all 0.3s ease; font-weight: 500; } .btn-idoo-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3); color: white; background: linear-gradient(135deg, var(--idoo-primary-dark) 0%, #0D47A1 100%); } .btn-idoo-primary:active, .btn-idoo-primary:focus { transform: translateY(0); box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4); color: white; } /* Botón secundario */ .btn-idoo-secondary { background: linear-gradient(135deg, var(--idoo-secondary) 0%, var(--idoo-secondary-dark) 100%); color: white; border: none; transition: all 0.3s ease; } .btn-idoo-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3); color: white; } /* Botón outline */ .btn-idoo-outline { background: transparent; color: var(--idoo-primary); border: 2px solid var(--idoo-primary); transition: all 0.3s ease; } .btn-idoo-outline:hover { background: var(--idoo-primary); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3); } /* ===== BADGES MÉDICOS IDOO ===== */ .badge-idoo-primary { background-color: var(--idoo-primary); color: white; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } .badge-idoo-secondary { background-color: var(--idoo-secondary); color: white; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } .badge-idoo-success { background-color: var(--idoo-success); color: white; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } .badge-idoo-danger { background-color: var(--idoo-danger); color: white; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } .badge-idoo-warning { background-color: var(--idoo-warning); color: white; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } /* Badges médicos especiales */ .badge-medical-emergency { background-color: var(--idoo-danger) !important; color: white !important; font-weight: 700; padding: 0.375rem 0.875rem; border-radius: 0.375rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } .badge-medical-urgent { background-color: var(--idoo-warning) !important; color: white !important; font-weight: 700; padding: 0.375rem 0.875rem; border-radius: 0.375rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } .badge-medical-routine { background-color: var(--idoo-primary) !important; color: white !important; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } .badge-medical-completed { background-color: var(--idoo-success) !important; color: white !important; font-weight: 600; padding: 0.375rem 0.875rem; border-radius: 0.375rem; } /* ===== ESTADOS DE CITAS ===== */ .status-scheduled, .status-completed, .status-cancelled, .status-pending { display: inline-block; padding: 0.375rem 0.875rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.3px; } .status-scheduled { color: var(--idoo-secondary); background-color: var(--idoo-bg-secondary); } .status-completed { color: var(--idoo-success); background-color: var(--idoo-bg-success); } .status-cancelled { color: var(--idoo-danger); background-color: var(--idoo-bg-danger); } .status-pending { color: var(--idoo-warning); background-color: var(--idoo-bg-warning); } /* ===== CARDS IDOO ===== */ /* Card con borde azul destacado */ .card-idoo-highlight { border-left: 4px solid var(--idoo-primary); box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1); transition: all 0.3s ease; } .card-idoo-highlight:hover { box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2); transform: translateY(-2px); } /* Card con header gradiente IDOO */ .card-header-idoo { background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-primary-dark) 100%); color: white; padding: 1.25rem; border-radius: 0.5rem 0.5rem 0 0; } .card-header-idoo * { color: white !important; } /* Card con gradiente secundario */ .card-header-idoo-secondary { background: linear-gradient(135deg, var(--idoo-secondary) 0%, var(--idoo-secondary-dark) 100%); color: white; padding: 1.25rem; border-radius: 0.5rem 0.5rem 0 0; } .card-header-idoo-secondary * { color: white !important; } /* Card con patrón médico de fondo */ .card-medical-pattern { position: relative; overflow: hidden; } .card-medical-pattern::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-secondary) 100%); opacity: 0.05; z-index: 0; } .card-medical-pattern .card-body { position: relative; z-index: 1; } /* ===== BACKGROUND PATTERNS ===== */ .medical-bg-pattern { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: linear-gradient(135deg, #368FD9 0%, #26669A 100%); opacity: 0.05; z-index: -1; } .idoo-bg-pattern { background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-secondary) 100%); opacity: 0.05; } /* ===== SECCIONES Y HEADERS ===== */ .section-header-idoo { background: linear-gradient(90deg, var(--idoo-bg-light) 0%, transparent 100%); border-left: 4px solid var(--idoo-primary); padding: 1rem 1.5rem; border-radius: 0.375rem; margin-bottom: 1.5rem; } .section-header-idoo h4, .section-header-idoo h5 { color: var(--idoo-primary); margin-bottom: 0; } /* ===== ICONOS ===== */ .icon-idoo { color: var(--idoo-primary); } .icon-idoo-secondary { color: var(--idoo-secondary); } .icon-idoo-success { color: var(--idoo-success); } .medical-icon { width: 45px; height: 45px; margin-right: 10px; } /* ===== LOGO IDOO ===== */ .idoo-logo { font-size: 2rem; font-weight: 700; color: var(--idoo-primary); text-decoration: none; transition: all 0.3s ease; } .idoo-logo:hover { color: var(--idoo-primary-dark); transform: scale(1.05); } /* ===== ALERTS IDOO ===== */ .alert-idoo-info { background-color: var(--idoo-bg-light); border-left: 4px solid var(--idoo-primary); color: var(--idoo-primary-dark); padding: 1rem 1.25rem; border-radius: 0.375rem; } .alert-idoo-success { background-color: var(--idoo-bg-success); border-left: 4px solid var(--idoo-success); color: var(--idoo-success-dark); padding: 1rem 1.25rem; border-radius: 0.375rem; } .alert-idoo-danger { background-color: var(--idoo-bg-danger); border-left: 4px solid var(--idoo-danger); color: var(--idoo-danger-dark); padding: 1rem 1.25rem; border-radius: 0.375rem; } .alert-idoo-warning { background-color: var(--idoo-bg-warning); border-left: 4px solid var(--idoo-warning); color: #E65100; padding: 1rem 1.25rem; border-radius: 0.375rem; } /* ===== CONTENEDOR DE ALERTAS ===== */ .alert-container { position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 400px; } /* ===== FORMULARIOS IDOO ===== */ .form-control-idoo:focus { border-color: var(--idoo-primary); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); } .form-floating-outline.has-error .form-control { border-color: var(--idoo-danger); } .form-floating-outline.has-success .form-control { border-color: var(--idoo-success); } .form-check-input:checked { background-color: var(--idoo-primary); border-color: var(--idoo-primary); } /* ===== TABLAS IDOO ===== */ .table-idoo tbody tr:hover { background-color: var(--idoo-bg-light); cursor: pointer; transition: all 0.3s ease; } .table-idoo thead { background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-primary-dark) 100%); color: white; } .table-idoo thead th { color: white; font-weight: 600; border: none; } /* ===== PROGRESS BARS ===== */ .progress-idoo { background-color: var(--idoo-bg-light); height: 10px; border-radius: 5px; } .progress-idoo .progress-bar { background: linear-gradient(90deg, var(--idoo-primary) 0%, var(--idoo-secondary) 100%); border-radius: 5px; } /* ===== TIMELINE IDOO ===== */ .timeline-idoo .timeline-point { background-color: var(--idoo-primary) !important; box-shadow: 0 0 0 4px var(--idoo-bg-light); } .timeline-idoo .timeline-point-primary { background-color: var(--idoo-primary) !important; } .timeline-idoo .timeline-point-secondary { background-color: var(--idoo-secondary) !important; } .timeline-idoo .timeline-point-success { background-color: var(--idoo-success) !important; } /* ===== FOOTER ===== */ .login-footer { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; text-align: center; color: #666; font-size: 0.875rem; } [data-bs-theme="dark"] .login-footer { border-top-color: #37474F; color: #90A4AE; } /* ===== UTILITIES ===== */ .text-idoo-primary { color: var(--idoo-primary) !important; } .text-idoo-secondary { color: var(--idoo-secondary) !important; } .text-idoo-success { color: var(--idoo-success) !important; } .text-idoo-danger { color: var(--idoo-danger) !important; } .bg-idoo-light { background-color: var(--idoo-bg-light) !important; } .bg-idoo-secondary { background-color: var(--idoo-bg-secondary) !important; } .border-idoo-primary { border-color: var(--idoo-primary) !important; } .border-idoo-secondary { border-color: var(--idoo-secondary) !important; } /* ===== SHADOWS IDOO ===== */ .shadow-idoo-sm { box-shadow: 0 0.125rem 0.25rem rgba(33, 150, 243, 0.075) !important; } .shadow-idoo { box-shadow: 0 0.5rem 1rem rgba(33, 150, 243, 0.15) !important; } .shadow-idoo-lg { box-shadow: 0 1rem 3rem rgba(33, 150, 243, 0.175) !important; } /* ===== SPINNER IDOO ===== */ .spinner-idoo { border: 3px solid var(--idoo-bg-light); border-top: 3px solid var(--idoo-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin-idoo 1s linear infinite; } @keyframes spin-idoo { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== MODAL IDOO ===== */ .modal-header-idoo { background: linear-gradient(135deg, var(--idoo-primary) 0%, var(--idoo-primary-dark) 100%); color: white; border-radius: 0.5rem 0.5rem 0 0; } .modal-header-idoo * { color: white !important; } .modal-header-idoo .btn-close { filter: brightness(0) invert(1); } /* ===== ANIMACIONES ===== */ .btn-idoo-primary, .btn-idoo-secondary, .btn-idoo-outline, .card-idoo-highlight, .table-idoo tbody tr { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ===== BREADCRUMB IDOO ===== */ .breadcrumb-idoo .breadcrumb-item.active { color: var(--idoo-primary); } .breadcrumb-idoo .breadcrumb-item a { color: var(--idoo-secondary); } .breadcrumb-idoo .breadcrumb-item a:hover { color: var(--idoo-primary); } /* ===== DROPDOWN IDOO ===== */ .dropdown-menu-idoo { border-top: 3px solid var(--idoo-primary); box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15); } .dropdown-menu-idoo .dropdown-item:hover { background-color: var(--idoo-bg-light); color: var(--idoo-primary); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .card-idoo-highlight { border-left-width: 3px; } .section-header-idoo { padding: 0.75rem 1rem; } .btn-idoo-primary, .btn-idoo-secondary { font-size: 0.875rem; padding: 0.5rem 1rem; } } /* ===== ACCESIBILIDAD ===== */ .btn-idoo-primary:focus-visible, .btn-idoo-secondary:focus-visible, .form-control-idoo:focus-visible { outline: 2px solid var(--idoo-primary); outline-offset: 2px; } .menu .app-brand.demo { height: 64px; } .app-brand-logo.demo svg { width: 38px; height: 20px; } .app-brand-text.demo { font-size: 1.25rem; letter-spacing: 0.15px; } .authentication-wrapper .app-brand-text.demo { text-transform: capitalize; } /* ! For .layout-navbar-fixed added fix padding top to .layout-page */ /* Default navbar */ .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 64px !important; } /* Navbar page z-index issue solution */ .content-wrapper .navbar { z-index: auto; } /* * Content ******************************************************************************/ .demo-blocks > * { display: block !important; } .demo-inline-spacing > * { margin: 1rem 0.375rem 0 0 !important; } /* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */ .demo-vertical-spacing > * { margin-top: 1.25rem !important; margin-bottom: 0 !important; } .demo-vertical-spacing.demo-only-element > :first-child { margin-top: 0 !important; } .demo-vertical-spacing-lg > * { margin-top: 1.875rem !important; margin-bottom: 0 !important; } .demo-vertical-spacing-lg.demo-only-element > :first-child { margin-top: 0 !important; } .demo-vertical-spacing-xl > * { margin-top: 5rem !important; margin-bottom: 0 !important; } .demo-vertical-spacing-xl.demo-only-element > :first-child { margin-top: 0 !important; } /* Dropdown buttons going out of small screens */ @media (max-width: 576px) { #dropdown-variation-demo .btn-group .text-truncate { width: 300px; position: relative; } #dropdown-variation-demo .btn-group .text-truncate::after { position: absolute; top: 45%; right: 0.65rem; } } /* * Layout demo ******************************************************************************/ .layout-demo-wrapper { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; margin-top: 1.25rem; } .layout-demo-placeholder img { width: 900px; } .layout-demo-info { text-align: center; margin-top: 1.25rem; }