/* ============================================================ Z1VERSO — Tema oscuro "glass" con la paleta del logotipo ------------------------------------------------------------ Fondo oscuro con luces difusas rojo/cian (colores del logo) y paneles de vidrio esmerilado (translúcidos con desenfoque). Rojo coral → botones y acentos de acción Cian → precios, enlaces y detalles Este archivo se comparte entre TODAS las páginas del sistema. Requiere y Bootstrap 5.3. ============================================================ */ :root { --z1-rojo: #f0455a; --z1-rojo-osc: #d32f44; --z1-rojo-claro: #ff6b7c; --z1-cian: #58c2de; --z1-cian-claro: #a5e0ef; --z1-grad: linear-gradient(135deg, #f0455a, #58c2de); --z1-fondo: #0b0e14; /* Paneles translúcidos (efecto vidrio) */ --z1-panel: rgba(23, 28, 39, .55); --z1-panel-2: rgba(44, 52, 70, .45); --z1-borde: rgba(255, 255, 255, .09); --z1-borde-hover: rgba(165, 224, 239, .4); --z1-blur: blur(16px) saturate(1.5); --z1-texto: #e9edf3; --z1-texto-suave: #9aa3b2; } /* ----- Base Bootstrap en modo oscuro ----- */ [data-bs-theme=dark] { --bs-body-bg: var(--z1-fondo); --bs-body-color: var(--z1-texto); --bs-border-color: var(--z1-borde); --bs-secondary-bg: var(--z1-panel-2); --bs-tertiary-bg: var(--z1-panel); --bs-primary: var(--z1-rojo); --bs-primary-rgb: 240, 69, 90; --bs-link-color: var(--z1-cian); --bs-link-hover-color: var(--z1-cian-claro); --bs-link-color-rgb: 88, 194, 222; --bs-link-hover-color-rgb: 165, 224, 239; } ::selection { background: rgba(240, 69, 90, .45); } /* ----- Fondo del sitio: luces difusas con los colores del logo ----- */ [data-bs-theme=dark] body { position: relative; } [data-bs-theme=dark] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(720px 480px at 12% -8%, color-mix(in srgb, var(--z1-rojo) 17%, transparent), transparent 62%), radial-gradient(820px 540px at 88% -12%, color-mix(in srgb, var(--z1-cian) 15%, transparent), transparent 62%), radial-gradient(700px 700px at 78% 82%, color-mix(in srgb, var(--z1-rojo) 8%, transparent), transparent 60%), radial-gradient(640px 640px at 8% 92%, color-mix(in srgb, var(--z1-cian) 8%, transparent), transparent 60%), var(--z1-fondo); } /* Franja degradada de marca (bajo la barra de navegación) */ .z1-strip { height: 3px; background: var(--z1-grad); box-shadow: 0 1px 10px rgba(240, 69, 90, .35); } /* Utilidad: panel de vidrio */ .z1-glass { background: var(--z1-panel); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 14px; } /* ----- Barra de navegación: vidrio oscuro ----- */ [data-bs-theme=dark] .navbar.bg-dark, [data-bs-theme=dark] .navbar[class*=bg-dark] { background-color: rgba(7, 9, 13, .68) !important; -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border-bottom: 1px solid var(--z1-borde); } /* ----- Botones ----- */ .btn { border-radius: 10px; } .btn-primary { --bs-btn-bg: var(--z1-rojo); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--z1-rojo-osc); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--z1-rojo-osc); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--z1-rojo); --bs-btn-disabled-border-color: transparent; --bs-btn-focus-shadow-rgb: 240, 69, 90; box-shadow: 0 4px 18px rgba(240, 69, 90, .3); } .btn-success { box-shadow: 0 4px 18px rgba(25, 135, 84, .25); } .btn-outline-primary { --bs-btn-color: var(--z1-cian); --bs-btn-border-color: rgba(88, 194, 222, .5); --bs-btn-hover-bg: var(--z1-cian); --bs-btn-hover-border-color: var(--z1-cian); --bs-btn-hover-color: #0b0e14; --bs-btn-active-bg: var(--z1-cian); --bs-btn-active-border-color: var(--z1-cian); --bs-btn-active-color: #0b0e14; --bs-btn-focus-shadow-rgb: 88, 194, 222; } [data-bs-theme=dark] .btn-dark { --bs-btn-bg: var(--z1-panel-2); --bs-btn-border-color: var(--z1-borde); --bs-btn-hover-bg: rgba(60, 70, 92, .55); --bs-btn-hover-border-color: var(--z1-borde-hover); } [data-bs-theme=dark] .btn-outline-dark, [data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--z1-texto); --bs-btn-border-color: var(--z1-borde); --bs-btn-hover-bg: var(--z1-panel-2); --bs-btn-hover-border-color: var(--z1-borde-hover); --bs-btn-hover-color: var(--z1-texto); --bs-btn-active-bg: var(--z1-panel-2); --bs-btn-active-border-color: var(--z1-borde-hover); --bs-btn-active-color: var(--z1-texto); } [data-bs-theme=dark] .btn-light { --bs-btn-bg: rgba(255, 255, 255, .88); --bs-btn-border-color: transparent; } /* ----- Colores utilitarios re-mapeados ----- */ [data-bs-theme=dark] .text-primary { color: var(--z1-cian) !important; } .bg-primary { background: var(--z1-grad) !important; } [data-bs-theme=dark] .bg-light { background-color: var(--z1-panel-2) !important; } [data-bs-theme=dark] .bg-light.text-dark { color: var(--z1-texto) !important; } [data-bs-theme=dark] .badge.bg-light { color: var(--z1-texto-suave); } .badge { border-radius: 8px; } /* ----- Tarjetas y paneles: vidrio esmerilado ----- */ [data-bs-theme=dark] .card { background-color: var(--z1-panel); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); } [data-bs-theme=dark] .card .card-header, [data-bs-theme=dark] .card .card-footer { background: rgba(255, 255, 255, .03); } [data-bs-theme=dark] .modal-content { background-color: rgba(20, 25, 35, .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--z1-borde); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } [data-bs-theme=dark] .modal-header, [data-bs-theme=dark] .modal-footer { border-color: var(--z1-borde); } [data-bs-theme=dark] .modal-header.bg-dark { background-color: rgba(255, 255, 255, .04) !important; } [data-bs-theme=dark] .dropdown-menu { background-color: rgba(20, 25, 35, .85); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, .55); } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { background: rgba(255, 255, 255, .06); } /* ----- Formularios: campos translúcidos ----- */ [data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .input-group-text { background-color: rgba(255, 255, 255, .055); border-color: var(--z1-borde); border-radius: 10px; } [data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { background-color: rgba(255, 255, 255, .08); border-color: var(--z1-cian); box-shadow: 0 0 0 .25rem rgba(88, 194, 222, .18); } [data-bs-theme=dark] .form-control::placeholder { color: rgba(233, 237, 243, .38); } /* Opciones de los desplegables legibles en tema oscuro (fondo sólido) */ [data-bs-theme=dark] select option, [data-bs-theme=dark] select optgroup { background-color: #161c27; color: #e9edf3; } .form-check-input:checked { background-color: var(--z1-rojo); border-color: var(--z1-rojo); } [data-bs-theme=dark] .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: var(--z1-borde); } /* ----- Tablas y listas: transparentes para que se vea el vidrio ----- */ [data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); --bs-table-border-color: var(--z1-borde); } [data-bs-theme=dark] .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--z1-borde); --bs-list-group-action-hover-bg: rgba(255, 255, 255, .05); } /* ----- Alertas de marca ----- */ [data-bs-theme=dark] .alert { border-radius: 14px; } [data-bs-theme=dark] .alert-primary { background: linear-gradient(135deg, rgba(240, 69, 90, .16), rgba(88, 194, 222, .16)); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); color: var(--z1-texto); } [data-bs-theme=dark] .alert-info { background: rgba(88, 194, 222, .12); border: 1px solid rgba(88, 194, 222, .35); color: var(--z1-texto); } /* ----- Cintillo "Exclusivo" (productos propios de la tienda) ----- */ .cinta-exclusivo { position: absolute; top: 14px; right: -40px; transform: rotate(45deg); background: var(--z1-grad); color: #fff; font-weight: 800; font-size: .64rem; letter-spacing: .6px; text-transform: uppercase; padding: 4px 44px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); z-index: 4; pointer-events: none; } /* ----- Pestañas tipo píldora ----- */ .nav-pills { --bs-nav-pills-link-active-bg: var(--z1-rojo); --bs-nav-link-color: var(--z1-cian); --bs-nav-link-hover-color: var(--z1-cian-claro); } .nav-pills .nav-link { border-radius: 10px; } .nav-pills .nav-link.active { box-shadow: 0 4px 16px rgba(240, 69, 90, .35); } /* ----- Paginación ----- */ .pagination { --bs-pagination-active-bg: var(--z1-rojo); --bs-pagination-active-border-color: transparent; --bs-pagination-color: var(--z1-cian); --bs-pagination-hover-color: var(--z1-cian-claro); } [data-bs-theme=dark] .pagination { --bs-pagination-bg: var(--z1-panel); --bs-pagination-border-color: var(--z1-borde); --bs-pagination-hover-bg: var(--z1-panel-2); --bs-pagination-hover-border-color: var(--z1-borde); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--z1-borde); } /* ----- Barras de progreso ----- */ [data-bs-theme=dark] .progress { background-color: rgba(255, 255, 255, .08); } [data-bs-theme=dark] .progress-bar { background: var(--z1-grad); } /* ----- Barra de desplazamiento sutil ----- */ [data-bs-theme=dark] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-bs-theme=dark] ::-webkit-scrollbar-track { background: transparent; } [data-bs-theme=dark] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 5px; } [data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }