/* * Vinalium — Recomendador de Vinos * Esqueleto de layout. Namespaced bajo "vinrec" — no usar estas clases fuera * de este componente. Colores/tipografía aproximan el mock; pendiente pasar * fino (hover, iconos reales, sombras) en una siguiente pasada. * * Todos los selectores van prefijados con #vinrec-app (especificidad 1,0,0+) * a propósito: el reset de Hello Elementor trae * `[type="button"], [type="submit"], button { ... }` (especificidad 0,1,0), * misma especificidad que una clase sola — y como carga después del CSS de * este plugin, gana el empate y pisa display/border en los botones. Prefijar * con el ID del contenedor evita pelear ese empate en cada selector nuevo. * * === PARA EDITAR EL ESTILO SIN BUSCAR EN TODO EL ARCHIVO === * Los valores de color, radio de borde y espaciado más comunes están * centralizados acá abajo. Cambiá un valor en esta lista y se actualiza en * todo el componente — no hace falta tocar nada más abajo de esta sección. */ #vinrec-app { --vinrec-color-accent: #b20000; /* rojo principal: botones, selección, chevron */ --vinrec-color-accent-hover: #B71C1C; /* rojo al pasar el mouse */ --vinrec-color-text: #1A1A1A; /* texto oscuro (títulos) */ --vinrec-color-text-muted: #707070; /* texto gris (descripciones de perfil) */ --vinrec-color-text-faint: #888; /* texto gris claro (eyebrow, mensajes) */ --vinrec-color-bg-panel: #fff; /* fondo blanco del modal y de las columnas */ --vinrec-color-bg-columns: #F6F6F6; /* gris claro: caja de Perfil + hover de Tipo/Maridaje */ --vinrec-color-border: #E5E5E5; /* líneas divisorias (sin uso hoy entre columnas) */ --vinrec-radius-panel: 20px; /* esquinas del modal completo */ --vinrec-radius-columns: 16px; /* esquinas del fondo gris de columnas */ --vinrec-radius-card: 12px; /* esquinas de cada opción/tarjeta */ --vinrec-gap-columns: 1.5rem; /* espacio entre las 3 columnas */ --vinrec-panel-max-width: 90vw; /* ancho del modal en desktop */ } /* Poppins se hereda de (ver style.css del child theme) — no hace falta repetirlo acá. */ #vinrec-app, #vinrec-app * { box-sizing: border-box; } #vinrec-app .vinrec-trigger { display: inline-flex; align-items: center; gap: 0.5em; background: var(--vinrec-color-accent); color: #fff; border: none; border-radius: 999px; padding: 0.85em 1.6em; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } #vinrec-app .vinrec-trigger:hover { background: var(--vinrec-color-accent-hover); } /* === Overlay / modal === */ #vinrec-app .vinrec-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(26, 26, 26, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 0 1.5rem 1.5rem; } #vinrec-app .vinrec-overlay[hidden] { display: none; } body.vinrec-no-scroll { overflow: hidden; } #vinrec-app .vinrec-panel { position: relative; background: var(--vinrec-color-bg-panel); border-radius: var(--vinrec-radius-panel); width: 100%; max-width: var(--vinrec-panel-max-width); max-height: 90vh; padding: 2.5rem 2.5rem 0; display: flex; flex-direction: column; } #vinrec-app .vinrec-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--vinrec-color-text); cursor: pointer; } #vinrec-app .vinrec-close:hover { background: #F1F1F1; } /* === Mobile step nav (oculto en desktop) === */ #vinrec-app .vinrec-mobile-nav { display: none; align-items: center; justify-content: space-around; margin-bottom: 1rem; } #vinrec-app .vinrec-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vinrec-color-border); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--vinrec-color-text); cursor: pointer; } #vinrec-app .vinrec-nav:disabled { opacity: 0.3; cursor: default; } #vinrec-app .vinrec-nav--prev::before, #vinrec-app .vinrec-nav--next::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.9rem; } #vinrec-app .vinrec-nav--prev::before { content: '\f053'; } #vinrec-app .vinrec-nav--next::before { content: '\f054'; } #vinrec-app .vinrec-steps { display: flex; gap: 0.4rem; } #vinrec-app .vinrec-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vinrec-color-border); } #vinrec-app .vinrec-step-dot.is-active { background: var(--vinrec-color-accent); } /* === Columnas === */ #vinrec-app .vinrec-columns { display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: var(--vinrec-gap-columns); background: var(--vinrec-color-bg-panel); border-radius: var(--vinrec-radius-columns); padding: 1.30rem 1.25rem; flex: 1 1 auto; min-height: 0; /* sin esto, un hijo flex no se achica para que el scroll funcione */ overflow-y: auto; } #vinrec-app .vinrec-col { min-width: 0; } #vinrec-app .vinrec-col--tipo { /* border-right: 1px solid var(--vinrec-color-border); */ padding-right: 0.5em; } #vinrec-app .vinrec-col--maridaje { /* border-left: 1px solid var(--vinrec-color-border); */ padding-left: 0.5rem; } /* Perfil tiene su propia caja gris — Tipo y Maridaje quedan directo sobre el blanco de .vinrec-columns, por eso necesitan el fix de hover más abajo. */ #vinrec-app .vinrec-col--perfil { padding: 20px; background-color: var(--vinrec-color-bg-columns); border-radius: 10px; } #vinrec-app .vinrec-eyebrow { margin: 0 0 0.25rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vinrec-color-text-faint); font-weight: 600; } #vinrec-app .vinrec-col-title { margin: 0 0 1.1rem; font-size: 1.25rem; font-weight: 700; color: var(--vinrec-color-text); } #vinrec-app .vinrec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; } #vinrec-app .vinrec-list--tipo { gap: 1rem; } #vinrec-app .vinrec-list > li { min-width: 0; } #vinrec-app .vinrec-list > li[hidden] { display: none; } /* === Opciones (botones) compartidas === */ #vinrec-app .vinrec-option { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.35rem; width: 100%; min-width: 0; max-width: 100%; cursor: pointer; border-radius: var(--vinrec-radius-card); padding: 0.65rem 0.75rem; transition: background 0.15s ease, box-shadow 0.15s ease; } #vinrec-app .vinrec-option:hover { background: rgba(255, 255, 255, 0.6); } /* Tipo y Maridaje quedan sobre el fondo blanco de .vinrec-columns — el hover translúcido de arriba es invisible ahí, necesitan un gris explícito. */ #vinrec-app .vinrec-col--tipo .vinrec-option:hover, #vinrec-app .vinrec-col--maridaje .vinrec-option:hover { background: var(--vinrec-color-bg-columns); } #vinrec-app .vinrec-option.is-selected { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } #vinrec-app .vinrec-option[hidden] { display: none; } #vinrec-app .vinrec-option-label, #vinrec-app .vinrec-option-title { font-size: 1em; color: var(--vinrec-color-text); min-width: 0; } #vinrec-app .vinrec-option-label { font-weight: 400; } #vinrec-app .vinrec-option-title { font-weight: 600; } #vinrec-app .vinrec-option-arrow { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vinrec-color-accent); color: #fff; margin-left: auto; flex-shrink: 0; } #vinrec-app .vinrec-option-arrow::before { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.9em; } #vinrec-app .vinrec-option.is-selected .vinrec-option-arrow { display: inline-flex; } /* === Tipo === */ #vinrec-app .vinrec-option--tipo .vinrec-icon { width: 50px; height: 50px; flex-shrink: 0; } /* === Perfil (grid de tarjetas) === */ #vinrec-app .vinrec-grid--perfil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.25rem; min-width: 0; } #vinrec-app .vinrec-option--perfil { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 0.5rem; padding: 0.75rem; min-width: 0; flex-wrap: wrap; } #vinrec-app .vinrec-option--perfil .vinrec-icon { width: 26px; height: 26px; } #vinrec-app .vinrec-option-title { color: var(--vinrec-color-accent); } #vinrec-app .vinrec-option-desc { display: block; font-size: 1em; font-weight: 400; color: var(--vinrec-color-text-muted); line-height: 1.25; min-width: 0; overflow-wrap: break-word; } /* === Maridaje === */ #vinrec-app .vinrec-option--maridaje .vinrec-icon { width: 24px; height: 24px; flex-shrink: 0; } /* === Estados disabled / empty (perfil y maridaje dependen del paso anterior) === */ #vinrec-app .vinrec-col--perfil.is-disabled .vinrec-grid--perfil, #vinrec-app .vinrec-col--maridaje.is-disabled .vinrec-list--maridaje { opacity: 0.35; pointer-events: none; } /* Término individual no disponible para la combinación actual — a diferencia de .is-disabled (columna completa, antes de elegir Tipo), esto nunca oculta el elemento, solo lo atenúa y lo saca de la interacción. Aplica tanto a botones de Perfil como a los

