/* ============================================================================ uWine · tokens.css Sistema de diseño compartido por todos los mockups. El tema se cambia con el atributo data-theme en o : data-theme="tinto" -> crema/hueso + acento teja/burdeos (claro) data-theme="oloroso" -> oscuro cálido + acento naranja ámbar (oscuro) data-theme="blanco" -> hueso/gris + acento dorado, azul de detalle (claro) Cambiar de piel = cambiar variables, nunca componentes (tenet). Renombrado en Fase 5 (2026-09-13): vino->tinto, noche->oloroso, neutro->blanco. Los beta testers con un tema viejo guardado reeligen (cae al default "tinto"). ============================================================================ */ /* ---- Tipografía (D2): dos familias de sistema, sin CDN ---- */ /* Serif con carácter para títulos, sans legible para cuerpo. Usamos stacks del sistema para que los mockups no dependan de red. */ :root { --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Escala de espaciado (múltiplos de 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* v34: padding lateral de las pantallas. Reducido en móvil (full-bleed, aprovechar el ancho). */ --pad-x: 14px; /* Radios y sombras (se afinan por tema abajo) */ --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; /* Tipos de tamaño */ --fs-display: 30px; --fs-h1: 24px; --fs-h2: 19px; --fs-body: 16px; --fs-small: 13px; --fs-tiny: 11px; --maxw: 460px; /* ancho tipo móvil */ --transition: 180ms ease; } /* ============================ TEMA · TINTO (claro) ======================== */ /* (antes "vino": idéntico, solo renombrado) */ [data-theme="tinto"] { --bg: #f4f1ec; /* hueso roto (antes crema #f6f1e7): más neutro y editorial */ --bg-elev: #ffffff; /* tarjetas: blanco limpio, para que la foto respire */ --bg-sunken: #eae4da; /* zonas hundidas */ --ink: #231a17; /* texto principal (tinta casi negra, más contraste) */ --ink-soft: #6a5d55; /* texto secundario */ --ink-faint: #a4968a; /* texto terciario / placeholders */ --line: #e6ded2; /* bordes sutiles */ --accent: #8c2f2a; /* teja/burdeos */ --accent-ink: #fff7f0; /* texto sobre acento */ --accent-soft: #f0dcd3; /* fondo suave del acento */ --gold: #b08843; /* dorado sobrio para detalles */ --ok: #4f7a52; --warn: #b06a2c; --danger: #a33028; --shadow: 0 1px 2px rgba(60,40,30,.06), 0 8px 24px rgba(60,40,30,.08); color-scheme: light; } /* ==================== TEMA · OLOROSO (oscuro cálido) ===================== */ /* (antes "noche": TODO heredado de noche; solo cambia --accent burdeos -> naranja ámbar #cf6a34, evocando Oporto/olorosos del sur.) */ [data-theme="oloroso"] { --bg: #171d24; /* heredado de noche */ --bg-elev: #1f2730; /* tarjetas */ --bg-sunken: #12171d; --ink: #e8edf2; /* texto principal */ --ink-soft: #a7b4c0; /* secundario */ --ink-faint: #6f7d8a; /* terciario */ --line: #2c3742; /* bordes */ --accent: #cf6a34; /* NUEVO: naranja ámbar (Oporto/oloroso) */ --accent-ink: #fdf3ef; --accent-soft: #2b2422; --gold: #c8a361; --ok: #6aa06e; --warn: #c9863f; --danger: #d15a4f; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35); color-scheme: dark; } /* ========================= TEMA · BLANCO (claro) ========================= */ /* (antes "neutro": mismo fondo hueso/gris, pero INVERTIDO — el DORADO es el acento (vino blanco) y el azul marino pasa a color de detalle (--gold). Para volver al azul predominante: intercambiar --accent<->--gold y ajustar --accent-soft/--accent-ink a los valores comentados. Cambio de ~4 líneas.) */ [data-theme="blanco"] { --bg: #f4f4f2; --bg-elev: #ffffff; --bg-sunken: #ebebe8; --ink: #23252a; --ink-soft: #63676e; --ink-faint: #9aa0a6; --line: #e2e2df; --accent: #9a8452; /* DORADO como acento (vino blanco) [antes azul #3f4a5a] */ --accent-ink: #fffdf5; /* [azul usaba #f6f8fb] */ --accent-soft: #efe7d1; /* dorado diluido [azul usaba #e5e8ee] */ --gold: #3f4a5a; /* azul marino como detalle [antes dorado #9a8452] */ --ok: #4f7a52; --warn: #b06a2c; --danger: #a33028; --shadow: 0 1px 2px rgba(20,20,25,.05), 0 8px 22px rgba(20,20,25,.07); color-scheme: light; } /* ============================ Base compartida ============================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: .2px; } h1 { font-size: var(--fs-h1); margin: 0; } h2 { font-size: var(--fs-h2); margin: 0; } a { color: inherit; text-decoration: none; } small { font-size: var(--fs-small); color: var(--ink-soft); } /* Marco de móvil para los mockups */ .phone { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; display: flex; flex-direction: column; } /* padding-bottom holgado + safe-area para que la tab-bar fija (~76-86px) no tape el último elemento (p. ej. el botón "Guardar cata"). */ /* v34 (full-bleed): padding lateral REDUCIDO en móvil (--pad-x) para aprovechar el ancho de la pantalla como hacen las apps profesionales (Instagram/LinkedIn), en vez del "marco" de 20px. */ .screen { flex: 1; padding: var(--sp-4) var(--pad-x) calc(112px + env(safe-area-inset-bottom, 0px)); } /* Cabecera de app */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--pad-x) var(--sp-3); } /* Sangrado a los bordes (full-bleed): una fila (p. ej. filtros con scroll horizontal) que llega hasta el borde real de la pantalla, recuperando el padding con margen negativo. Los propios hijos llevan el padding para que el primer/último chip no queden pegados al borde. */ .bleed { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); padding-left: var(--pad-x); padding-right: var(--pad-x); } .topbar .brand { font-family: var(--font-serif); font-size: var(--fs-h1); } .topbar .brand b { color: var(--accent); font-weight: 700; } .topbar .sub { color: var(--ink-soft); font-size: var(--fs-small); } /* Tarjeta */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: var(--sp-4); } /* Zonas interactivas: nunca seleccionar texto al tocar/arrastrar (evita el resaltado azul al ajustar estrellas o sliders con el dedo). Aplica a botones, chips, tabbar, estrellas y sliders. El texto de contenido (nombres, notas) sí es seleccionable. */ .btn, .chip, .tabbar, .stars-svg, .slider, [data-role="draggable"] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Botones */ .btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-m); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: var(--sp-2); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--bg-sunken); } .btn-block { width: 100%; justify-content: center; } /* Chips / etiquetas */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-soft); background: var(--bg-sunken); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } .chip.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; } /* Iconos SVG inline: heredan color del texto y tamaño por font-size */ .ico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.15em; } .ico path, .ico circle, .ico line, .ico rect, .ico polyline, .ico polygon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ico.fill path { fill: currentColor; stroke: none; } /* Navegación inferior (D3). B13 (2026-09-17): altura ajustada, sin margen muerto — solo el safe-area real de iOS. Antes 10px arriba/abajo dejaban espacio desaprovechado bajo los iconos. */ .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--maxw); background: var(--bg-elev); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px)); /* z-index alto: el footer SIEMPRE por encima del contenido del scroll (tarjetas del carrusel, halos, etc.). El contenido nunca debe solaparse por encima del menú. */ z-index: 50; } .tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-faint); font-size: var(--fs-tiny); flex: 1; padding: 3px 0; } .tabbar .tab.active { color: var(--accent); } .tabbar .tab .ico { width: 22px; height: 22px; } /* Botón central de añadir (FAB embebido en la tabbar). Algo menor y menos saliente (B13). */ .tab-add { margin-top: -22px; } .tab-add .fab { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); border: 3px solid var(--bg-elev); } .tab-add .fab .ico { width: 24px; height: 24px; } /* ── Escritorio / pantallas anchas ────────────────────────────────────── Mobile-first: en móvil todo queda igual. En pantallas anchas, en vez de una franja encajonada con bordes duros, la app se muestra como una columna central elegante (sombra + fondo tenue detrás) y algo más ancha. NO cambia el layout móvil (mismos componentes), solo respira mejor en escritorio. */ @media (min-width: 700px) { body { background: var(--bg-sunken); } .phone { max-width: 560px; min-height: 100vh; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0,0,0,.10); } /* La tabbar acompaña el ancho de la columna (no se estira a toda la pantalla). */ .tabbar { max-width: 560px; } } /* Utilidades */ .stack > * + * { margin-top: var(--sp-3); } .row { display: flex; align-items: center; gap: var(--sp-3); } .between { justify-content: space-between; } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .center { text-align: center; } .pill-type { width: 8px; align-self: stretch; border-radius: 4px; background: var(--accent); } /* ============================================================================ Rediseño Bakko 2.0 — tokens añadidos (Fase 1, 2026-09-21) Ver docs/REDISENO_IMPLEMENTACION.md. Solo AÑADEN; no cambian los de arriba (temas, escala base). El sistema de diseño Bakko vive en css/bakko.css. ============================================================================ */ :root { /* Movimiento orgánico (curvas con "vida") */ --ease-spring: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --t-fast: 160ms; --t: 240ms; --t-slow: 420ms; /* Radio extra grande (tarjetas héroe, hojas) y escala vertical de sección. La compactación del rediseño usa estos pasos de forma sistemática. */ --radius-xl: 24px; --sec-gap: var(--sp-5); /* separación entre secciones */ --sec-gap-tight: var(--sp-3); /* variante compacta */ /* Máscaras de silueta (se tiñen con currentColor vía -webkit-mask). */ --somm-src: url("/assets/icons/sumiller-mask.png"); --copa-src: url("/assets/icons/bakko-copa-mask.png"); /* Cristal translúcido (glass) para barras/badges del rediseño. Por defecto claro; el tema oloroso lo redefine abajo. */ --glass: rgba(255,255,255,.72); } [data-theme="oloroso"] { --glass: rgba(31,39,48,.72); } /* Movimiento: reveal orgánico al entrar (lo dispara bakko-ui.js con IntersectionObserver). */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-spring); } .reveal.in { opacity: 1; transform: none; } } @keyframes bakko-ping { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes bakko-pulse { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,50px) scale(1.15); } } @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.1); } }