/** * Sistema visual compartido — cara del cliente (index, disenar, comprar, * seguimiento). Paleta "Carbón & Amarillo Taller": fondo neutro para que el * lienzo/arte del cliente sea el protagonista, alto contraste en las * acciones. Se carga DESPUÉS de cliente.css/disenar.css/comprar.css en cada * página — redefine los mismos nombres de variable que esos archivos ya * usan, así no hace falta tocar sus reglas una por una. * * El a Google Fonts (Manrope) va en el de cada página, no acá. */ :root { --color-bg: #18181b; --color-surface: #ffffff; --color-border: #d4d4d8; --color-text: #18181b; --color-muted: #71717a; --color-text-disabled: #a1a1aa; --color-primary: #3f3f46; --color-primary-dark: #52525b; --color-acento: #eab308; --color-exito: #16a34a; --color-error: #dc2626; /* Texto que va DIRECTO sobre el fondo oscuro (fuera de una tarjeta blanca) — encabezados, estados vacíos, indicador de pasos inactivo. */ --color-on-dark: #f4f4f5; --color-muted-on-dark: #a1a1aa; --radius: 10px; } body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Textura sutil tipo "mesa de trabajo" — el mismo lenguaje del lienzo punteado de disenar.php, ahora de fondo en toda la app. */ background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 24px 24px; } /* Encabezado de cada página: va directo sobre el fondo oscuro, con un resplandor de acento detrás del título a modo de decoración. */ header.site-header { position: relative; z-index: 0; } header.site-header::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 320px; height: 200px; background: radial-gradient(circle, rgba(234, 179, 8, 0.25), transparent 70%); filter: blur(10px); z-index: -1; } header.site-header h1 { color: var(--color-on-dark); } header.site-header p { color: var(--color-muted-on-dark); } /* Estados vacíos ("no hay plantillas", "pedido no encontrado", etc.) van directo sobre el fondo oscuro en todas las páginas donde aparecen. */ .empty-state { color: var(--color-muted-on-dark); } .empty-state a { color: var(--color-acento); } h1, h2, h3, .btn-grande, .pasos-indicador .paso-numero { font-family: 'Manrope', -apple-system, sans-serif; } h1 { font-weight: 800; } h2 { font-weight: 700; } /* Mensajes flash — no existían para la cara del cliente hasta ahora (solo estaban definidos en admin.css, que no se carga acá). */ .flash-ok { background: #e6f4ea; color: var(--color-exito); border: 1px solid #b7dfc0; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .flash-error { background: #fdecec; color: var(--color-error); border: 1px solid #f3c2c2; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .flash-warning { background: #fef9e7; color: #854d0e; border: 1px solid #fde68a; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } /* Botón grande — reemplaza .btn en las páginas del cliente. */ .btn-grande { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-primary); color: #fff; text-decoration: none; text-align: center; padding: 16px 32px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: background 0.15s ease, transform 0.15s ease; } .btn-grande:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .btn-grande:disabled, .btn-grande.disabled { background: var(--color-text-disabled); color: #fff; cursor: not-allowed; box-shadow: none; transform: none; } .btn-grande-secundario { background: #fff; color: var(--color-text); border: 2px solid var(--color-border); box-shadow: none; } .btn-grande-secundario:hover { background: var(--color-bg); } /* .btn-secondary: no existía ningún estilo para la cara del cliente (solo estaba definido en admin.css, que no se carga acá) — quedaba sin estilo. */ .btn-secondary { display: inline-block; background: #fff; color: var(--color-text); border: 2px solid var(--color-border); border-radius: 10px; padding: 8px 16px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; } .btn-secondary:hover { background: var(--color-bg); } /* Indicador de pasos del wizard (solo comprar.php) — vive arriba de las dos columnas (ver .comprar-layout .pasos-indicador en comprar.css), no al costado del preview, para que se note como el encabezado del flujo. */ .pasos-indicador { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(244, 244, 245, 0.15); flex-wrap: wrap; } .pasos-indicador .paso { display: flex; align-items: center; gap: 10px; } .pasos-indicador .paso-numero { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; background: #fff; border: 2px solid var(--color-border); color: var(--color-text-disabled); flex-shrink: 0; } .pasos-indicador .paso-nombre { font-size: 14px; color: var(--color-muted-on-dark); font-weight: 600; } /* Celular: el número queda arriba y el texto abajo, y los 4 pasos siempre caben en una sola línea (nunca se cae el "4" a una segunda fila). */ @media (max-width: 820px) { .pasos-indicador { flex-wrap: nowrap; gap: 4px; padding-bottom: 16px; margin-bottom: 20px; } .pasos-indicador .paso { flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .pasos-indicador .paso-numero { width: 28px; height: 28px; font-size: 13px; } .pasos-indicador .paso-nombre { font-size: 10px; text-align: center; white-space: nowrap; } .pasos-indicador .paso-linea { flex-shrink: 1; min-width: 6px; width: 16px; align-self: flex-start; margin-top: 13px; } } .pasos-indicador .paso.completado .paso-numero { background: #fff; border-color: var(--color-acento); color: var(--color-text); } .pasos-indicador .paso.completado .paso-nombre { color: var(--color-on-dark); } .pasos-indicador .paso.activo .paso-numero { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-text); box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.25); } .pasos-indicador .paso.activo .paso-nombre { color: #fff; font-weight: 700; } .pasos-indicador .paso-linea { width: 24px; height: 2px; background: var(--color-border); opacity: 0.4; } /* Las tarjetas ahora flotan sobre un fondo oscuro — necesitan una sombra más marcada que antes para leerse como "elevadas", no solo un rectángulo blanco pegado al fondo. */ .card, .plantilla-card, .carrito-panel { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .plantilla-card { transition: transform 0.15s ease, box-shadow 0.15s ease; border-top: 3px solid transparent; } .plantilla-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); border-top-color: var(--color-acento); } /* Panel del carrito (columna fija izquierda en comprar.php). */ .carrito-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; position: sticky; top: 16px; align-self: start; } .carrito-panel .carrito-preview { background: var(--color-bg); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; } .carrito-panel svg { display: block; width: 100%; height: auto; } /* Cota de ancho arriba del preview — se actualiza en JS junto con el recorte (actualizarRecortePreview() en comprar.js) cada vez que cambia la medida elegida. */ .carrito-preview-dims { position: relative; padding-top: 20px; } .carrito-preview-dims .dim-ancho { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-muted-on-dark, #a1a1aa); } .carrito-panel .carrito-linea { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--color-border); } .carrito-panel .carrito-linea:first-of-type { border-top: none; } /* Subtotal/IVA son el desglose del total, no ítems nuevos que se suman arriba — se ven más chicos y apagados para que no parezca que se está cobrando por líneas adicionales, y la línea antes de "Subtotal" (más marcada que el borde fino entre ítems) separa visualmente el grupo de ítems del grupo de totales. */ .carrito-panel .carrito-linea-resumen { font-size: 12px; color: var(--color-muted-on-dark, #a1a1aa); padding: 4px 0; } .carrito-panel .carrito-linea-resumen-primera { border-top: 1px solid var(--color-text); margin-top: 4px; padding-top: 10px; } .carrito-panel .carrito-total { font-size: 18px; font-weight: 800; display: flex; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--color-text); } /* En una sola columna (comprar.css colapsa el grid en este mismo breakpoint) el panel del carrito no debe quedar "sticky" — si no, al hacer scroll se queda pegado arriba tapando el paso de abajo, como si la tarjeta de Medida se metiera "debajo" de la vista previa. Tiene que ir DESPUÉS de la regla .carrito-panel sin media query de arriba (misma especificidad — entre dos reglas iguales gana la que aparece después en el archivo, aunque la de arriba esté "más cerca" del final de una @media anterior). */ @media (max-width: 820px) { .carrito-panel { position: static; } }