de Maridaje. */ #vinrec-app .vinrec-option.is-unavailable, #vinrec-app .vinrec-option--maridaje.is-unavailable { opacity: 0.35; pointer-events: none; } #vinrec-app .vinrec-empty-message { display: none; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--vinrec-color-text-faint); font-style: italic; } #vinrec-app .vinrec-col.is-empty .vinrec-empty-message { display: block; } #vinrec-app .vinrec-col.is-empty .vinrec-grid--perfil, #vinrec-app .vinrec-col.is-empty .vinrec-list--maridaje { display: none; } /* === Ícono placeholder (hasta soltar los SVG/PNG reales en assets/icons/) === */ #vinrec-app .vinrec-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #vinrec-app .vinrec-icon--missing { border: 1px dashed #C9C9C9; border-radius: 6px; background: rgba(0, 0, 0, 0.03); } /* Imágenes raster (copas de tipo de vino, etc.) — object-fit:contain para que no se deformen si no son perfectamente cuadradas, igual que el slot del SVG. */ #vinrec-app .vinrec-icon img { width: 100%; height: 100%; object-fit: contain; } #vinrec-app .vinrec-icon svg { width: 100%; height: 100%; } /* === Footer === */ #vinrec-app .vinrec-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; margin-top: 0.5rem; flex-shrink: 0; border-top: 1px solid var(--vinrec-color-border); } #vinrec-app .vinrec-footer-text { margin: 0; font-size: 0.9rem; color: #555; } #vinrec-app .vinrec-apply { flex-shrink: 0; background: var(--vinrec-color-accent); color: #fff; border: none; border-radius: 10px; padding: 0.85em 2.2em; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } #vinrec-app .vinrec-apply:hover:not(:disabled) { background: var(--vinrec-color-accent-hover); } #vinrec-app .vinrec-apply:disabled { background: var(--vinrec-color-border); color: #999; cursor: not-allowed; } /* === Mobile: wizard de 3 pasos === */ @media (max-width: 768px) { #vinrec-app .vinrec-overlay { align-items: center; } #vinrec-app .vinrec-panel { padding: 2rem 1.25rem 0; border-radius: 14px; } #vinrec-app .vinrec-mobile-nav { display: flex; } #vinrec-app .vinrec-columns { grid-template-columns: minmax(0, 1fr); padding: 0.5rem 0.5rem 0; } #vinrec-app .vinrec-col { display: none; } #vinrec-app .vinrec-col.is-active-step { display: block; } #vinrec-app .vinrec-col--tipo, #vinrec-app .vinrec-col--maridaje { border: none; padding: 0; } #vinrec-app .vinrec-grid--perfil { grid-template-columns: minmax(0, 1fr); } #vinrec-app .vinrec-footer { flex-direction: column; align-items: stretch; text-align: center; } #vinrec-app .vinrec-apply { width: 100%; } }