/* ========================================================= SISTEMA DE DISEÑO GLOBAL · COLORES Y TEMA ========================================================= */ /* Paleta base (modo claro) */ :root { --primary: #0066FF; --primary-600: #0052cc; --primary-700: #004bb5; --bg: #ffffff; --surface: #ffffff; --text: #1d1f23; --muted: #6c757d; --border: #e9ecef; --shadow: 0 1px 4px rgba(0,0,0,0.08); /* Altura aproximada de la navbar fija */ --nav-h-mobile: 64px; --nav-h-desktop: 76px; } /* Tema oscuro (se activa con data-theme="dark" en ) */ [data-theme="dark"] { --primary: #66a3ff; --primary-600: #4a8dff; --primary-700: #3a74d9; --bg: #0f1115; --surface: #171a21; --text: #eaeef5; --muted: #9aa4b2; --border: #2a2f3a; --shadow: 0 1px 6px rgba(0,0,0,0.45); } /* Fondo y texto global (aplica tanto en público como en admin) */ html, body { background: var(--bg); color: var(--text); } /* Compensar altura de navbar fija (ver header.php → body.has-fixed-nav) */ body.has-fixed-nav { padding-top: var(--nav-h-mobile); } @media (min-width: 992px) { body.has-fixed-nav { padding-top: var(--nav-h-desktop); } } /* ========================================================= UTILIDADES GENERALES ========================================================= */ /* Contenedor base tipo "página dentro de la tienda" */ .page { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } /* Texto gris suave */ .muted { color: #6b7280; } /* Badge genérico (contador, estados, etc.) */ .badge { font-size: .75rem; padding: .2rem .5rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; } /* Input de búsqueda */ .search { padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: 8px; width: 240px; } /* Caja para estados vacíos (sin productos, sin resultados, etc.) */ .empty { padding: 2rem; text-align: center; color: #6b7280; border: 1px dashed #e5e7eb; border-radius: 12px; background: #fff; } /* Tablas y cards heredan los colores del tema */ .card { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); } .table { color: var(--text); } .table thead th { border-bottom-color: var(--border); } .table td, .table th { border-color: var(--border); } /* ========================================================= SISTEMA GLOBAL DE BOTONES ========================================================= */ /* Base de TODOS los botones (.btn de Bootstrap + personalizados) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.15rem; border-radius: 999px; /* forma de “pastilla” */ border: 1px solid transparent; font-size: .95rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .btn:active { transform: scale(0.98); } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Principal (azul) */ .btn-primary { background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background-color: var(--primary-600); border-color: var(--primary-700); box-shadow: 0 6px 14px rgba(0,0,0,.18); } /* Botón tipo “peligro” (acciones críticas) */ .btn-danger { background-color: #e02424; border-color: #e02424; color: #fff; } .btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; box-shadow: 0 6px 14px rgba(0,0,0,.18); } /* Botones de contorno (Carrito, enlaces secundarios…) */ .btn-outline-primary, .btn-outline-secondary { background-color: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover, .btn-outline-secondary:hover { background-color: rgba(0,102,255,.08); color: var(--primary-700); border-color: var(--primary-600); } /* Botones grises secundarios (acciones neutras) */ .btn-light, .btn-secondary { background-color: #f3f4f6; border-color: #e5e7eb; color: #374151; } .btn-light:hover, .btn-secondary:hover { background-color: #e5e7eb; } /* Variante antigua .btn.secondary → la mantenemos por compatibilidad */ .btn.secondary { background: #fff; color: #111827; } /* Botón especial de cuenta (avatar + nombre) */ .btn-account { border-radius: 999px; padding: .45rem .95rem; border-width: 1px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; transition: all 0.2s ease; } .btn-account .icon-account { font-size: 1.1rem; } .btn-account:hover { transform: translateY(-1px); background-color: rgba(0, 102, 255, 0.1); } /* ========================================================= NAVBAR · FIJA + ESTADO ACTIVO ========================================================= */ /* Estética del nav fijo (Bootstrap .navbar.fixed-top) */ .navbar.fixed-top { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.06); } /* Navbar de admin en tema oscuro */ .navbar.bg-dark { background-color: #12151b !important; border-bottom: 1px solid var(--border) !important; } /* Enlaces del menú principal (nav con id="mainNav") */ #mainNav .nav-link { position: relative; font-weight: 500; color: var(--muted); padding-inline: .75rem; } /* Subrayado animado (hover / activo) */ #mainNav .nav-link::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .25rem; height: 2px; border-radius: 999px; background-color: transparent; opacity: 0; transform: translateY(3px); transition: background-color .18s ease, opacity .18s ease, transform .18s ease; } #mainNav .nav-link:hover { color: var(--primary-700); } #mainNav .nav-link:hover::after { background-color: rgba(0,102,255,.4); opacity: 1; transform: translateY(0); } #mainNav .nav-link.active { color: var(--primary); } #mainNav .nav-link.active::after { background-color: var(--primary); opacity: 1; transform: translateY(0); } /* Dropdown / logout */ #mainNav { z-index: 1080; } .dropdown-menu { z-index: 2000; } .dropdown-logout-form { margin: 0; } .dropdown-logout-form .dropdown-item { width: 100%; text-align: left; } .dropdown-item-danger { color: #dc3545; } .dropdown-item-danger:hover { color: #a52834; } /* ========================================================= FLASHES Y TIPOGRAFÍA GLOBAL ========================================================= */ .flash-container { margin: 1rem auto; max-width: 600px; } .flash-container .alert { margin-bottom: 8px; border-radius: 8px; box-shadow: var(--shadow); } /* Títulos de secciones importantes */ h1.h4, h2.h4 { font-weight: 600; margin-bottom: 1.25rem; text-align: center; color: #003399; } /* Parrafos auxiliares (ej: textos de ayuda) */ p.text-muted { text-align: center; margin-bottom: 1.5rem; } /* Links dentro de textos legales o checkboxes */ .form-check-label a { text-decoration: underline; color: #0066FF; } .form-check-label a:hover { color: #004bb5; } /* ========================================================= FORMULARIOS · LOGIN · REGISTRO ========================================================= */ /* Contenedor genérico de formularios */ .form-container { max-width: 600px; margin: 2rem auto; background-color: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Versión compacta para login / registro */ .form-auth { max-width: 460px; margin: 2rem auto; background-color: #fff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Inputs / selects en formularios */ .form-container input, .form-container select, .form-container textarea, .form-auth input { border-radius: 6px; border: 1px solid #ccc; padding: 0.55rem 0.75rem; transition: all 0.2s ease; } .form-container input:focus, .form-container select:focus, .form-auth input:focus { border-color: #0066FF; box-shadow: 0 0 0 2px rgba(53, 99, 168, 0.25); outline: none; } /* ========================================================= CATÁLOGO DE PRODUCTOS ========================================================= */ /* Encabezado de catálogo (título + filtros + buscador) */ .catalogo-header { display: flex; flex-direction: column; /* móvil: columna */ align-items: flex-start; gap: .75rem; margin-bottom: 1rem; } .catalogo-header .toolbar { display: flex; align-items: center; gap: .5rem; width: 100%; } /* search dentro del header: en móvil ocupa todo el ancho */ .catalogo-header .search { flex: 1 1 auto; min-width: 0; } .catalogo-header .badge { flex: 0 0 auto; white-space: nowrap; } /* Página de catálogo un poco más compacta en móvil */ .page.page--catalogo { padding: 1rem .75rem; } /* Grid de tarjetas de productos */ .catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } /* Card de producto en catálogo */ .catalog-card, .card { /* reutilizamos .card base pero la reforzamos aquí si hace falta */ border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .12s ease, box-shadow .12s ease; } .catalog-card:hover, .card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .card img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; } .card .name { font-weight: 600; font-size: 1rem; } .card .price { font-weight: 700; } /* Forzar 1 columna en móvil muy estrecho */ @media (max-width: 480px) { .catalogo-grid { grid-template-columns: 1fr; } } /* A partir de tablet (más aire en página y header en fila) */ @media (min-width: 768px) { .page.page--catalogo { padding: 1.5rem; } .catalogo-header { flex-direction: row; align-items: center; justify-content: space-between; } .catalogo-header .toolbar { width: auto; } .catalogo-header .search { width: 240px; flex: 0 0 auto; } } /* ========================================================= DETALLE DE PRODUCTO · GALERÍA + INFO ✅ ACTUALIZADO ========================================================= */ /* Sección general (fondo ligeramente gris) */ .product-view { background-color: #f8f9fa; } /* Tarjeta principal donde vive la ficha de producto */ .product-card { background: #fff; border-radius: 16px; max-width: 1100px; margin: 0 auto; box-shadow: 0 6px 18px rgba(0,0,0,.06); border: 0 !important; /* evitamos dobles bordes */ transition: box-shadow .3s ease, transform .3s ease; } .product-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px); } /* Layout de la ficha (izquierda galería, derecha info) */ .product-detail { align-items: start; /* ✅ antes estaba center */ } .product-detail .col-md-6:last-child { display: flex; flex-direction: column; justify-content: flex-start; } .product-detail h1 { font-weight: 600; } .product-detail .h4 { color: #111827; font-weight: 500; } .product-detail .text-muted { line-height: 1.6; max-width: 90%; } .product-detail .btn { min-width: 150px; } /* Galería principal */ .product-gallery { width: 100%; max-width: 520px; /* ✅ un poco más balanceado */ margin: auto; border: 0 !important; } /* Marco de la imagen principal (tamaño controlado) */ .product-media { background: #fff; border-radius: 16px; border: 2px solid rgba(13,110,253,.35); overflow: hidden; display: flex; align-items: center; justify-content: center; /* ✅ evita que se vea gigante */ height: clamp(320px, 55vh, 520px); } /* Imagen principal (look tienda pro) */ .product-media img, .product-media img.product-img { width: 100%; height: 100%; object-fit: cover; /* ✅ antes contain */ object-position: center; transition: transform .3s ease; } .product-media img:hover { transform: scale(1.03); } /* Fila de miniaturas (thumbnails) */ .product-thumbs { margin-top: .5rem; } .product-thumbs .row { --bs-gutter-x: 0; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; gap: 12px; } .product-thumbs .col-3, .product-thumbs .col-sm-2 { padding: 0 !important; width: auto !important; flex: 0 0 auto !important; } /* Botón contenedor: sin bordes ni padding (el borde va en la imagen) */ .product-thumbs .thumb { display: block; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } /* Imagen de miniatura con borde azul */ .product-thumbs .thumb img { display: block; height: 68px; width: auto; aspect-ratio: auto; object-fit: contain; border: 2px solid rgba(13,110,253,.35); border-radius: 10px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .product-thumbs .thumb img:hover { transform: translateY(-1px); } .product-thumbs .thumb.active img { border-color: #0d6efd; box-shadow: 0 0 0 2px #e7f1ff; } /* Productos relacionados (debajo de la ficha) */ .related-products .related-card { border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; color: inherit; transition: all 0.3s ease; height: 100% !important; display: flex !important; flex-direction: column !important; min-height: 320px !important; } .related-products .related-card:hover { border-color: #dbe4f0; box-shadow: 0 8px 24px rgba(16,24,40,.06); transform: translateY(-2px); } .product-media--sm { aspect-ratio: 1/1 !important; background: #fff; border: 1.5px solid rgba(13,110,253,.25); border-radius: 12px; overflow: hidden; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px; flex-shrink: 0 !important; width: 100% !important; height: auto !important; min-height: 200px !important; } .product-media--sm img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 0.3s ease; } .related-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 0.3s ease; } .product-media--sm:hover img { transform: scale(1.05); } .related-card .card-body { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .related-name { font-size: .95rem; color: #334155; font-weight: 500; line-height: 1.2; min-height: 2.4rem; /* Asegurar altura consistente */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; } .related-card .card-body .fw-semibold { font-size: 1rem; color: #0d6efd; margin-top: auto; } /* Estrellas de valoración (sólo visual) */ .rating-stars .star { font-size: 1.1rem; line-height: 1; } .star-full { color: #f59e0b; } .star-half { color: #fbbf24; } .star-empty { color: #e5e7eb; } /* Input de estrellas (formularios de reseñas) */ .rating-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; } .rating-input input { display: none; } .rating-input label { cursor: pointer; font-size: 1.4rem; color: #e5e7eb; transition: color .15s ease; } .rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: #f59e0b; } /* Responsive de la ficha */ @media (max-width: 768px) { .product-detail { align-items: flex-start; } .product-detail .col-md-6:last-child { justify-content: flex-start; margin-top: 1.5rem; } .product-detail .btn, .product-detail .btn-group { width: 100%; } .product-card { padding: 1rem; } /* ✅ en móvil, un poco menos alto */ .product-media { height: clamp(260px, 45vh, 420px); } } /* Botón flotante de carrito en detalle (si lo usas) */ .cart-fab { position: fixed; top: 12px; right: 12px; background: #111827; color: #fff; border-radius: 999px; padding: .5rem .8rem; } /* ========================================================= CARRITO (carrito.php) + CHECKOUT (checkout.php) ========================================================= */ /* Layout general del carrito */ .cart-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .cart-grid { display: grid; grid-template-columns: 1fr 330px; gap: 1.25rem; } .card-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; } /* Tabla de carrito */ table { width: 100%; border-collapse: collapse; } th, td { padding: .6rem .4rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .right { text-align: right; } .total { font-weight: 700; font-size: 1.2rem; } /* Ítems dentro del carrito */ .item { display: flex; gap: .8rem; align-items: center; } .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; } /* Checkout lateral dentro del carrito */ .cart-page #empty.empty { max-width: 480px; margin: 1.5rem auto; } .cart-page .row { margin-bottom: 1rem; } /* Página de checkout (form de datos del cliente) */ .checkout-page .card { border-radius: 12px; } /* Breakpoint: carrito y checkout en una sola columna */ @media (max-width: 980px) { .cart-grid { grid-template-columns: 1fr; } } /* Versión móvil: botones full width y bloques apilados */ @media (max-width: 576px) { .cart-page .d-flex.justify-content-between.align-items-center { flex-direction: column; align-items: stretch; gap: .5rem; } .cart-page .d-flex.justify-content-between.align-items-center .btn { width: 100%; justify-content: center; } .cart-page aside .card { margin-top: .5rem; } .checkout-page .d-flex.justify-content-between.align-items-center { flex-direction: column; align-items: stretch; gap: .75rem; } .checkout-page .d-flex.justify-content-between.align-items-center .btn { width: 100%; justify-content: center; } } /* ========================================================= ADMIN · DASHBOARD · CALENDARIO ========================================================= */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .dash-card { border: none; border-radius: 12px; background: linear-gradient(180deg, var(--surface) 0%, rgba(0,0,0,0.02) 100%); box-shadow: var(--shadow); transition: transform .2s ease; } .dash-card:hover { transform: translateY(-2px); } .dash-card h2 { font-weight: 700; color: var(--primary); } .card-title { font-weight: 600; } /* Calendario fullcalendar (admin) */ #adminCalendar, #calendarMini { --fc-border-color: var(--border); --fc-event-bg-color: var(--primary); --fc-event-border-color: var(--primary); } [data-theme="dark"] .fc .fc-toolbar-title { color: var(--text); } /* Contenedor de gráficos (Chart.js, por ejemplo) */ .chart-container { position: relative; height: 280px; width: 100%; } .chart-container > canvas { width: 100% !important; height: 100% !important; display: block; } /* ========================================================= HOME PÚBLICO · CARRUSELES ========================================================= */ /* Marco base para TODOS los carruseles */ .carousel-frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.08); } /* El contenedor, el item y la imagen ocupan toda la altura */ .carousel-frame .carousel-inner, .carousel-frame .carousel-item, .carousel-frame .carousel-item img { height: 100%; } /* Imágenes centradas y recortadas sin deformar */ .carousel-frame .carousel-item img { width: 100%; display: block; object-fit: cover; object-position: center center; } /* HERO principal */ .home-hero .carousel-frame { height: 54vh; max-height: 520px; min-height: 320px; } @media (max-width: 576px) { .home-hero .carousel-frame { height: 46vh; min-height: 260px; } } /* Carrusel de la pantalla 2 (lado izquierdo) */ .home-section .carousel-frame:not(.small) { height: 380px; } @media (max-width: 992px) { .home-section .carousel-frame:not(.small) { height: 300px; } } /* Tres carruseles pequeños en fila */ .carousel-frame.small { height: 240px; } @media (min-width: 992px) { .carousel-frame.small { height: 280px; } } /* Suavizar animaciones del carrusel */ .carousel .carousel-item { transition: transform .6s ease-in-out, opacity .6s ease-in-out; } /* Texto debajo de cada carrusel */ .info-box, .text-info-box { max-width: 520px; text-align: left; margin-inline: auto; } .info-box h3, .text-info-box .h5, .info-box .h5 { font-weight: 600; } .info-box p, .text-info-box p { margin-bottom: .8rem; } /* Fondo ligeramente distinto para la sección 2 */ .section-alt { background: #ebe9e9; } .section-alt .carousel-frame { height: 340px; } @media (max-width: 992px) { .section-alt .carousel-frame { height: 280px; } } /* ========================================================= PÁGINAS DE CONTACTO (3 PANTALLAS) ========================================================= */ .body-with-fixed-nav { scroll-margin-top: 110px; } /* Pantalla 1: hero de contacto */ .contact-hero { padding-top: 120px; padding-bottom: 80px; } /* Grid de iconos sociales (WhatsApp, Instagram, etc.) */ .social-grid { display: grid; grid-template-columns: repeat(2, 64px); grid-auto-rows: 64px; gap: 16px; margin-bottom: 18px; } .social-item { display: grid; place-items: center; background: #fff; border: 1px solid #e9ecef; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease; } .social-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .social-item img { width: 40px; height: 40px; object-fit: contain; } /* Email + botón en fila */ .email-signup { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 520px; } /* Pantalla 2: bloque “sobre la marca” */ .about-block { padding: 100px 0; border-top: 1px solid #8ba4bd; } .contact-carousel img { aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; } /* Pantalla 3: CTA final */ .cta-block { padding: 100px 0 140px; border-top: 1px solid #4b86c0; } .cta-block .cta-text { max-width: 720px; } /* Responsivo contacto */ @media (max-width: 991px) { .contact-hero { padding-top: 110px; } .social-grid { grid-template-columns: repeat(4, 64px); } } @media (max-width: 575px) { .social-grid { grid-template-columns: repeat(4, 64px); gap: 12px; } .email-signup { grid-template-columns: 1fr; } } /* Página “gracias por contactar” */ .thanks-section { padding-top: 80px; padding-bottom: 120px; } .thanks-card { max-width: 720px; margin: 0 auto; border-radius: 16px; } /* ========================= TOASTS (notificaciones) ========================= */ #toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; } .toast-msg { min-width: 260px; max-width: 340px; padding: .7rem .9rem; border-radius: 12px; background: #ffffff; box-shadow: 0 6px 18px rgba(15,23,42,.18); display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; border: 1px solid rgba(148,163,184,.4); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .toast-msg.show { opacity: 1; transform: translateY(0); } .toast-msg__icon { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #ffffff; } .toast-msg__content { flex: 1; } .toast-msg__title { font-weight: 600; margin-bottom: .1rem; } .toast-msg__close { border: none; background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } /* Colores por tipo */ .toast-msg--success .toast-msg__icon { background: #16a34a; } .toast-msg--error .toast-msg__icon { background: #dc2626; } .toast-msg--warning .toast-msg__icon { background: #f97316; } .toast-msg--info .toast-msg__icon { background: #2563eb; }