/* ============================================================ D'GABY — Sistema de diseño compartido (Fase A, UI/UX Premium) ============================================================ Variables, tipografía y componentes base reutilizables en TODO el sitio (público + panel admin). Este archivo NO reemplaza a style.css ni admin.css: se carga ANTES de ambos, y ambos pueden seguir funcionando y sobrescribiendo donde lo necesiten. No contiene selectores de página específicos (eso vive en cada fase: Home, Catálogo, Admin, Dashboard, etc.). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { /* ---- Paleta oscura (por defecto) — negro elegante + dorado, según tus referencias ---- */ --dg-bg: #0a0a12; --dg-bg-alt: #07070d; --dg-surface: #14141f; --dg-surface-soft: #1c1c2b; --dg-surface-elevated: #262637; --dg-text: #f5f3ee; --dg-muted: #a39d8f; --dg-border: rgba(212, 175, 55, 0.16); --dg-accent: #d4af37; /* dorado D'GABY */ --dg-accent-soft: #f0c56b; --dg-accent-strong: #b8901f; --dg-accent-contrast: #1a1200; /* texto sobre fondo dorado */ --dg-secondary: #8a5cf6; /* violeta (Alquileres) */ --dg-secondary-soft: #c9b6fb; --dg-info-alt: #2fb8c9; /* turquesa (Reportes) */ /* ---- Colores semánticos (estados) — iguales en claro y oscuro ---- */ --dg-success: #2ecc71; --dg-success-bg: rgba(46, 204, 113, 0.12); --dg-warning: #d4af37; --dg-warning-bg: rgba(212, 175, 55, 0.14); --dg-danger: #e74c3c; --dg-danger-bg: rgba(231, 76, 60, 0.12); --dg-info: #3fa7ff; --dg-info-bg: rgba(63, 167, 255, 0.12); /* ---- Sombras (más marcadas en oscuro) ---- */ --dg-shadow-sm: 0 2px 8px rgba(0,0,0,.35); --dg-shadow-md: 0 10px 30px rgba(0,0,0,.45); --dg-shadow-lg: 0 20px 50px rgba(0,0,0,.55); } /* ---- Paleta clara — se activa con ---- */ [data-theme="light"] { --dg-bg: #f8f6f0; --dg-bg-alt: #ffffff; --dg-surface: #ffffff; --dg-surface-soft: #f2ede1; --dg-surface-elevated: #ffffff; --dg-text: #241f14; --dg-muted: #6f6858; --dg-border: rgba(180, 140, 30, 0.22); --dg-accent: #b8901f; --dg-accent-soft: #e0b84f; --dg-accent-strong: #8f6f16; --dg-accent-contrast: #fffaf0; --dg-secondary: #7c4fe0; --dg-secondary-soft: #a883f0; --dg-info-alt: #1f95a3; --dg-success-bg: rgba(46, 204, 113, 0.14); --dg-warning-bg: rgba(184, 144, 31, 0.14); --dg-danger-bg: rgba(231, 76, 60, 0.1); --dg-info-bg: rgba(63, 167, 255, 0.1); --dg-shadow-sm: 0 2px 8px rgba(30,20,0,.08); --dg-shadow-md: 0 10px 30px rgba(30,20,0,.10); --dg-shadow-lg: 0 20px 50px rgba(30,20,0,.14); } :root { /* ---- Tipografía ---- */ --dg-font-heading: 'Cormorant Garamond', serif; --dg-font-body: 'Poppins', sans-serif; /* ---- Forma ---- */ --dg-radius-sm: 8px; --dg-radius-md: 14px; --dg-radius-lg: 24px; /* ---- Transiciones (velocidad profesional, sin abusar) ---- */ --dg-transition-fast: .18s ease; --dg-transition: .3s ease; --dg-theme-transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Transición suave al alternar entre tema oscuro/claro */ body, .dg-card, .dg-btn, .dg-input, .dg-select, .dg-textarea, .admin-sidebar, .admin-header, .dg-table, .dg-modal, .dg-toast { transition: var(--dg-theme-transition); } /* ============ Animaciones suaves ============ */ @keyframes dgFadeIn { from { opacity:0; } to { opacity:1; } } @keyframes dgSlideUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } } @keyframes dgSlideDown{ from { opacity:0; transform: translateY(-12px); } to { opacity:1; transform: translateY(0); } } @keyframes dgZoomIn { from { opacity:0; transform: scale(.94); } to { opacity:1; transform: scale(1); } } @keyframes dgSpin { to { transform: rotate(360deg); } } @keyframes dgRipple { to { transform: scale(3); opacity: 0; } } .dg-fade-in { animation: dgFadeIn var(--dg-transition) both; } .dg-slide-up { animation: dgSlideUp var(--dg-transition) both; } .dg-zoom-in { animation: dgZoomIn var(--dg-transition) both; } @media (prefers-reduced-motion: reduce) { .dg-fade-in, .dg-slide-up, .dg-zoom-in, .dg-alert, .dg-modal, .dg-modal-backdrop { animation: none !important; } } /* ============ Foco accesible visible (navegación por teclado) ============ */ .dg-btn:focus-visible, .dg-input:focus-visible, .dg-select:focus-visible, .dg-textarea:focus-visible, a.dg-link:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; } /* ============ Botones ============ */ .dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--dg-font-body); font-weight: 600; font-size: .95rem; padding: .7em 1.4em; border-radius: var(--dg-radius-sm); border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--dg-transition-fast), box-shadow var(--dg-transition-fast), background var(--dg-transition-fast), opacity var(--dg-transition-fast); text-decoration: none; } .dg-btn:hover { transform: translateY(-1px); } .dg-btn:active { transform: translateY(0); } .dg-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .dg-btn--primary { background: var(--dg-accent); color: #1a1200; box-shadow: var(--dg-shadow-sm); } .dg-btn--primary:hover { background: var(--dg-accent-strong); box-shadow: var(--dg-shadow-md); } .dg-btn--secondary { background: var(--dg-secondary); color: #fff; box-shadow: var(--dg-shadow-sm); } .dg-btn--secondary:hover { opacity: .92; box-shadow: var(--dg-shadow-md); } .dg-btn--outline { background: transparent; color: var(--dg-accent); border-color: var(--dg-accent); } .dg-btn--outline:hover { background: rgba(245,166,35,.1); } .dg-btn--ghost { background: transparent; color: var(--dg-text); border-color: var(--dg-border); } .dg-btn--ghost:hover { background: rgba(255,255,255,.06); } .dg-btn--danger { background: var(--dg-danger); color: #fff; } .dg-btn--danger:hover { opacity: .9; } .dg-btn--sm { padding: .45em 1em; font-size: .85rem; } .dg-btn--lg { padding: .9em 1.9em; font-size: 1.05rem; } /* ============ Cards ============ */ .dg-card { background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: var(--dg-radius-lg); box-shadow: var(--dg-shadow-sm); transition: transform var(--dg-transition), box-shadow var(--dg-transition), border-color var(--dg-transition); } .dg-card--hover:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow-lg); border-color: var(--dg-accent-soft); } .dg-card__header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--dg-border); font-family: var(--dg-font-heading); } .dg-card__body { padding: 1.5rem; } .dg-card__footer { padding: 1rem 1.5rem; border-top: 1px solid var(--dg-border); } /* ============ Badges / etiquetas de estado ============ */ .dg-badge { display: inline-flex; align-items: center; gap: .35em; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: .3em .75em; border-radius: 999px; text-transform: uppercase; } .dg-badge--success { background: var(--dg-success-bg); color: var(--dg-success); } .dg-badge--warning { background: var(--dg-warning-bg); color: var(--dg-warning); } .dg-badge--danger { background: var(--dg-danger-bg); color: var(--dg-danger); } .dg-badge--info { background: var(--dg-info-bg); color: var(--dg-info); } .dg-badge--neutral { background: rgba(255,255,255,.08); color: var(--dg-muted); } /* ============ Alertas ============ */ .dg-alert { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--dg-radius-sm); border: 1px solid transparent; font-size: .92rem; animation: dgSlideDown var(--dg-transition) both; } .dg-alert--success { background: var(--dg-success-bg); color: var(--dg-success); border-color: rgba(46,204,113,.3); } .dg-alert--warning { background: var(--dg-warning-bg); color: var(--dg-warning); border-color: rgba(245,166,35,.3); } .dg-alert--danger { background: var(--dg-danger-bg); color: var(--dg-danger); border-color: rgba(231,76,60,.3); } .dg-alert--info { background: var(--dg-info-bg); color: var(--dg-info); border-color: rgba(63,167,255,.3); } /* ============ Formularios ============ */ /* Etiqueta accesible para campos donde el diseño usa icono + placeholder en vez de un