/* ========================================================================== themes.css — Paletas de color seleccionables desde Configuración Se activan cambiando el atributo data-theme del ========================================================================== */ /* ---------- Tema MODERNO (por defecto) ---------- Basado en los colores solicitados: #5CCEFF y #D7DAE0 */ body[data-theme="moderno"] { --color-primary: #5CCEFF; --color-primary-light: #e4f7ff; --bg-app: #D7DAE0; --bg-panel: #ffffff; --border-soft: #c7ccd6; --text-main: #2b2f38; --text-muted: #6b7280; } /* ---------- Tema OSCURO ---------- */ body[data-theme="oscuro"] { --color-primary: #5CCEFF; --color-primary-light: #1f3542; --bg-app: #1b1e24; --bg-panel: #262a32; --border-soft: #383d47; --text-main: #eef1f5; --text-muted: #9aa1ac; } /* ---------- Tema RETRO — estilo "Windows 2000 clásico" ---------- Paleta y tipografía inspiradas en el Shell clásico de Windows 2000: gris "Silver" (#ECE9D8/#D4D0C8), barra de título azul degradada (#0A246A → #A6CAF0), fuente Tahoma, biselados 3D (outset/inset). Recreado íntegramente con CSS propio — no reproduce ninguna imagen. */ body[data-theme="retro"] { --color-primary: #0A246A; /* azul de barra de título activa */ --color-primary-light: #C0C0C0; /* gris "face" de Windows clásico */ --bg-app: #808080; /* escritorio gris medio */ --bg-panel: #D4D0C8; /* gris estándar de Windows (ventanas/diálogos) */ --border-soft: #808080; --text-main: #000000; --text-muted: #3a3a3a; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } /* Biselado 3D reutilizable: "outset" (elevado) e "inset" (hundido) */ body[data-theme="retro"] .btn, body[data-theme="retro"] .btn-icon, body[data-theme="retro"] .theme-card, body[data-theme="retro"] .tab-link, body[data-theme="retro"] .info-btn { border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; background: #D4D0C8; color: #000000; box-shadow: none; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] .btn:active, body[data-theme="retro"] .btn-icon:active { border-color: #404040 #ffffff #ffffff #404040; } body[data-theme="retro"] .btn-primary { background: #D4D0C8; color: #000000; font-weight: 700; } body[data-theme="retro"] .btn-danger { background: #D4D0C8; color: #8B0000; font-weight: 700; } /* Ventanas / tarjetas de contenido = "diálogos" clásicos */ body[data-theme="retro"] .view-card, body[data-theme="retro"] .login-card, body[data-theme="retro"] .popup-box, body[data-theme="retro"] .welcome-panel, body[data-theme="retro"] .tabs-bar, body[data-theme="retro"] .theme-options .theme-card { border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; box-shadow: 1px 1px 0 #000000; } /* Barras de título estilo Windows 2000 (azul degradado, texto blanco) */ body[data-theme="retro"] .topbar, body[data-theme="retro"] .sidebar-header, body[data-theme="retro"] details.help-box summary { background: linear-gradient(90deg, #0A246A, #A6CAF0); color: #ffffff; border-radius: 0; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; font-weight: 700; border-bottom: 2px solid #404040; } body[data-theme="retro"] .brand-name, body[data-theme="retro"] .demo-badge-inline { font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] .brand-name { color: #ffffff; } body[data-theme="retro"] .sidebar { border-left: 2px solid #404040; } body[data-theme="retro"] .sidebar-footer { border-top: 2px solid; border-color: #404040 #ffffff #ffffff #404040; } /* Campos de formulario "hundidos" (inset), como en los diálogos de Win2k */ body[data-theme="retro"] .form-field input[type="text"], body[data-theme="retro"] .form-field input[type="date"], body[data-theme="retro"] .form-field input[type="number"], body[data-theme="retro"] .form-field select, body[data-theme="retro"] .form-field textarea, body[data-theme="retro"] .login-card form input { border-radius: 0; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; background: #ffffff; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] .form-field input:focus, body[data-theme="retro"] .login-card form input:focus { outline: 1px dotted #000000; outline-offset: -3px; } /* Checkbox / radio con marco clásico */ body[data-theme="retro"] .check-group label, body[data-theme="retro"] .radio-group label { border-radius: 0; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; background: #D4D0C8; } body[data-theme="retro"] input[type="checkbox"], body[data-theme="retro"] input[type="radio"] { accent-color: #0A246A; } /* Tablas tipo "grilla" clásica */ body[data-theme="retro"] table.data-table th { background: #D4D0C8; border: 1px solid #808080; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] table.data-table td { border-color: #808080; } body[data-theme="retro"] table.data-table tr:hover { background: #D4E4F7; } /* Pestañas de navegación con look de "solapas" de propiedades de Win2k */ body[data-theme="retro"] .tab-link { border-bottom: none; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] .tab-link.active { background: #D4D0C8; color: #000000; border-color: #ffffff #404040 #D4D0C8 #ffffff; } /* Popups / cuadros de diálogo con barra de título propia */ body[data-theme="retro"] .popup-box { padding-top: 0; overflow: hidden; } body[data-theme="retro"] .popup-box::before { content: 'Aviso del sistema'; display: block; background: linear-gradient(90deg, #0A246A, #A6CAF0); color: #ffffff; font-weight: 700; padding: 6px 10px; margin: -28px -28px 16px -28px; font-family: Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; } body[data-theme="retro"] .popup-close { top: 6px; right: 8px; color: #ffffff; background: #D4D0C8; border: 1px solid #404040; width: 18px; height: 18px; font-size: .9rem; line-height: 1; } /* Avatares cuadrados en vez de círculos, con cara de "botón estándar de Windows" (gris con bisel), en vez del azul de acento. */ body[data-theme="retro"] .profile-avatar, body[data-theme="retro"] .brand-logo, body[data-theme="retro"] .login-logo, body[data-theme="retro"] .info-btn { border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; background: #D4D0C8; color: #000000; } /* Enlaces de menú lateral con selección tipo "Explorador de Windows" */ body[data-theme="retro"] .menu-link-single.active { background: #0A246A; color: #ffffff; } body[data-theme="retro"] .breadcrumb-item.breadcrumb-current { color: #0A246A; } /* ========================================================================== Temas adicionales inspirados en las imágenes de referencia del usuario ========================================================================== */ /* ---------- Tema TERMINAL ---------- Inspirado en una consola tipo GNU nano: fondo negro, tipografía monoespaciada y acentos cian/verde como los de resaltado de sintaxis. */ body[data-theme="terminal"] { --color-primary: #4FD8FF; --color-primary-light: rgba(79, 216, 255, 0.16); --bg-app: #000000; --bg-panel: #0d0d0d; --border-soft: #333333; --text-main: #d4d4d4; --text-muted: #5fd75f; font-family: 'Courier New', Consolas, 'Lucida Console', monospace; } body[data-theme="terminal"] * { font-family: 'Courier New', Consolas, 'Lucida Console', monospace; } body[data-theme="terminal"] .topbar { background: #c6c6c6; color: #000000; border-bottom: 1px solid #808080; } body[data-theme="terminal"] .brand-name, body[data-theme="terminal"] .brand-logo { color: #000000; } body[data-theme="terminal"] .brand-logo { background: #4FD8FF; color: #000000; border-radius: 3px; } body[data-theme="terminal"] .view-card, body[data-theme="terminal"] .login-card, body[data-theme="terminal"] .popup-box, body[data-theme="terminal"] .welcome-panel, body[data-theme="terminal"] .tabs-bar { border: 1px solid #333333; border-radius: 4px; box-shadow: none; } body[data-theme="terminal"] .sidebar-header, body[data-theme="terminal"] details.help-box summary { background: #111111; color: #4FD8FF; border: 1px solid #333333; border-radius: 4px; } body[data-theme="terminal"] .sidebar { border-left: 1px solid #333333; } body[data-theme="terminal"] .btn { background: #0d0d0d; color: #4FD8FF; border: 1px solid #4FD8FF; border-radius: 3px; } body[data-theme="terminal"] .btn:hover { background: rgba(79,216,255,0.12); } body[data-theme="terminal"] .btn-primary { background: #4FD8FF; color: #000000; font-weight: 700; } body[data-theme="terminal"] .btn-danger { background: #0d0d0d; color: #ff6b6b; border-color: #ff6b6b; } body[data-theme="terminal"] .btn-logout-footer { border-color: #ff6b6b; color: #ff6b6b; } body[data-theme="terminal"] .form-field input, body[data-theme="terminal"] .form-field select, body[data-theme="terminal"] .form-field textarea, body[data-theme="terminal"] .login-card form input { background: #000000; color: #5fd75f; border: 1px solid #4FD8FF; border-radius: 3px; } body[data-theme="terminal"] table.data-table th { background: #111111; color: #4FD8FF; border-color: #333333; } body[data-theme="terminal"] table.data-table td { border-color: #262626; } body[data-theme="terminal"] table.data-table tr:hover { background: rgba(79,216,255,0.08); } body[data-theme="terminal"] .menu-link-single.active { background: rgba(79,216,255,0.16); color: #4FD8FF; } body[data-theme="terminal"] .breadcrumb-item.breadcrumb-current { color: #4FD8FF; } body[data-theme="terminal"] .tab-link.active { color: #4FD8FF; border-bottom-color: #4FD8FF; background: rgba(79,216,255,0.1); } /* ---------- Tema PANEL VERDE ---------- Inspirado en un panel de administración con menú lateral oscuro, filas de contenido en verde menta y botones de acción muy coloridos. */ body[data-theme="panel_verde"] { --color-primary: #2f6fed; --color-primary-light: #e2edff; --bg-app: #eaf5ea; --bg-panel: #ffffff; --border-soft: #d5e8d5; --text-main: #1f2937; --text-muted: #6b7280; font-family: 'Segoe UI', Roboto, Arial, sans-serif; } body[data-theme="panel_verde"] .sidebar { background: #14141f; border-left: 1px solid #14141f; } body[data-theme="panel_verde"] .sidebar-header { background: #14141f; color: #ffffff; border-bottom: 1px solid #2a2a3a; } body[data-theme="panel_verde"] .menu-link-single { color: #cfd3dc; } body[data-theme="panel_verde"] .menu-link-single:hover { background: #22222f; color: #ffffff; } body[data-theme="panel_verde"] .menu-link-single.active { background: #2f6fed; color: #ffffff; } body[data-theme="panel_verde"] .sidebar-footer { border-top: 1px solid #2a2a3a; } body[data-theme="panel_verde"] .sidebar-profile .profile-name, body[data-theme="panel_verde"] .sidebar-profile .profile-role { color: #ffffff; } body[data-theme="panel_verde"] .btn-logout-footer { border-color: #2a2a3a; color: #ffffff; } body[data-theme="panel_verde"] .btn-open-sidebar { background: #14141f; } body[data-theme="panel_verde"] table.data-table tr:nth-child(even) { background: #f3faf3; } body[data-theme="panel_verde"] .btn-primary { background: #2f6fed; } body[data-theme="panel_verde"] .btn-danger { background: #e53e3e; } body[data-theme="panel_verde"] .tab-link.active { color: #2f6fed; border-bottom-color: #2f6fed; } /* ---------- Tema PANEL TEAL ---------- Inspirado en un panel de pedidos con menú lateral oscuro, acentos naranjos y estados en verde. */ body[data-theme="panel_teal"] { --color-primary: #f2994a; --color-primary-light: #fdece0; --bg-app: #f4f6f8; --bg-panel: #ffffff; --border-soft: #e2e5ea; --text-main: #2d2d2d; --text-muted: #8a8f98; font-family: 'Segoe UI', Roboto, Arial, sans-serif; } body[data-theme="panel_teal"] .sidebar { background: #12212a; border-left: 1px solid #12212a; } body[data-theme="panel_teal"] .sidebar-header { background: #12212a; color: #ffffff; border-bottom: 1px solid #223842; } body[data-theme="panel_teal"] .menu-link-single { color: #b9c6cc; } body[data-theme="panel_teal"] .menu-link-single:hover { background: #1b333f; color: #ffffff; } body[data-theme="panel_teal"] .menu-link-single.active { background: #f2994a; color: #12212a; font-weight: 700; } body[data-theme="panel_teal"] .sidebar-footer { border-top: 1px solid #223842; } body[data-theme="panel_teal"] .sidebar-profile .profile-name, body[data-theme="panel_teal"] .sidebar-profile .profile-role { color: #ffffff; } body[data-theme="panel_teal"] .btn-logout-footer { border-color: #223842; color: #ffffff; } body[data-theme="panel_teal"] .btn-open-sidebar { background: #12212a; } body[data-theme="panel_teal"] .btn-primary { background: #f2994a; color: #12212a; font-weight: 700; } body[data-theme="panel_teal"] .btn-danger { background: #e53e3e; } body[data-theme="panel_teal"] .tab-link.active { color: #f2994a; border-bottom-color: #f2994a; } body[data-theme="panel_teal"] table.data-table th { background: #fdece0; } /* Scrollbar clásica gris con flechas (solo navegadores basados en WebKit/Blink) */ body[data-theme="retro"] ::-webkit-scrollbar { width: 16px; height: 16px; } body[data-theme="retro"] ::-webkit-scrollbar-track { background: #D4D0C8; } body[data-theme="retro"] ::-webkit-scrollbar-thumb { background: #C0C0C0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; } /* ---------- Tema MS-DOS AZUL ---------- Inspirado en la pantalla clásica de arranque de DOSBox / MS-DOS: fondo azul, texto blanco/amarillo/cian, tipografía monoespaciada y marco de consola sobre fondo negro. Recreado con CSS propio. */ body[data-theme="dos"] { --color-primary: #FFFF55; /* amarillo de encabezados/acentos */ --color-primary-light: rgba(255,255,85,0.18); --bg-app: #000000; /* negro alrededor de la "consola" */ --bg-panel: #0000AA; /* azul clásico de DOS */ --border-soft: #FFFFFF; --text-main: #FFFFFF; --text-muted: #55FFFF; /* cian */ font-family: 'Courier New', Consolas, 'Lucida Console', monospace; } body[data-theme="dos"] * { font-family: 'Courier New', Consolas, 'Lucida Console', monospace; } body[data-theme="dos"] .topbar { background: #0000AA; color: #FFFF55; border-bottom: 2px solid #FFFFFF; } body[data-theme="dos"] .brand-name { color: #FFFF55; font-weight: 700; } body[data-theme="dos"] .brand-logo { background: #000000; color: #55FF55; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .view-card, body[data-theme="dos"] .login-card, body[data-theme="dos"] .popup-box, body[data-theme="dos"] .welcome-panel, body[data-theme="dos"] .tabs-bar { border: 2px solid #FFFFFF; border-radius: 0; box-shadow: none; } body[data-theme="dos"] .sidebar { background: #0000AA; border-left: 2px solid #FFFFFF; } body[data-theme="dos"] .sidebar-header { background: #0000AA; color: #FFFF55; border-bottom: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .menu-link-single { color: #FFFFFF; } body[data-theme="dos"] .menu-link-single:hover { background: rgba(255,255,255,0.12); } body[data-theme="dos"] .menu-link-single.active { background: #FFFF55; color: #0000AA; font-weight: 700; } body[data-theme="dos"] .sidebar-footer { border-top: 2px solid #FFFFFF; } body[data-theme="dos"] .sidebar-profile .profile-name, body[data-theme="dos"] .sidebar-profile .profile-role { color: #FFFFFF; } body[data-theme="dos"] .profile-avatar { background: #000000; color: #55FF55; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .btn-logout-footer { border: 2px solid #FFFFFF; color: #FFFFFF; } body[data-theme="dos"] .btn-open-sidebar { background: #0000AA; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .btn { background: #0000AA; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .btn:hover { background: #5555FF; } body[data-theme="dos"] .btn-primary { background: #FFFF55; color: #0000AA; font-weight: 700; } body[data-theme="dos"] .btn-danger { background: #AA0000; color: #FFFFFF; } body[data-theme="dos"] .btn-icon { background: #0000AA; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .form-field input, body[data-theme="dos"] .form-field select, body[data-theme="dos"] .form-field textarea, body[data-theme="dos"] .login-card form input { background: #000000; color: #55FF55; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] table.data-table th { background: #0000AA; color: #FFFF55; border: 1px solid #FFFFFF; } body[data-theme="dos"] table.data-table td { border-color: #5555AA; } body[data-theme="dos"] table.data-table tr:hover { background: rgba(255,255,255,0.08); } body[data-theme="dos"] .tab-link { color: #55FFFF; } body[data-theme="dos"] .tab-link.active { color: #FFFF55; background: rgba(255,255,255,0.1); border-bottom-color: #FFFF55; } body[data-theme="dos"] .breadcrumb-item.breadcrumb-current { color: #FFFF55; } body[data-theme="dos"] details.help-box summary { background: #0000AA; color: #FFFF55; border: 2px solid #FFFFFF; border-radius: 0; } body[data-theme="dos"] .demo-badge { background: #000000; color: #FFFF55; border-color: #FFFFFF; } /* ---------- Tema MAC AQUA ---------- Inspirado en el Finder de Mac OS X (Leopard/Snow Leopard): grises muy suaves, azul "Aqua" de selección, esquinas redondeadas y tipografía Lucida Grande. Recreado con CSS propio — no reproduce ninguna imagen. */ body[data-theme="mac_aqua"] { --color-primary: #3875D7; --color-primary-light: #EAF1FC; --bg-app: #E7E7E7; --bg-panel: #FFFFFF; --border-soft: #D2D2D2; --text-main: #1D1D1F; --text-muted: #6E6E73; font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body[data-theme="mac_aqua"] * { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body[data-theme="mac_aqua"] .topbar { background: linear-gradient(180deg, #f7f7f7, #e2e2e2); border-bottom: 1px solid #c7c7c7; } body[data-theme="mac_aqua"] .brand-logo { border-radius: 7px; background: linear-gradient(180deg, #5b9bf5, #3875D7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } body[data-theme="mac_aqua"] .view-card, body[data-theme="mac_aqua"] .login-card, body[data-theme="mac_aqua"] .popup-box, body[data-theme="mac_aqua"] .welcome-panel, body[data-theme="mac_aqua"] .tabs-bar, body[data-theme="mac_aqua"] .theme-card { border-radius: 12px; border: 1px solid #d2d2d2; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.05); } body[data-theme="mac_aqua"] .sidebar-header { background: linear-gradient(180deg, #fbfbfb, #ececec); border-bottom: 1px solid #d2d2d2; color: #1D1D1F; } body[data-theme="mac_aqua"] .sidebar { border-left: 1px solid #d2d2d2; } body[data-theme="mac_aqua"] .menu-link-single { border-radius: 8px; } body[data-theme="mac_aqua"] .menu-link-single.active { background: linear-gradient(180deg, #5b9bf5, #3875D7); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } body[data-theme="mac_aqua"] .sidebar-footer { border-top: 1px solid #d2d2d2; } body[data-theme="mac_aqua"] .btn { border-radius: 999px; /* botones tipo "píldora" al estilo Aqua */ border: 1px solid #c2c2c2; background: linear-gradient(180deg, #ffffff, #efefef); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } body[data-theme="mac_aqua"] .btn-primary { background: linear-gradient(180deg, #5b9bf5, #3875D7); color: #ffffff; border-color: #2a5fc0; } body[data-theme="mac_aqua"] .btn-danger { background: linear-gradient(180deg, #ff8a80, #e0554a); color: #ffffff; border-color: #c94a40; } body[data-theme="mac_aqua"] .btn-icon { border-radius: 50%; } body[data-theme="mac_aqua"] .btn-logout-footer { border-radius: 999px; } body[data-theme="mac_aqua"] .btn-open-sidebar { box-shadow: 0 2px 8px rgba(0,0,0,0.25); } body[data-theme="mac_aqua"] .form-field input, body[data-theme="mac_aqua"] .form-field select, body[data-theme="mac_aqua"] .form-field textarea, body[data-theme="mac_aqua"] .login-card form input { border-radius: 7px; border: 1px solid #c2c2c2; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); } body[data-theme="mac_aqua"] .form-field input:focus, body[data-theme="mac_aqua"] .login-card form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(56,117,215,0.35); } body[data-theme="mac_aqua"] table.data-table th { background: #f2f2f2; } body[data-theme="mac_aqua"] table.data-table tr:hover { background: #EAF1FC; } body[data-theme="mac_aqua"] .tab-link { border-radius: 8px 8px 0 0; } body[data-theme="mac_aqua"] .tab-link.active { color: #3875D7; border-bottom-color: #3875D7; } body[data-theme="mac_aqua"] .breadcrumb-item.breadcrumb-current { color: #3875D7; } body[data-theme="mac_aqua"] details.help-box summary { border-radius: 8px 8px 0 0; } body[data-theme="mac_aqua"] .demo-badge { border-radius: 8px; } /* "Semáforo" de botones de ventana, como en la barra de título de Mac OS X. El punto rojo es el botón de cerrar real (mantiene su funcionalidad); los otros dos son decorativos. */ body[data-theme="mac_aqua"] .popup-box { position: relative; padding-top: 34px; } body[data-theme="mac_aqua"] .popup-close { top: 14px; left: 16px; right: auto; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; border: none; color: transparent; box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840; } /* ---------- Tema MAC CLÁSICO (System 6/7) ---------- Inspirado en la interfaz monocromática del Macintosh clásico: blanco y negro puros, barras de título "rayadas", ventanas de esquinas cuadradas, tipografía tipo Chicago/Geneva y textura de escritorio con trama. Recreado con CSS propio — no reproduce ninguna imagen. */ body[data-theme="mac_classic"] { --color-primary: #000000; --color-primary-light: #E8E8E8; --bg-app: #DCDCDC; --bg-panel: #FFFFFF; --border-soft: #000000; --text-main: #000000; --text-muted: #444444; font-family: Geneva, Chicago, 'Helvetica Neue', Helvetica, Arial, sans-serif; } body[data-theme="mac_classic"] * { font-family: Geneva, Chicago, 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Textura de escritorio con trama de puntos, como el fondo clásico del Finder */ body[data-theme="mac_classic"] { background-image: repeating-conic-gradient(#cfcfcf 0% 25%, #DCDCDC 0% 50%); background-size: 4px 4px; } /* Barra de título "rayada" clásica de las ventanas activas de Mac OS */ body[data-theme="mac_classic"] .topbar, body[data-theme="mac_classic"] .sidebar-header, body[data-theme="mac_classic"] details.help-box summary { background-color: #ffffff; background-image: repeating-linear-gradient(0deg, #000 0px, #000 1px, #fff 1px, #fff 3px); border: 1px solid #000000; border-radius: 0; color: #000000; box-shadow: none; } body[data-theme="mac_classic"] .brand-name, body[data-theme="mac_classic"] .sidebar-header span { background: #ffffff; padding: 2px 10px; border: 1px solid #000000; font-weight: 700; } body[data-theme="mac_classic"] details.help-box summary::before { content: ''; } body[data-theme="mac_classic"] details.help-box summary { display: flex; justify-content: center; } body[data-theme="mac_classic"] .brand-logo, body[data-theme="mac_classic"] .profile-avatar, body[data-theme="mac_classic"] .login-logo { background: #000000; color: #ffffff; border-radius: 0; border: 1px solid #000000; } body[data-theme="mac_classic"] .view-card, body[data-theme="mac_classic"] .login-card, body[data-theme="mac_classic"] .popup-box, body[data-theme="mac_classic"] .welcome-panel, body[data-theme="mac_classic"] .tabs-bar, body[data-theme="mac_classic"] .theme-card { border: 1px solid #000000; border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); } body[data-theme="mac_classic"] .sidebar { border-left: 1px solid #000000; } body[data-theme="mac_classic"] .sidebar-footer { border-top: 1px solid #000000; } /* Selección "video invertido": fondo negro y texto blanco, como al elegir un ítem de menú en el Mac clásico. */ body[data-theme="mac_classic"] .menu-link-single.active { background: #000000; color: #ffffff; } body[data-theme="mac_classic"] .menu-link-single:hover { background: #E8E8E8; } body[data-theme="mac_classic"] .tab-link.active { background: #000000; color: #ffffff; border-bottom-color: #000000; } body[data-theme="mac_classic"] .btn { background: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 3px; box-shadow: none; } body[data-theme="mac_classic"] .btn:hover { background: #000000; color: #ffffff; } body[data-theme="mac_classic"] .btn-primary { background: #000000; color: #ffffff; font-weight: 700; } body[data-theme="mac_classic"] .btn-primary:hover { background: #333333; } body[data-theme="mac_classic"] .btn-danger { background: #ffffff; color: #000000; border: 2px solid #000000; } body[data-theme="mac_classic"] .btn-icon { border-radius: 3px; border: 1px solid #000000; } body[data-theme="mac_classic"] .btn-logout-footer { border-radius: 3px; } body[data-theme="mac_classic"] .btn-open-sidebar { background: #000000; border-radius: 3px; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); } body[data-theme="mac_classic"] .form-field input, body[data-theme="mac_classic"] .form-field select, body[data-theme="mac_classic"] .form-field textarea, body[data-theme="mac_classic"] .login-card form input { border: 1px solid #000000; border-radius: 0; background: #ffffff; box-shadow: none; } body[data-theme="mac_classic"] input[type="checkbox"], body[data-theme="mac_classic"] input[type="radio"] { accent-color: #000000; } body[data-theme="mac_classic"] table.data-table th { background: #000000; color: #ffffff; border: 1px solid #000000; } body[data-theme="mac_classic"] table.data-table td { border-color: #000000; } body[data-theme="mac_classic"] table.data-table tr:hover { background: #E8E8E8; } body[data-theme="mac_classic"] .breadcrumb-item.breadcrumb-current { color: #000000; font-weight: 700; } body[data-theme="mac_classic"] .demo-badge { border: 1px solid #000000; border-radius: 0; background: #ffffff; color: #000000; } /* Popup tipo alerta clásica de Mac: caja blanca cuadrada con marco negro y sombra "escalón", sin barra de título de color. */ body[data-theme="mac_classic"] .popup-box { border-width: 2px; } body[data-theme="mac_classic"] .popup-icon { color: #000000; } body[data-theme="mac_classic"] .popup-close { border-radius: 0; border: 1px solid #000000; background: #ffffff; color: #000000; }