/* ============================================================================ styles.css — ◆ Trufarella · CAPA DE TEMA ◆ ---------------------------------------------------------------------------- Este :root es lo ÚNICO que cambia el aspecto de la app. La estructura vive en estructura-base.css (compartida, byte-idéntica a PLANTILLA-BASE: no tocar). Trufarella es una app de FONDO CLARO y estilo NEUMÓRFICO: sus superficies no se pintan con el cristal ahumado del canon oscuro, sino con el doble juego de sombras (una clara y una oscura) que ya tenía. Eso se conserva declarando los tokens, sin añadir reglas de layout aquí. Migrado de styles1.css el 2026-08-03 al alinear a la base. ============================================================================ */ :root { /* ==== Identidad de marca ==== */ --blanco: #ffffff; --negro: #111111; /* negro de marca (textos y sombras), NO negro puro */ --color-primario: #1a5864; /* azul petróleo de Trufarella */ --color-secundario: #88a4a9; /* azul grisáceo claro */ --color-terciario: #1a586484; /* el primario con alfa, para los degradados */ --color-titulo: var(--color-primario); /* títulos de familia y alérgenos */ /* ==== Fondos de página ==== Los dos fondos van por token porque la base NO puede hardcodear una imagen por cliente. Si falta el token, la base cae a `/images/fondo.webp`, que Trufarella no tiene: eso daba un 404 y dejaba el index en NEGRO. */ --fondo-interior: url(/images/pasta-fondo.webp); /* páginas interiores */ --fondo-index-img: url(/images/pasta-fondo.webp); /* portada */ --logo-fondo: url(/images/logot.webp); --fondo-app: #ffffff; /* fondo REAL de página: blanco (fix barras iOS/Safari) */ /* El index pinta un color debajo mientras carga la imagen. En una app CLARA tiene que ser blanco: con el negro de la base se veía un destello oscuro. */ --fondo-negro: #ffffff; /* ==== TEMA CLARO (interruptor del CONTRATO-TOKENS §9) ==== Texto, iconos y halos derivan del FONDO, no van a pelo. Al ser una app clara: texto e iconos en el color de marca y halo desactivado (el halo oscuro solo tiene sentido sobre fondo oscuro). */ --color-texto-tema: var(--negro); --color-icono-nav: var(--color-primario); --halo-texto: none; /* ==== Carta ==== */ --color-nombre-plato: var(--negro); /* nombres de plato en negro (tema claro) */ --color-acento-carta: var(--color-primario); /* descripciones y precios */ --color-footer-acento: var(--color-primario); /* ==== Degradados de marca (identidad de Trufarella: se conservan) ==== */ --color-degradado2: linear-gradient( -25deg, var(--color-terciario) 0%, transparent 45% ); --color-degradado: linear-gradient(-35deg, var(--blanco) 0%, transparent 75%); --color-degradado3: linear-gradient( -35deg, var(--color-secundario) 0%, var(--blanco) 75% ); --color-fondo-carta: linear-gradient( -45deg, var(--color-terciario) 0%, transparent 20% ); --color-fondo-index: linear-gradient( -45deg, var(--color-terciario) 25%, transparent 45% ); --color-formulario: linear-gradient( -45deg, var(--color-secundario) 0, var(--blanco) 100% ); /* ==== Formulario de reservas (tema-aware: panel CLARO con texto oscuro) ==== */ --color-form-borde: rgba(26, 88, 100, 0.35); --color-form-borde-focus: rgba(26, 88, 100, 0.2); --form-fondo: linear-gradient( 160deg, #fff 0%, #fff 30%, color-mix(in srgb, var(--color-primario) 15%, #fff) 100% ); --form-texto: var(--negro); --form-input-fondo: rgba(0, 0, 0, 0.04); --form-placeholder: rgba(0, 0, 0, 0.45); --form-warning: var(--color-primario); --form-datepicker-filtro: none; /* icono del date picker en oscuro (tema claro) */ /* ==== Cristal (liquid glass) adaptado a fondo claro ==== Trufarella es neumórfica, no de cristal: el tinte va casi transparente y el brillo bajo para que no se coma el relieve de las sombras. */ --lg-bg-color: rgba(255, 255, 255, 0.45); --lg-brightness: 1; /* con 1.15 el fondo claro se blanquea (look lechoso) */ --lg-highlight: rgba(255, 255, 255, 0.15); --lg-blur: 0.25rem; /* ==== SOMBRAS NEUMÓRFICAS — la seña de identidad de Trufarella ==== Doble sombra (oscura abajo-derecha, clara arriba-izquierda) que da el relieve. Es lo que distingue esta app del resto de la flota; la base las consume por token, así que se conservan sin tocar su estructura. */ --sombra: 9px 9px 14px #676767, -9px -9px 14px #ffffff; --sombra1: 9px 9px 14px #ffffff, -9px -9px 14px #ffffff; --sombra2: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); /* ==== Botones y tipografía ==== */ --border: 2px double var(--color-primario); --border-radius: 20px; --tipo-principal: "Roboto", sans-serif; --tipo-secundaria: Verdana; --transition: all 0.5s ease-in-out; } /* ============================================================================ PORTADA CON SEIS BOTONES — uno más que el resto de la flota ---------------------------------------------------------------------------- Trufarella vende los desayunos como carta aparte, así que su index lleva MENÚ DESAYUNOS + MENÚ PRINCIPAL (ver js/botonesIndexTrufarella.js). Con el gap fijo de la base (1.5rem) los seis suman ~723px y se salen por debajo en los móviles cortos. Calculado: 6 botones de 55px + header 4rem + hero 13rem. El gap se ajusta por ALTO DE PANTALLA en vez de encogerlo para todos: en un móvil grande no sobra espacio que recortar y apretarlo ahí solo afearía la portada. Los cortes están donde empieza a no caber, no en números redondos. ⚠️⚠️ POR QUÉ ESTO VA EN `.index` Y NO EN EL `:root` DE ARRIBA — leer antes de "simplificarlo". `estructura-base.css` declara `--btn-index-sep` en SU PROPIO `:root` y se carga DESPUÉS que este archivo, así que a igual especificidad su `:root` gana al nuestro y el token no cambiaría nada. Meterlo en un `@media` tampoco sirve: las media queries NO suman especificidad, decide el orden. Declarándolo sobre `body.index` sí manda, porque una declaración hecha en el propio elemento siempre gana al valor HEREDADO del `html`, venga de donde venga. Misma razón por la que la base usa `.allergens { --hero-top: 4rem }`. ============================================================================ */ /* Header de la PORTADA un 20% más bajo (4rem → 3.2rem), para asegurar el hueco de los seis botones. Se aplica SIEMPRE, no solo en móvil: en la portada el header solo lleva las banderas y con 3.2rem siguen entrando justas (2.2rem dentro de una caja de 2.2rem, descontado el padding de 0.5rem). ⚠️ SOLO EN EL INDEX, a propósito. El mismo token gobierna los headers de carta, bebidas, alérgenos y reseñas, y ahí NO cabe: el botón RESERVAR mide 43.7px (1.3rem de fuente × 1.5 de interlineado + 0.3em de padding) y su header lleva 0.5rem de padding vertical, así que a 3.2rem se saldría del cristal por 8.5px. Hoy tiene 4.3px de holgura y no sobra. Si algún día se quiere bajar también ahí, primero hay que encoger el botón RESERVAR. */ .index { --alto-header: 3.2rem; } /* Móvil normal: el gap a la mitad, que es lo que pidió Manu. */ @media (height <= 800px) { .index { --btn-index-sep: 0.75rem; } } /* Móvil corto (iPhone SE y compañía): con el gap a la mitad AÚN se desborda, así que además se recorta el aire de DENTRO del botón — son 6 botones por 2 lados, y ahí hay más que rascar que en los 5 huecos — y el aire sobre el hero, que es lo último que queda sin tocar el tamaño del logo (su max-height va fija en la base y no es token). */ @media (height <= 650px) { .index { --btn-index-sep: 0.4rem; --btn-index-padding: 0.35rem 0.4rem 0.35rem 1.2rem; --hero-top: 0.5rem; } } /* ============================================================================ Las REGLAS de componentes (formulario, botones de reserva, WhatsApp, luces, html/body…) viven en estructura-base.css desde ago 2026. Este archivo es SOLO la capa de TEMA: el :root de arriba con los colores de Trufarella. Singularidades de esta app, si hacen falta, debajo de esta línea. ============================================================================ */