/* ========================================================================== BASE.CSS — Sistema de diseño global (modo claro + oscuro) Aplica a toda la tienda y al panel admin. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens de diseño (valores base) - Los colores principales se apoyan en --primary que ya viene de header.php -------------------------------------------------------------------------- */ :root { /* Colores base (modo claro) */ --bg: #f5f7fb; /* Fondo general de la página */ --bg-alt: #e5e7f0; /* Fondos secundarios / secciones */ --surface: #ffffff; /* Tarjetas, bloques */ --surface-muted: #f3f4f6; /* Tarjetas suaves, fondos ligeros */ --border-subtle: #e5e7eb; /* Bordes suaves */ --border-strong: #cbd5e1; /* Bordes más marcados */ --text-main: #111827; /* Texto principal */ --text-muted: #6b7280; /* Texto secundario */ --text-on-primary: #ffffff; /* Texto sobre botones primarios */ /* Primary viene del header (configuración de la tienda). Si no existiera, estos sirven como fallback. */ --primary: #0066ff; --primary-500: var(--primary); --primary-600: #0052cc; --primary-700: #003f99; --accent: #22c55e; /* Verde éxito / etiquetas positivas */ --danger: #ef4444; /* Errores */ --warning: #facc15; /* Advertencias */ --info: #0ea5e9; /* Info neutra */ --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.12); --radius-sm: 0.5rem; --radius-md: 0.9rem; --radius-lg: 1.4rem; --nav-height: 64px; --transition-fast: 0.15s ease-out; --transition-normal: 0.25s ease; /* Opacidades útiles */ --alpha-soft: 0.08; --alpha-medium: 0.16; } /* -------------------------------------------------------------------------- 2. MODO OSCURO (controlado por ) -------------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #020617; /* slate-950 */ --bg-alt: #020617; --surface: #020617; /* bloque principal */ --surface-muted: #020617; --border-subtle: rgba(148, 163, 184, 0.35); --border-strong: rgba(148, 163, 184, 0.6); --text-main: #e5e7eb; --text-muted: #9ca3af; --text-on-primary: #ffffff; --primary-500: var(--primary); --primary-600: #60a5fa; /* azul más suave para dark */ --primary-700: #3b82f6; --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.7); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.9); } /* -------------------------------------------------------------------------- 3. Reset ligero + tipografía base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; background-color: var(--bg); color: var(--text-main); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; /* Animación suave cuando cambiamos tema */ transition: background-color var(--transition-normal), color var(--transition-normal); } /* Corrige el body con navbar fija que ya usas */ body.has-fixed-nav { padding-top: var(--nav-height); } /* Enlaces generales */ a { color: var(--primary-600); text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } a:hover { color: var(--primary-700); text-decoration: underline; } /* -------------------------------------------------------------------------- 4. Layout general -------------------------------------------------------------------------- */ main { padding-block: 1.5rem; } /* Secciones grandes (landing, dashboard, etc.) */ .page { min-height: calc(100vh - var(--nav-height)); padding-block: 2rem 3rem; } /* Contenedores genéricos */ .section { margin-bottom: 2.5rem; } /* -------------------------------------------------------------------------- 5. Navbar / encabezado superior -------------------------------------------------------------------------- */ .navbar { backdrop-filter: blur(18px); background-color: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } [data-theme="dark"] .navbar { background-color: color-mix(in srgb, #020617 84%, transparent); } /* Marca / logo */ .navbar-brand { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 6. Tarjetas, paneles y bloques -------------------------------------------------------------------------- */ .card { background-color: var(--surface); color: var(--text-main); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast); } .card:hover { transform: translateY(-1px); box-shadow: 0 16px 45px rgba(15, 23, 42, 0.14); } /* Tarjetas sin tanta sombra (tablas, formularios) */ .card--flat, .card.shadow-none { box-shadow: none; border-radius: var(--radius-sm); } /* Cabecera de tarjetas */ .card-header { background: linear-gradient( 90deg, color-mix(in srgb, var(--primary-500) var(--alpha-soft), transparent) 0%, transparent 80% ); border-bottom: 1px solid var(--border-subtle); } /* -------------------------------------------------------------------------- 7. Botones (sobrescriben estilos de Bootstrap de forma suave) -------------------------------------------------------------------------- */ .btn { border-radius: 999px; font-weight: 500; padding-inline: 1.1rem; padding-block: 0.45rem; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* Botón primario */ .btn-primary, .btn.btn-primary { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--text-on-primary); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); } .btn-primary:hover, .btn.btn-primary:hover { background-color: var(--primary-600); border-color: var(--primary-600); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35); transform: translateY(-1px); } /* Botones outline genéricos */ .btn-outline-primary { border-color: color-mix(in srgb, var(--primary-500) 70%, #94a3b8); color: var(--primary-600); background-color: transparent; } .btn-outline-primary:hover { background-color: color-mix(in srgb, var(--primary-500) 12%, transparent); color: var(--primary-700); } /* Botones secundarios */ .btn-outline-secondary { border-color: var(--border-subtle); color: var(--text-muted); } .btn-outline-secondary:hover { background-color: var(--surface-muted); color: var(--text-main); } /* Botones de peligro / éxito */ .btn-danger { background-color: var(--danger); border-color: var(--danger); } .btn-success { background-color: var(--accent); border-color: var(--accent); } /* -------------------------------------------------------------------------- 8. Formularios -------------------------------------------------------------------------- */ .form-control, .form-select { border-radius: 999px; border: 1px solid var(--border-subtle); background-color: var(--surface); color: var(--text-main); padding-block: 0.45rem; padding-inline: 0.9rem; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:focus, .form-select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35); outline: none; } /* Labels y ayuda de formulario */ .form-label { font-weight: 500; color: var(--text-main); } .form-text { color: var(--text-muted); } /* Checkbox / radio (se ven mejor en dark) */ .form-check-input:checked { background-color: var(--primary-500); border-color: var(--primary-500); } /* -------------------------------------------------------------------------- 9. Tablas (pedidos, usuarios, productos) -------------------------------------------------------------------------- */ .table { color: var(--text-main); } .table thead th { border-bottom-color: var(--border-strong); font-weight: 600; } .table tbody tr { transition: background-color var(--transition-fast); } .table tbody tr:hover { background-color: rgba(148, 163, 184, 0.08); } /* Responsive sin bordes gruesos */ .table > :not(caption) > * > * { border-color: var(--border-subtle); } /* -------------------------------------------------------------------------- 10. Badges, chips y estados -------------------------------------------------------------------------- */ .badge { border-radius: 999px; font-weight: 500; padding-inline: 0.65rem; padding-block: 0.3rem; } /* Estados comunes */ .badge.bg-success, .text-bg-success { background-color: color-mix(in srgb, #16a34a 88%, transparent) !important; } .badge.bg-danger, .text-bg-danger { background-color: color-mix(in srgb, #ef4444 88%, transparent) !important; } .badge.bg-warning, .text-bg-warning { background-color: color-mix(in srgb, #facc15 90%, #0f172a 10%) !important; color: #1f2937 !important; } /* -------------------------------------------------------------------------- 11. Alerts (mensajes flash) -------------------------------------------------------------------------- */ .alert { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } .alert-success { background-color: color-mix(in srgb, #22c55e 10%, var(--surface)); border-color: color-mix(in srgb, #22c55e 45%, var(--border-subtle)); } .alert-danger { background-color: color-mix(in srgb, #ef4444 10%, var(--surface)); border-color: color-mix(in srgb, #ef4444 45%, var(--border-subtle)); } .alert-warning { background-color: color-mix(in srgb, #f97316 10%, var(--surface)); border-color: color-mix(in srgb, #f97316 45%, var(--border-subtle)); } /* -------------------------------------------------------------------------- 12. Modales (por si usas Bootstrap Modal) -------------------------------------------------------------------------- */ .modal-content { background-color: var(--surface); color: var(--text-main); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); } /* -------------------------------------------------------------------------- 13. Elementos de producto / catálogo (toque ligero) -------------------------------------------------------------------------- */ /* Tarjeta de producto en catálogo */ .catalogo-grid .card { border-radius: var(--radius-lg); } /* Imagenes de productos (listado y ficha) */ .product-media, .product-img { border-radius: var(--radius-md); object-fit: cover; } /* Rating estrellas */ .rating-stars .star-full { color: #facc15; } .rating-stars .star-half { color: #facc15; opacity: 0.7; } .rating-stars .star-empty { color: var(--border-strong); } /* Botón "Añadir al carrito" junto a otros */ .product-detail .btn { margin-right: 0.25rem; } /* -------------------------------------------------------------------------- 14. Utilidades -------------------------------------------------------------------------- */ .text-muted { color: var(--text-muted) !important; } .border-subtle { border-color: var(--border-subtle) !important; } .bg-surface { background-color: var(--surface) !important; } .bg-surface-muted { background-color: var(--surface-muted) !important; } /* === Ajustes modo oscuro: navbar ======================================= */ [data-theme="dark"] .navbar, [data-theme="dark"] .navbar.bg-light, [data-theme="dark"] .navbar.bg-white { background-color: #020617 !important; /* fondo oscuro */ border-bottom: 1px solid var(--border-strong); color: #e5e7eb; } /* Marca y enlaces del menú en claro */ [data-theme="dark"] .navbar .navbar-brand, [data-theme="dark"] .navbar .nav-link, [data-theme="dark"] .navbar .nav-link span { color: #e5e7eb !important; } [data-theme="dark"] .navbar .nav-link:hover, [data-theme="dark"] .navbar .nav-link:focus, [data-theme="dark"] .navbar .navbar-brand:hover { color: #38bdf8 !important; /* azul clarito al pasar el mouse */ } /* === Ajustes modo oscuro: ficha de producto ============================ */ /* Tarjeta principal de producto */ [data-theme="dark"] .product-view .product-card { background-color: #020617; /* fondo oscuro, sin tarjeta blanca */ border-color: var(--border-strong); box-shadow: var(--shadow-soft); } /* La tarjeta interna "Detalles del producto" */ [data-theme="dark"] .product-view .product-card .card { background-color: #020617; border-color: var(--border-strong); } /* Título del producto más legible */ [data-theme="dark"] .product-view h1, [data-theme="dark"] .product-view .h3 { color: #e5e7eb; } /* Texto secundario algo más suave pero legible */ [data-theme="dark"] .product-view .text-muted { color: #9ca3af !important; }