/* ============================================================ Checkout Weas para Hombres - diseno propio y limpio ============================================================ */ /* ============================================================ TEMA AUTOMATICO Sigue el modo del sistema del cliente (dia / noche): - Modo noche -> Grafito (oscuro, alto contraste) - Modo dia -> Claro premium Se puede forzar uno con ============================================================ */ /* Base = modo noche (Grafito) */ :root { color-scheme: dark; --ink: #eef1f4; --muted: #b6bcc4; --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.09); --bg: #101215; --panel: #171a1e; --panel-2: #131619; --field: #1c2026; --accent: #f06a2f; --accent-dark: #d8581f; --gold: #e0a44b; --gold-soft: rgba(224, 164, 75, 0.14); --ok: #6dc79a; --radius: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45); } /* Modo dia -> Claro premium */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --ink: #1a1713; --muted: #5f5a52; --line: rgba(26, 23, 19, 0.16); --line-soft: rgba(26, 23, 19, 0.12); --bg: #f7f4ef; --panel: #fffdf9; --panel-2: #f4f0e9; --field: #ffffff; --gold: #9a6b1f; --gold-soft: rgba(154, 107, 31, 0.1); --shadow: 0 1px 2px rgba(20, 18, 12, 0.06), 0 12px 30px rgba(20, 18, 12, 0.07); } } * { box-sizing: border-box; } [hidden] { display: none !important; } body.checkout-page { margin: 0; background: radial-gradient(1100px 600px at 12% -8%, rgba(240, 106, 47, 0.07), transparent 60%), radial-gradient(900px 500px at 92% 0%, rgba(212, 175, 106, 0.05), transparent 55%), var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ---------- Layout general ---------- */ .co-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.66fr); min-height: 100vh; } .co-main { justify-self: end; width: min(640px, 100%); padding: 40px 44px 80px; } .co-summary { position: sticky; top: 0; align-self: start; padding: 48px 44px; background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border-left: 1px solid var(--line); min-width: 0; min-height: 100vh; } /* ---------- Cabecera ---------- */ .co-logo { display: block; width: 96px; margin: 0 auto 18px; } .co-logo img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--line); } .co-steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 34px; font-size: 0.82rem; color: var(--muted); } .co-steps a { color: var(--gold); text-decoration: none; font-weight: 600; } .co-steps span::before { content: "›"; margin-right: 8px; color: rgba(255, 255, 255, 0.2); } /* ---------- Form ---------- */ .co-form { display: grid; gap: 14px; } .co-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 26px 0 4px; } .co-form h1 { font-size: 1.35rem; margin: 0; } .co-form h2 { font-size: 1.18rem; margin: 30px 0 6px; letter-spacing: -0.01em; } .co-form h3 { font-size: 1rem; margin: 14px 0 2px; } .co-form p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; } .co-link { color: var(--gold); text-decoration: none; font-size: 0.9rem; font-weight: 600; } /* ---------- Campos ---------- */ .co-field { display: block; } .co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .co-form input, .co-form select { width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--field); color: var(--ink); font-size: 0.98rem; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .co-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 25px, calc(100% - 15px) 25px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 44px; } .co-form input::placeholder { color: #9aa1aa; } .co-form input:hover, .co-form select:hover { border-color: rgba(212, 175, 106, 0.3); } .co-form input:focus, .co-form select:focus { outline: none; border-color: var(--gold); background: #1f1b17; box-shadow: 0 0 0 3px var(--gold-soft); } .co-check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--muted); cursor: pointer; } .co-check input { width: 20px; height: 20px; accent-color: var(--accent); } /* ---------- Tabs de entrega ---------- */ .co-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; border-radius: 14px; background: var(--field); } .co-tabs label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--muted); transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .co-tabs label input { display: none; } .co-tabs label:has(input:checked) { background: linear-gradient(180deg, #24201b, #1b1815); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); } /* ---------- Opciones tipo tarjeta (boleta/factura, retiro, etc.) ---------- */ .co-options { display: grid; gap: 10px; } .co-option { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--field); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .co-option:hover { border-color: rgba(212, 175, 106, 0.3); background: #1f1b17; } .co-option:has(input:checked) { border-color: var(--gold); background: linear-gradient(180deg, rgba(212, 175, 106, 0.09), rgba(212, 175, 106, 0.03)); box-shadow: 0 0 0 1px rgba(212, 175, 106, 0.22), 0 10px 26px rgba(0, 0, 0, 0.35); } .co-option:has(input:checked) strong { color: var(--gold); } .co-option input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; } .co-option .co-option-text { display: grid; gap: 3px; } .co-option strong { font-size: 1rem; } .co-option small { color: var(--muted); font-size: 0.86rem; line-height: 1.4; } .co-option .co-price { margin-left: auto; font-weight: 800; white-space: nowrap; } .co-shipping-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .co-shipping-heading h3 { margin: 0; } .co-blue-badge { padding: 6px 10px; border: 1px solid rgba(53, 173, 222, 0.5); border-radius: 999px; color: #46b7e7; background: rgba(53, 173, 222, 0.1); font-size: 0.72rem; font-weight: 850; } .co-blue-option:has(input:checked) { border-color: rgba(53, 173, 222, 0.48); box-shadow: 0 0 0 3px rgba(53, 173, 222, 0.08); } .co-shipping-status { min-height: 20px; padding-left: 2px; color: var(--muted); font-size: 0.82rem !important; } .co-shipping-status.is-ready { color: var(--ok); } .co-shipping-status.is-error { color: #ef8a73; } /* ---------- Bloques que aparecen/desaparecen ---------- */ .co-block { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } /* ---------- Mapa ---------- */ .co-map { height: 280px; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: #16130f; } .co-map-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .co-map-actions small { color: var(--muted); font-size: 0.85rem; } .co-maps-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--gold); font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; } /* ---- Toggle si/no ---- */ .co-switch { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--field); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .co-switch-text { display: grid; gap: 2px; flex: 1; } .co-switch-text strong { font-size: 0.98rem; } .co-switch-text small { color: var(--muted); font-size: 0.84rem; } .co-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .co-switch-ui { position: relative; flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.18s; } .co-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #f4efe4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.18s; } .co-switch:has(input:checked) { border-color: var(--gold); background: linear-gradient(180deg, rgba(212, 175, 106, 0.09), rgba(212, 175, 106, 0.03)); } .co-switch:has(input:checked) .co-switch-ui { background: var(--gold); } .co-switch:has(input:checked) .co-switch-ui::after { transform: translateX(20px); } .co-maps-link:hover { border-color: var(--accent); } .co-note { font-size: 0.82rem; color: #948e82; margin: 2px 0 0; } /* ---------- Footer del form ---------- */ .co-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; } .co-primary { height: 60px; padding: 0 36px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-size: 1.02rem; font-weight: 800; cursor: pointer; transition: background 0.15s, transform 0.05s; } .co-primary:hover { background: var(--accent-dark); } .co-primary:disabled { opacity: 0.58; cursor: wait; } .co-primary:active { transform: translateY(1px); } /* ---------- Resumen (derecha) ---------- */ .co-summary-inner { display: grid; gap: 22px; max-width: 420px; } .co-product { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; } .co-product-img { position: relative; width: 60px; height: 60px; } .co-product-img img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: #1a1714; } .co-product-img .co-qty { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #14110d; font-size: 0.75rem; font-weight: 800; } .co-product-info { display: grid; gap: 2px; min-width: 0; } .co-product-info strong { font-size: 0.96rem; } .co-product-info small { color: var(--muted); font-size: 0.82rem; } .co-product-price { font-weight: 800; white-space: nowrap; } .co-discount { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .co-discount input { height: 50px; padding: 0 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--field); color: var(--ink); font-size: 0.95rem; } .co-discount input::placeholder { color: #a49a8b; } .co-discount input:focus { outline: none; border-color: var(--gold); } .co-discount button { height: 50px; padding: 0 20px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--gold); font-weight: 700; cursor: pointer; transition: background 0.15s; } .co-discount button:hover { background: var(--gold-soft); } .co-totals { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); } .co-totals .co-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.96rem; color: var(--muted); } .co-totals .co-line span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; } .co-totals .co-grand { align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.4rem; color: var(--gold); font-weight: 800; } .co-totals .co-grand span:last-child { font-weight: 800; } .co-totals .co-grand .co-cur { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-right: 4px; } .co-summary-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0; } .co-trust { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; } .co-trust li { position: relative; padding-left: 26px; font-size: 0.85rem; color: var(--ink); } .co-trust li::before { content: "✓"; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: rgba(109, 199, 154, 0.14); color: var(--ok); font-size: 0.7rem; font-weight: 900; } .co-secure { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(109, 199, 154, 0.08); border: 1px solid rgba(109, 199, 154, 0.16); color: #8fd9b4; font-size: 0.85rem; font-weight: 600; } .co-secure::before { content: "🔒"; font-size: 0.95rem; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .co-wrap { grid-template-columns: 1fr; } .co-summary { position: static; order: -1; min-height: 0; border-left: 0; border-bottom: 1px solid var(--line); padding: 28px 22px; } .co-summary-inner { max-width: none; } .co-main { justify-self: stretch; width: 100%; padding: 28px 22px 60px; } .co-row { grid-template-columns: 1fr; } } /* ---------- Logos de metodo de pago ---------- */ .co-pay-logo { display: grid; place-items: center; width: 46px; height: 34px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03); color: var(--muted); transition: color 0.18s ease, border-color 0.18s ease; } .co-pay-logo svg { width: 24px; height: auto; display: block; } .co-option:has(input:checked) .co-pay-logo { color: var(--gold); border-color: rgba(212, 175, 106, 0.35); } .co-pay-tag { margin-left: auto; align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 0.72rem; font-weight: 700; white-space: nowrap; } /* Estado del geocodificado automatico del pin */ .co-map-actions small.is-locating { color: var(--gold); } /* ============================================================ TEMAS PARA ELEGIR (temporal: selector flotante arriba a la derecha) Todos suben el contraste del texto secundario y los placeholders, que era el problema real de lectura. ============================================================ */ /* --- 1. GRAFITO: neutro oscuro, maxima legibilidad --- */ :root[data-theme="grafito"] { --ink: #eef1f4; --muted: #b6bcc4; --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.09); --bg: #101215; --panel: #171a1e; --panel-2: #131619; --field: #1c2026; --gold: #e0a44b; --gold-soft: rgba(224, 164, 75, 0.14); } :root[data-theme="grafito"] .co-form input::placeholder, :root[data-theme="grafito"] .co-discount input::placeholder { color: #9aa1aa; } /* --- 2. ORO ALTO CONTRASTE: el actual pero legible --- */ :root[data-theme="oro"] { --ink: #f7f3ea; --muted: #c2b9ab; --line: rgba(212, 175, 106, 0.26); --line-soft: rgba(255, 255, 255, 0.1); --bg: #0f0d0b; --panel: #1a1714; --panel-2: #141210; --field: #201c18; --gold: #e3bd7c; --gold-soft: rgba(227, 189, 124, 0.14); } :root[data-theme="oro"] .co-form input::placeholder, :root[data-theme="oro"] .co-discount input::placeholder { color: #a49a8b; } /* --- 3. NARANJO: sigue el acento de la marca --- */ :root[data-theme="naranjo"] { --ink: #f5f2ee; --muted: #bab2a8; --line: rgba(240, 106, 47, 0.28); --line-soft: rgba(255, 255, 255, 0.1); --bg: #121010; --panel: #1b1817; --panel-2: #161413; --field: #211d1b; --gold: #ff8348; --gold-soft: rgba(255, 131, 72, 0.14); } :root[data-theme="naranjo"] .co-form input::placeholder, :root[data-theme="naranjo"] .co-discount input::placeholder { color: #a09890; } /* --- 4. MEDIANOCHE: azul profundo, se siente premium y frio --- */ :root[data-theme="medianoche"] { --ink: #edf1f7; --muted: #b3bccb; --line: rgba(150, 180, 220, 0.2); --line-soft: rgba(255, 255, 255, 0.09); --bg: #0c1119; --panel: #131a25; --panel-2: #0f151f; --field: #18202c; --gold: #e8b563; --gold-soft: rgba(232, 181, 99, 0.14); } :root[data-theme="medianoche"] .co-form input::placeholder, :root[data-theme="medianoche"] .co-discount input::placeholder { color: #98a3b4; } /* --- 5. CLARO PREMIUM: fondo claro, maxima lectura --- */ :root[data-theme="claro"] { --ink: #1a1713; --muted: #5f5a52; --line: rgba(26, 23, 19, 0.16); --line-soft: rgba(26, 23, 19, 0.12); --bg: #f7f4ef; --panel: #fffdf9; --panel-2: #f4f0e9; --field: #ffffff; --gold: #9a6b1f; --gold-soft: rgba(154, 107, 31, 0.1); --shadow: 0 1px 2px rgba(20, 18, 12, 0.06), 0 12px 30px rgba(20, 18, 12, 0.07); } :root[data-theme="claro"] .co-form input::placeholder, :root[data-theme="claro"] .co-discount input::placeholder { color: #8a847a; } :root[data-theme="claro"] .co-tabs label:has(input:checked) { background: #fff; } :root[data-theme="claro"] .co-switch-ui::after { background: #fff; } :root[data-theme="claro"] .co-pay-logo { background: rgba(0, 0, 0, 0.03); } :root[data-theme="claro"] .co-map { background: #e9e6df; } :root[data-theme="claro"] .co-secure { background: rgba(31, 122, 77, 0.09); color: #1f6a45; border-color: rgba(31, 122, 77, 0.2); } :root[data-theme="claro"] .co-trust li::before { background: rgba(31, 122, 77, 0.14); color: #1f7a4d; } /* --- Selector flotante (temporal) --- */ .theme-picker { position: fixed; top: 14px; right: 14px; z-index: 999; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(128, 128, 128, 0.35); background: rgba(20, 20, 20, 0.92); backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); font-family: inherit; } .theme-picker strong { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #cfcfcf; margin-bottom: 2px; } .theme-picker button { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.07); color: #f0f0f0; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-align: left; } .theme-picker button:hover { background: rgba(255, 255, 255, 0.14); } .theme-picker button.is-active { border-color: #fff; background: rgba(255, 255, 255, 0.2); } .theme-picker i { width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); } /* ---------- Autocompletado de Chrome ---------- Chrome pinta los campos autocompletados de celeste con texto oscuro, lo que rompe cualquier tema oscuro. No se puede cambiar el background directamente, por eso se usa un box-shadow interior del color del campo. */ .co-form input:-webkit-autofill, .co-form input:-webkit-autofill:hover, .co-form input:-webkit-autofill:focus, .co-discount input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--field) inset; box-shadow: 0 0 0 1000px var(--field) inset; caret-color: var(--ink); transition: background-color 9999s ease-in-out 0s; } .co-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--field) inset, 0 0 0 3px var(--gold-soft); box-shadow: 0 0 0 1000px var(--field) inset, 0 0 0 3px var(--gold-soft); } /* ---------- Ajustes de componentes en MODO DIA ---------- Van al final a proposito: aca ganan por orden a las reglas base. */ @media (prefers-color-scheme: light) { .co-form input::placeholder, .co-discount input::placeholder { color: #8a847a; } .co-tabs { background: rgba(26, 23, 19, 0.06); } .co-tabs label:has(input:checked) { background: #fff; color: var(--ink); border: 1px solid var(--line-soft); } .co-option:hover { background: #fffdf7; } .co-option:has(input:checked) { background: linear-gradient(180deg, rgba(154, 107, 31, 0.08), rgba(154, 107, 31, 0.03)); box-shadow: 0 0 0 1px rgba(154, 107, 31, 0.2), 0 8px 20px rgba(20, 18, 12, 0.08); } .co-switch-ui { background: rgba(26, 23, 19, 0.2); } .co-switch-ui::after { background: #fff; } .co-pay-logo { background: rgba(26, 23, 19, 0.04); } .co-map { background: #e9e6df; } .co-secure { background: rgba(31, 122, 77, 0.09); color: #1f6a45; border-color: rgba(31, 122, 77, 0.22); } .co-trust li::before { background: rgba(31, 122, 77, 0.14); color: #1f7a4d; } .co-form input:focus, .co-form select:focus { background: #fff; } }