/* ============================================================ Programa ZÄNA — sistema de diseño Tokens extraídos del prototipo del diseñador (design/vistas-web-optimizadas/). Mobile-first. El tema oscuro NO está implementado todavía (lote posterior): las variables están agrupadas en :root para que se pueda redefinir el bloque completo bajo [data-tema="oscuro"] sin tocar ningún componente. NO usar el filtro invert() del prototipo — ver design/referencias.md. ============================================================ */ :root { /* Paleta de marca */ --navy: #0E1627; --plum: #6D5A6E; --stone: #A49A92; --slate: #4D596B; --sand: #DDD6CC; --ivory: #F6F4F0; --terra: #C47B6A; /* Roles semánticos (esto es lo que usan los componentes) */ --bg: var(--ivory); --bg-superficie: #fff; --bg-hueco: #F0EBE1; --texto: var(--navy); --texto-suave: var(--slate); --texto-tenue: var(--stone); --borde: var(--sand); --acento: var(--terra); --acento-texto: #fff; --exito: #1F8A5B; --exito-punto: #5FBF8A; /* Tipografía */ --f-display: 'Julius Sans One', sans-serif; --f-titulo: 'Cormorant Garamond', serif; --f-cuerpo: 'Jost', sans-serif; /* Forma */ --r-chico: 12px; --r: 16px; --r-grande: 22px; --r-pildora: 30px; --sombra: 0 4px 16px -8px rgba(14, 22, 39, .25); --sombra-alta: 0 34px 70px -24px rgba(14, 22, 39, .5); --nav-alto: 74px; --ancho-max: 1160px; } /* Tema oscuro (primera versión): se redefinen SOLO los roles semánticos; los colores de marca (navy, plum, terra) se conservan. Se activa con [data-tema="oscuro"] en . */ :root[data-tema="oscuro"] { --bg: #10131A; --bg-superficie: #191D27; --bg-hueco: #232833; --texto: #ECEAE4; --texto-suave: #AEB4BE; --texto-tenue: #868C96; --borde: #2A303C; --acento: #D08A78; --sombra: 0 4px 16px -8px rgba(0, 0, 0, .55); } :root[data-tema="oscuro"] body { background: var(--bg); } /* Control de esquina: idioma + modo oscuro (todas las secciones menos Perfil). */ .z-esquina { position: absolute; top: 14px; right: 20px; z-index: 6; display: flex; align-items: center; gap: 8px; } .z-esquina__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); background: var(--bg-superficie); color: var(--texto); display: flex; align-items: center; justify-content: center; cursor: pointer; } .z-esquina__lang { display: flex; border: 1px solid var(--borde); border-radius: var(--r-pildora); overflow: hidden; background: var(--bg-superficie); } .z-esquina__lang button, .z-esquina__lang a { border: none; background: none; cursor: pointer; text-decoration: none; display: inline-block; font-family: var(--f-cuerpo); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--texto-suave); padding: 7px 11px; } .z-esquina__lang button.is-on, .z-esquina__lang a.is-on { background: var(--navy); color: #fff; } :root[data-tema="oscuro"] .z-esquina__lang button.is-on, :root[data-tema="oscuro"] .z-esquina__lang a.is-on { background: var(--acento); } /* Buscador + toggle de vista en la misma fila. */ .z-busca-fila { display: flex; align-items: center; gap: 10px; } /* min-width:0 deja que el buscador encoja de verdad en pantallas angostas (≤340px); sin esto su min-content (input + icono) hacía la fila más ancha que el viewport y desbordaba Club horizontalmente. */ .z-busca-fila .z-buscador { flex: 1; min-width: 0; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--texto); font-family: var(--f-cuerpo); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* ---------- Tipografía ---------- */ .z-kicker { font-family: var(--f-display); font-size: 10px; letter-spacing: .24em; color: var(--acento); text-transform: uppercase; } .z-kicker--plum { color: var(--plum); } .z-kicker--tenue { color: var(--texto-tenue); } h1, h2, h3, .z-titulo { font-family: var(--f-titulo); font-weight: 500; line-height: 1.15; margin: 0; } h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 19px; font-weight: 600; } .z-logo { font-family: var(--f-display); letter-spacing: .16em; } .z-sub { font-size: 13px; color: var(--texto-tenue); } /* ---------- Layout ---------- */ .z-main { max-width: 430px; margin: 0 auto; padding: 12px 24px 108px; display: flex; flex-direction: column; gap: 22px; position: relative; } .z-main--ancho { max-width: var(--ancho-max); } .z-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .z-volver { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); font-weight: 500; font-size: 15px; } /* ---------- Vista de administradora ("ver como usuaria") ---------- */ .z-preview-bar { position: sticky; top: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; text-align: center; padding: 8px 16px; background: var(--navy); color: #fff; font-size: 12.5px; line-height: 1.4; } .z-preview-bar strong { font-weight: 600; } .z-preview-bar__txt { opacity: 0.92; } .z-preview-bar__salir { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 4px 12px; } .z-preview-bar__salir:hover { background: rgba(255,255,255,0.15); } /* ---------- Navegación ---------- */ .z-topnav { display: none; } .z-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: center; padding: 10px 6px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); background: var(--bg-superficie); font-size: 10.5px; /* Fuerza una capa de composición propia: evita el bug de Safari iOS donde una barra fija abajo no se repinta hasta hacer scroll en páginas largas que además tienen otro elemento `position:fixed` (el FAB de filtros en Club). */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } .z-bottomnav a { text-decoration: none; color: var(--texto-tenue); display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 56px; min-height: 44px; justify-content: center; } .z-bottomnav a[aria-current] { color: var(--acento); font-weight: 600; } .z-bottomnav a[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); } /* ---------- Botones ---------- */ .z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--acento); color: var(--acento-texto); border: none; border-radius: var(--r-pildora); padding: 15px 22px; font-family: var(--f-cuerpo); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 48px; transition: opacity .2s; } .z-btn:hover { opacity: .9; } .z-btn:disabled { opacity: .5; cursor: not-allowed; } .z-btn--contorno { background: transparent; color: var(--texto); border: 1.5px solid var(--navy); } .z-btn--fantasma { background: transparent; color: var(--texto-suave); font-weight: 500; } /* CTA principal de una tarjeta: sólido y de alto contraste (ej. "Continuar semana 4"). */ .z-btn--navy { background: var(--navy); color: var(--ivory); } .z-btn--bloque { width: 100%; } /* ---------- Cards ---------- */ .z-card { background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px; } .z-card--plano { border: none; } .z-card--navy { background: var(--navy); color: var(--ivory); border: none; } .z-card--slate { background: var(--slate); color: var(--ivory); border: none; } .z-card--plum { background: var(--plum); color: var(--ivory); border: none; } .z-card__media { margin: -16px -16px 14px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--sand); } .z-card__media > img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Hero de programa ---------- */ .z-hero { position: relative; height: 220px; border-radius: var(--r-grande); overflow: hidden; background: var(--sand); } .z-hero > img { width: 100%; height: 100%; object-fit: cover; } .z-hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 39, .1) 30%, rgba(14, 22, 39, .86)); } .z-hero__cuerpo { position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--ivory); } /* ---------- Barra de progreso ---------- */ .z-barra { height: 6px; border-radius: 3px; background: rgba(246, 244, 240, .28); overflow: hidden; margin-top: 7px; } .z-barra__relleno { height: 100%; background: var(--acento); } /* ---------- Chips / pestañas ---------- */ .z-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .z-chips::-webkit-scrollbar { display: none; } .z-chip { flex-shrink: 0; padding: 9px 16px; border-radius: var(--r-pildora); background: var(--bg-superficie); border: 1px solid var(--borde); color: var(--texto-suave); text-decoration: none; font-size: 13.5px; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; } .z-chip[aria-current], .z-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); font-weight: 600; } /* Chips de categoría/etiqueta en el detalle de una publicación (más chicos que los de filtro). */ .z-tax-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .z-tax-chips .z-chip { min-height: 0; padding: 5px 13px; font-size: 12.5px; } .z-tax-chips .z-chip:hover { border-color: var(--terra); color: var(--terra); } .z-tax-chips .z-chip--etq { background: transparent; color: var(--texto-suave); } /* Chip de categoría en las tarjetas del listado (solo etiqueta, la tarjeta ya es enlace). */ .z-card-cat { display: inline-flex; align-items: center; background: var(--sand); color: var(--plum); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; } /* Fila con el badge de acceso + el chip de categoría, juntos (sin ocupar una línea extra). */ .z-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } .z-card-badges--sobre { position: absolute; top: 12px; left: 12px; margin: 0; } .z-chip--acento[aria-current] { background: var(--acento); border-color: var(--acento); } .z-chip--icono { padding: 9px 12px; } /* Chips secundarias (tipo de comida). Más delgadas que la navegación de la semana para que no compitan visualmente. 32px de alto: por debajo del ideal de 44px del brief, pero es lo que pide el diseño — ver bitácora MEJORA-12/17. */ .z-chip--mini { padding: 6px 15px; font-size: 12.5px; min-height: 32px; } /* Navegación de comidas: subnav + días + tipos, agrupados con poco aire entre sí para que ocupen menos alto vertical (petición de Hugo, MEJORA-17). */ .z-nav-comidas { display: flex; flex-direction: column; gap: 10px; } /* Días de la semana: círculos de tamaño acotado que envuelven a 2 filas cuando no caben 7. NO se agrandan en pantallas angostas (tope de 46px); antes, con grid de 1fr, se inflaban al pasar a menos columnas — ver MEJORA-20. */ .z-dias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .z-chip--dia { flex: 1 1 36px; max-width: 46px; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; font-size: 13px; } /* ---------- Cuadrícula de semanas ---------- auto-fit + 1fr: las columnas se estiran para llenar TODO el ancho, sin hueco sobrante a la derecha, sea cual sea el total de semanas. */ .z-semanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: 7px; } .z-semana { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-decoration: none; background: var(--bg-superficie); border: 1px solid var(--borde); color: var(--texto-tenue); } .z-semana--actual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; } .z-semana--bloqueada { background: transparent; border: 1px dashed var(--stone); opacity: .6; cursor: not-allowed; } /* Variante en fila: una sola línea deslizable con el dedo, centrada en la semana actual (el JS la lleva al centro al cargar). Se usa dentro de una semana. */ .z-semanas-fila { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 0; scrollbar-width: none; } .z-semanas-fila::-webkit-scrollbar { display: none; } .z-semana-chip { flex: 0 0 auto; width: 58px; min-height: 58px; border-radius: 14px; border: 1px solid var(--borde); background: var(--bg-superficie); color: var(--texto-tenue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; scroll-snap-align: center; } .z-semana-chip__numero { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .z-semana-chip__etiqueta { font-family: var(--f-display); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; } .z-semana-chip--hecha { color: var(--texto-suave); } .z-semana-chip--actual { background: var(--acento); border-color: var(--acento); color: #fff; } .z-semana-chip--bloqueada { border-style: dashed; border-color: var(--stone); background: transparent; opacity: .6; cursor: not-allowed; } /* ---------- Marca del programa (logo sobre su color) ---------- Sustituto de la imagen cuando el programa todavía no tiene una. */ .z-marca { display: flex; align-items: center; justify-content: center; background: var(--marca, var(--plum)); flex-shrink: 0; } /* El logo se contiene dentro del cuadro; el tope evita que crezca sin control en heros grandes. Va después de las reglas de imagen de card para ganarles. */ .z-marca img { width: 46%; height: 46%; max-width: 120px; max-height: 120px; object-fit: contain; } .z-marca--cuadro { width: 60px; height: 60px; border-radius: var(--r-chico); } .z-marca--cuadro img { width: 58%; height: 58%; } .z-marca--miniatura { width: 100%; height: 150px; border-radius: var(--r) var(--r) 0 0; } .z-marca--hero { width: 100%; height: 100%; } /* ---------- Tarjetas del panel ---------- */ .z-programa-card { background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--texto); display: block; } .z-programa-card__media { position: relative; height: 160px; background: var(--sand); } /* Solo la foto directa se recorta a pantalla completa; el logo va anidado en .z-marca. */ .z-programa-card__media > img { width: 100%; height: 100%; object-fit: cover; } .z-programa-card__cuerpo { padding: 16px; } /* Fila compacta (Club ZÄNA en el panel) */ .z-fila-card { display: flex; align-items: center; gap: 14px; background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px; text-decoration: none; color: var(--texto); } /* ---------- Badges ---------- */ .z-badge { display: inline-block; font-family: var(--f-display); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 12px; background: var(--plum); color: var(--ivory); } .z-badge--acento { background: var(--acento); } .z-badge--gratis { background: #5E7357; } .z-badge--bloq { background: var(--stone); } /* Tarjeta de contenido de membresía cuando la usuaria no tiene acceso (al buscar). */ .z-card.is-bloqueado, .z-fila-card.is-bloqueado { opacity: .62; cursor: not-allowed; } .z-card.is-bloqueado img, .z-fila-card.is-bloqueado img { filter: grayscale(.45); } .z-badge--contorno { background: transparent; border: 1px solid var(--borde); color: var(--texto-suave); } /* ---------- Datos / estadísticas ---------- */ .z-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; } .z-stat { background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px 6px; text-align: center; /* Centrado vertical: las tarjetas de una fila igualan altura (grid), y así el número + etiqueta quedan centrados aunque una etiqueta ocupe 1 línea y otra 2. */ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 92px; } .z-stat--navy { background: var(--navy); border-color: var(--navy); color: var(--ivory); } .z-stat__valor { font-family: var(--f-titulo); font-weight: 600; font-size: 26px; line-height: 1; display: block; } .z-stat__unidad { font-size: 14px; color: var(--texto-tenue); font-family: var(--f-cuerpo); } /* Etiqueta del dato nutricional. Antes: Julius Sans One 8px en stone (bajo contraste, difícil de leer). Ahora Jost 600 en slate, más grande y separada del número — más legible sin saturar (MEJORA-21). */ .z-stat__etiqueta { font-family: var(--f-cuerpo); font-weight: 600; font-size: 9.5px; letter-spacing: .03em; color: var(--texto-suave); margin-top: 7px; display: block; text-transform: uppercase; line-height: 1.25; } .z-stat--navy .z-stat__etiqueta { color: var(--sand); } /* ---------- Listas de contenido ---------- */ .z-lista { background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; } .z-lista__fila { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--borde); font-size: 14px; } .z-lista__fila:last-child { border-bottom: none; } /* Ingredientes / instrucciones vienen como HTML del Excel */ .z-prosa ul, .z-prosa ol { margin: 8px 0 0; padding-left: 22px; } /* Listas de verificación interactivas (check / opción única). La lectora las marca; se guardan en su navegador. Los .z-check__plain son títulos/separadores sin casilla. */ .z-prosa ul.z-check { list-style: none; padding-left: 2px; margin: 10px 0 0; } .z-prosa ul.z-check li { position: relative; padding-left: 30px; margin-bottom: 8px; cursor: pointer; user-select: none; } .z-prosa ul.z-check li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 2px solid var(--acento); border-radius: 5px; box-sizing: border-box; background: var(--bg-superficie); transition: background .15s; } .z-prosa ul.z-check[data-check="radio"] li::before { border-radius: 50%; } .z-prosa ul.z-check li.is-checked::before { background: var(--acento); } .z-prosa ul.z-check[data-check="check"] li.is-checked::after { content: ''; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .z-prosa ul.z-check[data-check="radio"] li.is-checked::after { content: ''; position: absolute; left: 5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .z-prosa ul.z-check li.is-checked { color: var(--texto-suave); } /* Variante "tachar al marcar": además de atenuar, tacha el renglón marcado. */ .z-prosa ul.z-check[data-tachar] li.is-checked { text-decoration: line-through; } .z-prosa ul.z-check li.z-check__plain { padding-left: 2px; cursor: default; font-weight: 700; margin-top: 14px; color: var(--texto); } .z-prosa ul.z-check li.z-check__plain::before, .z-prosa ul.z-check li.z-check__plain::after { display: none; } /* Grupo desplegable: el 1.er renglón es un título con chevron que pliega/despliega los ítems (por defecto abierto). En checklist el título trae una casilla maestra para marcar/desmarcar todas; en radio solo pliega/despliega. */ .z-prosa ul.z-check li.z-check__title { padding-left: 26px; cursor: pointer; font-weight: 700; margin: 4px 0 10px; color: var(--texto); display: flex; align-items: center; gap: 8px; user-select: none; } .z-prosa ul.z-check li.z-check__title::before { display: none; } .z-prosa ul.z-check li.z-check__title::after { content: ''; position: absolute; left: 4px; top: 46%; width: 7px; height: 7px; border: solid var(--texto-suave); border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(45deg); transition: transform .15s; } .z-prosa ul.z-check[data-collapsible].is-collapsed li.z-check__title::after { transform: translateY(-50%) rotate(-45deg); } .z-prosa ul.z-check[data-collapsible].is-collapsed > li:not(.z-check__title) { display: none; } .z-prosa ul.z-check li.z-check__title .z-check__master { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--acento); border-radius: 5px; box-sizing: border-box; background: var(--bg-superficie); cursor: pointer; } .z-prosa ul.z-check li.z-check__title .z-check__master.is-checked, .z-prosa ul.z-check li.z-check__title .z-check__master.is-indeterminate { background: var(--acento); } .z-prosa ul.z-check li.z-check__title .z-check__master.is-checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .z-prosa ul.z-check li.z-check__title .z-check__master.is-indeterminate::after { content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: #fff; } .z-prosa li { margin-bottom: 6px; } .z-prosa p { margin: 0 0 10px; } /* ---------- Prosa editorial (artículos) ---------- El cuerpo de un artículo es HTML libre: subtítulos, negritas, imágenes intermedias, enlaces (internos y externos) y recuadros destacados. Estos estilos definen ese formato — es el que el panel admin (Fase 1.5) reutilizará al escribir publicaciones. */ .z-prosa > :first-child { margin-top: 0; } .z-prosa .z-lead { font-size: 19px; line-height: 1.6; color: var(--texto); } .z-prosa h2 { font-family: var(--f-titulo); font-size: 24px; line-height: 1.2; margin: 26px 0 10px; } .z-prosa h3 { font-family: var(--f-titulo); font-size: 19px; margin: 20px 0 8px; } .z-prosa h1 { font-family: var(--f-titulo); font-size: 28px; line-height: 1.15; margin: 28px 0 12px; } .z-prosa h4 { font-family: var(--f-titulo); font-size: 17px; margin: 18px 0 6px; } .z-prosa h5 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; } .z-prosa h6 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin: 16px 0 6px; } .z-prosa strong { font-weight: 600; color: var(--navy); } .z-prosa a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* El enlace externo se marca con una flechita, para distinguirlo de los internos. */ .z-prosa a[target="_blank"]::after { content: " \2197"; font-size: .85em; color: var(--texto-suave); } /* Mención interna (@): se muestra como chip en vez de subrayada. */ .z-prosa a.z-ref { text-decoration: none; background: var(--sand); color: var(--plum); border-radius: 999px; padding: 1px 9px; font-weight: 600; font-size: .94em; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .15s, color .15s; } .z-prosa a.z-ref:hover { background: var(--terra); color: #fff; } .z-prosa a.z-ref[target="_blank"]::after { content: none; } .z-prosa figure { margin: 20px 0; } .z-prosa figure img { width: 100%; border-radius: var(--r-grande); max-height: 320px; object-fit: cover; } .z-prosa figcaption { margin-top: 8px; font-size: 13px; color: var(--texto-suave); text-align: center; font-style: italic; } .z-prosa figcaption a { color: var(--texto-suave); } /* Recuadro destacado ("dato clave"): barra de color a la izquierda y fondo suave. */ .z-prosa blockquote { position: relative; margin: 20px 0; padding: 14px 16px 14px 52px; border-left: 3px solid var(--acento); background: var(--bg-hueco); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; color: var(--texto); } .z-prosa blockquote::before { content: '\201C'; position: absolute; left: 12px; top: 6px; font-family: Georgia, serif; font-size: 46px; line-height: 1; color: var(--acento); opacity: .4; } .z-prosa blockquote p:last-child { margin-bottom: 0; } .z-prosa .z-nota-legal { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 12.5px; font-style: italic; color: var(--texto-suave); } /* ---------- Lista de compras ---------- Secciones colapsables separadas por una línea sutil. */ .z-compras { display: flex; flex-direction: column; } .z-compras__grupo { border-top: 1px solid var(--borde); } .z-compras__grupo:last-child { border-bottom: 1px solid var(--borde); } /* Cabecera: casilla "marcar toda la sección" + botón que colapsa. */ .z-compras__cab { display: flex; align-items: center; gap: 8px; } .z-compras__cab .z-compras__cabecera { flex: 1; width: auto; } .z-compras__todos { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; padding-left: 2px; } .z-compras__todos input { position: absolute; opacity: 0; width: 0; height: 0; } .z-compras__todos .z-item__caja { width: 20px; height: 20px; border-radius: 6px; } .z-compras__todos input:checked + .z-item__caja { background: var(--acento); border-color: var(--acento); color: #fff; } .z-compras__todos.is-partial .z-item__caja { background: var(--sand); border-color: var(--stone); color: var(--stone); } .z-compras__todos input:focus-visible + .z-item__caja { outline: 2px solid var(--acento); outline-offset: 2px; } /* La cabecera es un botón a todo el ancho: al pulsarla colapsa la sección. */ .z-compras__cabecera { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 2px; background: none; border: none; cursor: pointer; font-family: var(--f-cuerpo); text-align: left; } .z-compras__flecha { color: var(--texto-tenue); flex-shrink: 0; transition: transform .2s; } .z-compras__cabecera[aria-expanded="false"] .z-compras__flecha { transform: rotate(-90deg); } .z-compras__titulo { flex: 1; font-family: var(--f-cuerpo); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--texto); } .z-compras__conteo { font-size: 12.5px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; flex-shrink: 0; } .z-compras__items { padding-bottom: 8px; } /* Colapsado: solo cuando hay JS (si no, queda siempre abierto). */ .z-compras__grupo[data-colapsado] .z-compras__items { display: none; } .z-item { display: flex; align-items: center; gap: 12px; padding: 9px 2px; cursor: pointer; min-height: 44px; } .z-item input { position: absolute; opacity: 0; width: 0; height: 0; } .z-item__caja { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--stone); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s, border-color .15s; } .z-item input:checked + .z-item__caja { background: var(--acento); border-color: var(--acento); color: #fff; } .z-item input:focus-visible + .z-item__caja { outline: 2px solid var(--acento); outline-offset: 2px; } .z-item__nombre { flex: 1; min-width: 0; font-size: 14.5px; } .z-item__cantidad { color: var(--texto-tenue); font-size: 13px; flex-shrink: 0; } /* Renglón de texto dentro de una categoría (contenido que no es lista): se muestra sin casilla. */ .z-compras__texto { padding: 8px 2px; font-size: 14px; color: var(--texto-suave); line-height: 1.6; } .z-compras__texto :first-child { margin-top: 0; } .z-compras__texto :last-child { margin-bottom: 0; } .z-compras__texto p { margin: 0 0 6px; } .z-item input:checked ~ .z-item__nombre { text-decoration: line-through; color: var(--texto-tenue); } /* ---------- Receta: imagen con botón de descarga ---------- */ .z-receta-media { position: relative; } .z-receta-media img { width: 100%; border-radius: var(--r-grande); max-height: 420px; object-fit: cover; display: block; } .z-descarga-flotante { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; font-family: var(--f-cuerpo); font-size: 12px; font-weight: 600; color: var(--navy); background: rgba(246, 244, 240, .9); border: none; border-radius: var(--r-pildora); box-shadow: var(--sombra); cursor: pointer; } .z-descarga-flotante:hover { background: var(--ivory); } .no-js .z-descarga-flotante { display: none; } /* Vista previa de ingredientes y recorte de la preparación en la tarjeta. */ .z-ing-preview { margin: 10px 0 0; padding-left: 20px; } .z-ing-preview li { margin-bottom: 5px; font-size: 14.5px; } .z-recorte { max-height: 132px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent); } /* ---------- Checklist de ingredientes (dentro de la hoja) ---------- */ .z-chk-lista { display: flex; flex-direction: column; } .z-chk-seccion { font-family: var(--f-titulo); font-size: 16px; color: var(--plum); margin: 14px 0 2px; } .z-chk-seccion:first-child { margin-top: 0; } .z-chk { display: flex; align-items: center; gap: 12px; padding: 9px 2px; cursor: pointer; min-height: 44px; border-bottom: 1px solid var(--borde); } .z-chk input { position: absolute; opacity: 0; width: 0; height: 0; } .z-chk__caja { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--stone); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s, border-color .15s; } .z-chk input:checked + .z-chk__caja { background: var(--acento); border-color: var(--acento); color: #fff; } .z-chk input:focus-visible + .z-chk__caja { outline: 2px solid var(--acento); outline-offset: 2px; } .z-chk__txt { flex: 1; min-width: 0; font-size: 14.5px; } .z-chk input:checked ~ .z-chk__txt { text-decoration: line-through; color: var(--texto-tenue); } /* Casilla maestra "Marcar todas": encabeza la lista y no se tacha al marcarse. */ .z-chk--maestro { border-bottom: 2px solid var(--borde); } .z-chk--maestro input:checked ~ .z-chk__txt { text-decoration: none; color: var(--texto); } .z-chk--maestro.is-partial .z-chk__caja { background: var(--sand); border-color: var(--stone); color: var(--stone); } /* Secciones plegables del checklist agrupado: cabecera con casilla maestra propia ("marcar toda la sección"), título, conteo y chevron. Conserva el look .z-chk. */ .z-chk-grupo + .z-chk-grupo { margin-top: 4px; } .z-chk-seccion--grupo { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; } .z-chk-seccion--grupo:first-child { margin-top: 0; } .z-chk-mini { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; } .z-chk-mini input { position: absolute; opacity: 0; width: 0; height: 0; } .z-chk-mini .z-chk__caja { width: 20px; height: 20px; } .z-chk-mini input:checked + .z-chk__caja { background: var(--acento); border-color: var(--acento); color: #fff; } .z-chk-mini.is-partial .z-chk__caja { background: var(--sand); border-color: var(--stone); color: var(--stone); } .z-chk-mini input:focus-visible + .z-chk__caja { outline: 2px solid var(--acento); outline-offset: 2px; } .z-chk-seccion__btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; font-family: var(--f-titulo); font-size: 16px; color: var(--plum); } .z-chk-seccion__txt { flex: 1; min-width: 0; } .z-chk-seccion__conteo { font-size: 12.5px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; } .z-chk-seccion__chev { width: 9px; height: 9px; flex: 0 0 auto; border: solid var(--stone); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; } .z-chk-grupo.is-collapsed .z-chk-seccion__chev { transform: rotate(-45deg); } .z-chk-grupo.is-collapsed .z-chk-grupo__items { display: none; } .z-chk-nota { padding: 8px 2px; font-size: 13.5px; color: var(--texto-tenue); font-style: italic; } .z-chk__cant { color: var(--texto-tenue); font-size: 13px; } /* Un .z-btn con [hidden] debe ocultarse: display de .z-btn ganaba al [hidden] del reset. Afecta al botón "Guardar" que el JS oculta cuando guarda solo (checklist y lista de compras). */ .z-btn[hidden] { display: none; } /* ---------- Modal de idioma (descargas) ---------- */ .z-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .z-modal[hidden] { display: none; } .z-modal__fondo { position: absolute; inset: 0; background: rgba(14, 22, 39, .45); } .z-modal__panel { position: relative; width: 100%; max-width: 360px; background: var(--bg-superficie); border-radius: var(--r-grande); box-shadow: var(--sombra); padding: 22px; } .z-modal__ops { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .z-modal__pronto { font-size: 12px; color: var(--texto-tenue); font-weight: 400; } .z-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } /* ---------- Comentarios ---------- */ .z-comentarios { border-top: 1px solid var(--borde); padding-top: 26px; scroll-margin-top: 20px; } .z-com-form textarea { width: 100%; border: 1px solid var(--borde); border-radius: var(--r); padding: 12px 14px; font-family: var(--f-cuerpo); font-size: 15px; line-height: 1.5; resize: vertical; background: var(--bg-superficie); color: var(--texto); } .z-com-form textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } .z-com-lista, .z-com-respuestas { list-style: none; padding: 0; margin: 22px 0 0; } .z-com { display: flex; gap: 12px; margin-bottom: 22px; } .z-com__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--plum); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-family: var(--f-cuerpo); font-weight: 600; font-size: 13px; flex-shrink: 0; } .z-com__avatar--sm { width: 30px; height: 30px; font-size: 11px; background: var(--stone); } .z-com__cuerpo { flex: 1; min-width: 0; } .z-com__meta { font-size: 13px; color: var(--texto-suave); } .z-com__autor { font-weight: 600; color: var(--texto); } .z-com__texto { margin: 4px 0 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .z-com__responder { margin-top: 6px; } .z-com__responder summary { list-style: none; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; color: var(--acento); } .z-com__responder summary::-webkit-details-marker { display: none; } .z-com-respuestas { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--borde); } .z-com-respuestas .z-com { margin-bottom: 16px; } .z-com-vertodos { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-weight: 600; font-size: 14px; color: var(--acento); text-decoration: none; } .z-com-vertodos:hover { text-decoration: underline; } /* ---------- Favorito: botón "Guardar" en el detalle ---------- */ .z-fav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pildora); border: 1px solid var(--borde); background: var(--bg-superficie); color: var(--texto); font-family: var(--f-cuerpo); font-weight: 600; font-size: 14px; cursor: pointer; } .z-fav-btn.is-on { color: var(--terra); border-color: var(--terra); background: rgba(196, 123, 106, .08); } .z-fav-form { align-self: flex-start; } /* Botones flotantes sobre la imagen: corazón (arriba-der), compartir (abajo-izq), descarga (abajo-der). Compactos y semitransparentes. */ .z-articulo-media { position: relative; } .z-fav-flot-form { position: absolute; top: 10px; right: 10px; z-index: 3; } .z-share-flot { position: absolute; left: 10px; bottom: 10px; z-index: 3; } .z-fav-flot, .z-share-flot { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(246, 244, 240, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(14, 22, 39, .18); } .z-fav-flot.is-on { color: var(--terra); } .z-share-flot.is-copiado { color: var(--terra); } /* Fila de acciones cuando NO hay imagen (favorito + compartir en texto). */ .z-acciones-detalle { display: flex; flex-wrap: wrap; gap: 10px; } /* ---------- Lightbox de imágenes ---------- */ .z-lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(14, 22, 39, .88); padding: 24px; } .z-lightbox[hidden] { display: none; } .z-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; object-fit: contain; } .z-lightbox__cerrar { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(246, 244, 240, .16); color: var(--ivory); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ---------- Compartir (solo contenido gratuito) ---------- */ .no-js .z-compartir { display: none; } .z-compartir { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 9px 16px; border-radius: var(--r-pildora); border: 1px solid var(--borde); background: var(--bg-superficie); color: var(--texto); font-family: var(--f-cuerpo); font-weight: 600; font-size: 14px; cursor: pointer; } .z-compartir.is-copiado { color: var(--terra); border-color: var(--terra); } /* ---------- Pomodoro flotante ---------- */ .no-js .z-pomo-fab { display: none; } .z-pomo-fab { position: fixed; right: 20px; bottom: 86px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pildora); border: none; background: var(--navy); color: var(--ivory); font-family: var(--f-cuerpo); font-weight: 600; font-size: 14px; box-shadow: var(--sombra); cursor: pointer; } .z-pomo[hidden] { display: none; } .z-pomo__panel, .z-pomo__mini { position: fixed; right: 20px; bottom: 86px; z-index: 55; } .z-pomo__panel[hidden], .z-pomo__cfg[hidden], .z-pomo__run[hidden], .z-pomo__done[hidden], .z-pomo__mini[hidden] { display: none; } .z-pomo__panel { width: 264px; background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r-grande); box-shadow: var(--sombra); padding: 18px; } .z-pomo__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-family: var(--f-titulo); font-weight: 600; } .z-pomo__x { border: none; background: none; font-size: 18px; color: var(--texto-suave); cursor: pointer; line-height: 1; padding: 0 4px; } .z-pomo__presets { display: flex; gap: 8px; margin-bottom: 10px; } .z-pomo__presets button { flex: 1; padding: 10px 0; border-radius: 12px; border: 1px solid var(--borde); background: var(--bg-hueco); color: var(--texto); font-family: var(--f-cuerpo); font-weight: 600; font-size: 13px; cursor: pointer; } .z-pomo__custom { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); } .z-pomo__custom input { width: 60px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; font-family: var(--f-cuerpo); font-size: 15px; text-align: center; color: var(--texto); background: var(--bg-superficie); } .z-pomo__custom .z-btn { margin-left: auto; padding: 10px 16px; } .z-pomo__nota { font-size: 11.5px; color: var(--texto-suave); margin: 12px 0 0; line-height: 1.45; } .z-pomo__reloj { font-family: var(--f-titulo); font-weight: 600; font-size: 48px; text-align: center; font-variant-numeric: tabular-nums; margin: 4px 0 14px; } .z-pomo__acc { display: flex; gap: 8px; } .z-pomo__acc .z-btn { flex: 1; } .z-pomo__done { text-align: center; } .z-pomo__done strong { font-family: var(--f-titulo); font-size: 24px; display: block; } .z-pomo__done p { color: var(--texto-suave); margin: 6px 0 14px; } .z-pomo__mini { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-pildora); border: none; background: var(--navy); color: var(--ivory); font-family: var(--f-cuerpo); font-weight: 600; font-size: 15px; box-shadow: var(--sombra); cursor: pointer; font-variant-numeric: tabular-nums; } .z-pomo__mini.is-done { background: var(--terra); } /* Con una hoja (ingredientes/pasos) abierta, el temporizador se sube al tope y por encima de la hoja (z-index > 60), para no quedar tapado ni tapar el texto de la hoja. */ body.hoja-abierta .z-pomo__mini, body.hoja-abierta .z-pomo__panel { bottom: auto; top: calc(14px + env(safe-area-inset-top)); z-index: 70; } /* ---------- Pantalla de Favoritos ---------- */ .z-fav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .z-fav-card { position: relative; background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .z-fav-card__link { position: absolute; inset: 0; z-index: 1; } .z-fav-card__media { position: relative; height: 104px; background: var(--sand); } .z-fav-card__media img { width: 100%; height: 100%; object-fit: cover; } .z-fav-card__heart { position: absolute; top: 8px; right: 8px; z-index: 2; } .z-fav-card__heart button { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .92); color: var(--terra); display: flex; align-items: center; justify-content: center; cursor: pointer; } .z-fav-card__cuerpo { padding: 10px 12px 12px; } .z-fav-card__tipo { font-family: var(--f-cuerpo); font-weight: 600; font-size: 8px; letter-spacing: .16em; } .z-fav-card__tipo--receta { color: var(--terra); } .z-fav-card__tipo--articulo { color: var(--plum); } .z-fav-card__cuerpo h3 { font-family: var(--f-titulo); font-size: 16px; line-height: 1.15; margin-top: 3px; } /* ---------- Mis comentarios (actividad) ---------- */ .z-actividad { display: flex; flex-direction: column; } .z-act { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borde); text-decoration: none; color: var(--texto); } .z-act:last-child { border-bottom: none; } .z-act__thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--sand); } .z-act__thumb img { width: 100%; height: 100%; object-fit: cover; } .z-act__cuerpo { flex: 1; min-width: 0; } .z-act__top { display: flex; justify-content: space-between; gap: 8px; } .z-act__titulo { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .z-act__fecha { font-size: 11px; color: var(--texto-suave); flex-shrink: 0; } .z-act__frag { margin: 3px 0 0; font-size: 13px; color: var(--texto-suave); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ---------- Perfil: accesos rápidos ---------- */ .z-perfil-acciones { display: flex; gap: 10px; } .z-perfil-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; color: var(--navy); font-family: var(--f-cuerpo); font-weight: 600; font-size: 13.5px; text-decoration: none; } .z-perfil-avance { display: flex; align-items: center; gap: 14px; background: var(--slate); color: var(--ivory); border-radius: 18px; padding: 16px 18px; text-decoration: none; } .z-perfil-avance__icono { width: 44px; height: 44px; border-radius: 12px; background: rgba(246, 244, 240, .14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------- Herramientas (calculadoras) ---------- */ .z-tool { display: flex; flex-direction: column; gap: 20px; } .z-tool__kicker { font-family: var(--f-display); font-size: 11px; letter-spacing: .3em; color: var(--terra); text-transform: uppercase; } .z-tool__titulo { font-family: var(--f-titulo); font-weight: 500; font-size: 30px; margin: 6px 0 0; } .z-tool-res { background: var(--navy); color: var(--ivory); border-radius: 20px; padding: 24px 22px; text-align: center; } .z-tool-res__label { font-family: var(--f-display); font-size: 10px; letter-spacing: .24em; color: var(--sand); text-transform: uppercase; } .z-tool-res__num { font-family: var(--f-titulo); font-weight: 600; font-size: 56px; line-height: 1; margin: 6px 0; } .z-tool-res__num small { font-size: 18px; color: var(--sand); font-weight: 600; } .z-tool-res__sub { font-family: var(--f-cuerpo); font-size: 12.5px; color: var(--sand); opacity: .92; } .z-tool-res__cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-cuerpo); font-size: 14px; font-weight: 600; margin-top: 6px; } .z-tool-res__cat .z-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; } .z-seg { display: flex; gap: 8px; } .z-seg__label { font-family: var(--f-display); font-size: 10px; letter-spacing: .24em; color: var(--plum); text-transform: uppercase; margin-bottom: 10px; } .z-seg button { flex: 1; text-align: center; border-radius: 16px; padding: 10px 6px; font-family: var(--f-cuerpo); font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--bg-superficie); border: 1px solid var(--borde); color: var(--slate); } .z-seg button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; } .z-tool-inputs { display: flex; gap: 12px; align-items: flex-end; } .z-tool-inputs .z-campo { flex: 1; } .z-tool-inputs .z-campo input { font-size: 20px; font-weight: 600; } .z-tool-inputs .z-menos { font-family: var(--f-titulo); font-size: 24px; color: var(--stone); padding-bottom: 12px; } .z-imc-escala { position: relative; height: 8px; border-radius: 4px; margin: 22px 4px 8px; background: linear-gradient(90deg, var(--slate), #1F8A5B 35%, var(--terra) 65%, #B4503B); } .z-imc-escala__marca { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); } .z-imc-escala__nums { display: flex; justify-content: space-between; font-family: var(--f-cuerpo); font-size: 10px; color: var(--sand); opacity: .8; } .z-macro__top { display: flex; justify-content: space-between; font-family: var(--f-cuerpo); font-size: 13px; margin-bottom: 6px; } .z-macro__top b { font-weight: 600; } .z-macro__top span { color: var(--slate); } .z-macro__barra { height: 10px; border-radius: 5px; background: var(--sand); overflow: hidden; } .z-macro__fill { height: 100%; } .z-vasos { display: flex; flex-wrap: wrap; gap: 10px; } .z-vaso { width: 38px; height: 48px; border-radius: 6px 6px 10px 10px; background: #fff; border: 1.5px solid var(--sand); } .z-vaso.is-full { background: var(--terra); border-color: var(--terra); } .z-formula { background: var(--sand); border-radius: 16px; padding: 14px 16px; font-family: var(--f-cuerpo); font-size: 13.5px; color: var(--navy); line-height: 1.5; text-align: center; } .z-formula .z-op { color: var(--terra); font-weight: 600; } .z-ptool-ring { width: 230px; height: 230px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 4px auto 0; background: conic-gradient(var(--terra) var(--pct, 0%), var(--sand) 0); } .z-ptool-ring__inner { width: 188px; height: 188px; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; } .z-ptool-ring__t { font-family: var(--f-titulo); font-weight: 600; font-size: 56px; line-height: 1; color: var(--navy); } .z-ptool-ring__u { font-family: var(--f-display); font-size: 9px; letter-spacing: .24em; color: var(--stone); margin-top: 4px; } .z-ptool-btns { display: flex; gap: 12px; justify-content: center; align-items: center; } .z-ptool-reset { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .z-tool-nota { font-family: var(--f-cuerpo); font-size: 12px; color: var(--stone); line-height: 1.6; margin: 0; } /* ---------- Estados (paywall, vacío, error) ---------- */ .z-estado { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Estado que ocupa toda la página (ej. "semana no disponible"): se centra en el alto disponible en vez de quedar pegado arriba. 220px ≈ lo que ocupan el link "volver", los paddings del main y el nav inferior. */ .z-estado--pagina { justify-content: center; min-height: calc(100vh - 220px); } .z-estado__icono { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-superficie); border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; font-family: var(--f-titulo); font-size: 40px; color: var(--acento); } .z-estado p { color: var(--texto-suave); max-width: 300px; margin: 0; } /* ---------- Bloque colapsable ("Ver más") ---------- */ .z-colapsable { position: relative; max-height: 260px; overflow: hidden; } .z-colapsable[data-abierto] { max-height: none; } .z-colapsable:not([data-abierto])::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, var(--bg-superficie)); pointer-events: none; } /* Sin JS el contenido se ve completo: nunca escondemos contenido de forma permanente. */ .no-js .z-colapsable { max-height: none; } .no-js .z-colapsable::after { display: none; } .no-js [data-ver-mas] { display: none; } /* ---------- Spinner ---------- */ @keyframes z-girar { to { transform: rotate(360deg); } } .z-spinner { width: 48px; height: 48px; border: 3px solid var(--sand); border-top-color: var(--acento); border-radius: 50%; animation: z-girar 1s linear infinite; } /* ---------- Consejo ---------- */ .z-consejo { background: var(--bg-hueco); border-radius: var(--r); padding: 16px 18px; font-size: 14px; color: var(--texto-suave); } .z-consejo strong { color: var(--texto); } /* Presentación / landing del programa. */ .z-landing { --marca: #4D596B; } /* Hero */ .z-landing__hero { position: relative; text-align: center; color: #fff; background: radial-gradient(130% 130% at 50% -20%, color-mix(in srgb, var(--marca) 55%, #fff), transparent 55%), linear-gradient(165deg, var(--marca), color-mix(in srgb, var(--marca) 60%, #000)); border-radius: var(--r); padding: 42px 24px 36px; overflow: hidden; } .z-landing__hero-media { margin: -42px -24px 26px; max-height: 260px; overflow: hidden; } .z-landing__hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .z-landing__logo { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 24px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; } .z-landing__logo img { width: 58%; height: 58%; object-fit: contain; } .z-landing__hero .z-kicker { color: rgba(255,255,255,.72); } .z-landing__hero h1 { color: #fff; margin: 4px 0 0; font-size: clamp(28px, 6vw, 42px); } .z-landing__sub { color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.5; margin: 12px auto 0; max-width: 560px; } .z-landing__intro { color: rgba(255,255,255,.85); margin: 16px auto 0; max-width: 600px; } /* En el hero (fondo oscuro) las negritas deben ser claras, no del color de texto normal. */ .z-landing__hero .z-prosa strong, .z-landing__hero .z-prosa b { color: #fff; } .z-landing__hero .z-btn { max-width: 420px; margin: 24px auto 0; } /* Secciones */ .z-landing__sec { margin-top: 16px; background: var(--bg-superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 24px 22px; } .z-landing__sec h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 24px; } .z-landing__sec h2::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--marca); flex-shrink: 0; } /* "Para quién es": viñetas con palomita */ .z-landing__check ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .z-landing__check li { position: relative; padding-left: 32px; } .z-landing__check li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--marca) 15%, transparent); color: var(--marca); display: grid; place-items: center; font-size: 12px; font-weight: 700; } /* "Qué incluye": tiles con el número destacado */ .z-landing__incluye ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; } .z-landing__incluye li { background: var(--bg-hueco); border-radius: var(--r-chico); padding: 14px 16px; font-size: 14px; color: var(--texto-suave); } .z-landing__incluye li strong { display: block; font-size: 20px; color: var(--marca); margin-bottom: 2px; font-weight: 600; } /* "Cómo funciona": pasos numerados */ .z-landing__pasos ol { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 14px; } .z-landing__pasos li { counter-increment: paso; position: relative; padding-left: 48px; min-height: 34px; padding-top: 4px; } .z-landing__pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; } /* FAQ: cada pregunta separada */ .z-landing__faq .z-prosa p { padding: 14px 0; border-top: 1px solid var(--linea); margin: 0; } .z-landing__faq .z-prosa p:first-child { border-top: 0; padding-top: 0; } .z-landing__faq .z-prosa strong { color: var(--texto); } /* Referencias / fuentes al final del contenido (receta, comida o artículo). */ .z-referencias { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); } .z-referencias__titulo { font-family: 'Julius Sans One', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 8px; } .z-referencias__cuerpo { font-size: 13px; line-height: 1.6; color: var(--texto-tenue); word-break: break-word; } .z-referencias__cuerpo a { color: var(--acento); } /* Consejo de la Dra. Jackie: sobre el color del programa al que pertenece la receta. */ .z-consejo--marca { background: var(--marca, var(--slate)); color: var(--ivory); display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-grande); } /* El avatar "DJ" se ve apretado en móvil; solo aparece en escritorio (ver MEJORA-17). */ .z-consejo--marca .z-consejo__avatar { display: none; } .z-consejo--marca .z-kicker { color: rgba(246, 244, 240, .75); } .z-consejo--marca p { margin: 6px 0 0; color: var(--ivory); } @media (min-width: 900px) { .z-consejo--marca .z-consejo__avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(246, 244, 240, .18); border: 1px solid rgba(246, 244, 240, .35); display: flex; align-items: center; justify-content: center; font-family: var(--f-titulo); font-weight: 600; font-size: 14px; flex-shrink: 0; } } /* Ingredientes / preparación: apilados con aire en móvil, dos columnas en escritorio. */ .z-dos-col { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } /* ---------- Metadatos de una receta (porciones · tiempo) ---------- */ .z-metadatos { display: flex; gap: 28px; margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); } .z-metadatos > div { display: flex; flex-direction: column; gap: 3px; } .z-metadatos strong { font-size: 15px; font-weight: 500; } /* ---------- Pasos numerados de la preparación ---------- */ .z-pasos ol { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: z-paso; } .z-pasos li { counter-increment: z-paso; display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; } .z-pasos li::before { content: counter(z-paso); width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; margin-top: 1px; } /* Algunas recetas traen la preparación como