/* ZelvIA — capa global (C1): grano de papel, juego de iconos, botones y volver arriba.
* Se carga en todas las páginas justo después de los tokens. Solo tokens de DESIGN.md. */
/* ── Grano de papel ──────────────────────────────────────────────────────────
* Capa fija bajo el contenido: las superficies con fondo propio (bandas, tarjetas) la tapan;
* el papel de la página la muestra. Las páginas que ya llevan grano en el body no la duplican. */
html::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--zv-grain);
}
html:has(body.zv-comparador)::before,
html:has(body.zv-dix-page)::before { display: none; }
/* ── Juego de iconos (cuadrícula 24, trazo 2,5, extremos y uniones redondeados) ──────────────
* Uso: . Hereda el color del texto. */
.zv-icon {
display: inline-block;
flex: none;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: var(--zv-icon) center / contain no-repeat;
mask: var(--zv-icon) center / contain no-repeat;
transition: transform 200ms var(--zv-motion-enter-easing, ease);
}
.zv-icon--arrow { --zv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.zv-icon--back { width: 16px; height: 16px; vertical-align: -3px; transform: scaleX(-1); }
.zv-icon--up { --zv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.zv-icon--compare { --zv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h13M13.5 3.5l4 4-4 4M20 16.5H7M10.5 12.5l-4 4 4 4'/%3E%3C/svg%3E"); }
.zv-icon--external { --zv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.zv-icon--evidence { --zv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m7.6 10.6 2.2 2.2 3.9-4.3M15.4 15.4 21 21'/%3E%3C/svg%3E"); }
/* ── Botones ─────────────────────────────────────────────────────────────────
* Principal 52 px (navy con relieve) y secundario 48 px (papel en alto). La flecha avanza 4 px al
* pasar; pulsado se hunde 1 px. Las superficies que ya tienen su botón comparten estos estados. */
.zv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: var(--zv-radius-btn);
font: 600 16px/1.2 var(--zv-font-ui);
text-decoration: none;
cursor: pointer;
transition: transform 120ms, box-shadow 160ms;
}
.zv-btn.zv-btn--primary {
min-height: var(--zv-height-lg, 52px);
padding: 0 var(--zv-space-6);
border: 0;
background: linear-gradient(var(--zv-color-navy-btn), var(--zv-color-navy));
color: var(--zv-color-on-navy);
box-shadow: var(--zv-shadow-navy);
}
.zv-btn.zv-btn--secondary {
min-height: var(--zv-height-md, 48px);
padding: 0 var(--zv-space-6);
border: 1px solid var(--zv-color-line-strong);
background: var(--zv-color-surface);
color: var(--zv-color-ink);
box-shadow: var(--zv-shadow-e1);
}
.zv-btn.zv-btn--secondary .zv-icon { color: var(--zv-color-teal-text); }
.zv-btn.zv-btn--secondary:active { box-shadow: var(--zv-shadow-e0); }
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn) svg,
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn) .zv-icon { transition: transform 200ms var(--zv-motion-enter-easing, ease); }
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn):hover svg,
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn):hover .zv-icon--arrow { transform: translateX(4px); }
:is(.zv-btn--primary, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn):active { transform: translateY(1px); }
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn):focus-visible { outline: 2px solid var(--zv-color-teal-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.zv-icon, .zv-btn, .zv-btn svg { transition-duration: 0ms !important; }
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn):hover svg,
:is(.zv-btn, .zv-ficha-btn, .zv-dec-cta, .zv-como-btn, .zv-cat-btn):hover .zv-icon { transform: none; }
}
/* ── Casilla de logo única (Home, Catálogo, Comparar, fichas, decisiones y chat) ─────────────────
* Fondo #FFFFFF, borde fino, sombra e2 (con filo de luz arriba) y logo al 70 % del área útil de la casilla (≈ 66-68 % de su tamaño), sin
* ningún efecto que altere el color del logo. Tamaños: ≥ 40 px en listas, ≥ 56 px en tarjetas; las marcas en línea dentro de
* un texto (≤ 32 px) conservan su tamaño y llevan sombra e1. Casos por logo (assets/logos/kinds.json):
* data-logo-kind="bleed" → cuadrado de color: a sangre completa, con el radio de la casilla.
* data-logo-kind="white" → logo solo blanco: casilla navy. */
:is(.cat-row-logo, .tool-row-logo, .zv-home-flogo, .zv-home-slogo, .zv-cat-clg, .zv-cat-dlogo, .zv-cmp-slot__logo,
.zv-cmp-popt__logo, .zv-cmp-verdict__logo, .zv-cmp-head__logo, .zv-cmp-suggest__logo, .zv-ficha-logo,
.zv-dec-logo:not(.zv-dec-logo--pair), .zv-dec-logo__img, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo,
.chat-tool-link__logo, .zv-social__logo) {
display: grid; flex: none; place-items: center; box-sizing: border-box; overflow: hidden;
background: #FFFFFF; border: 1px solid var(--zv-color-line); box-shadow: var(--zv-shadow-e2);
}
:is(.zv-cat-dlogo, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo) { box-shadow: var(--zv-shadow-e1); }
:is(.cat-row-logo, .tool-row-logo, .zv-home-flogo, .zv-home-slogo, .zv-cat-clg, .zv-cat-dlogo, .zv-cmp-slot__logo,
.zv-cmp-popt__logo, .zv-cmp-verdict__logo, .zv-cmp-head__logo, .zv-cmp-suggest__logo, .zv-ficha-logo,
.zv-dec-logo:not(.zv-dec-logo--pair), .zv-dec-logo__img, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo,
.chat-tool-link__logo, .zv-social__logo) > img {
display: block; width: 70%; height: 70%; padding: 0; object-fit: contain;
}
:is(.cat-row-logo, .tool-row-logo, .zv-home-flogo, .zv-home-slogo, .zv-cat-clg, .zv-cat-dlogo, .zv-cmp-slot__logo,
.zv-cmp-popt__logo, .zv-cmp-verdict__logo, .zv-cmp-head__logo, .zv-cmp-suggest__logo, .zv-ficha-logo,
.zv-dec-logo:not(.zv-dec-logo--pair), .zv-dec-logo__img, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo,
.chat-tool-link__logo, .zv-social__logo):has(> img[data-logo-kind="bleed"]) { border-width: 0; }
:is(.cat-row-logo, .tool-row-logo, .zv-home-flogo, .zv-home-slogo, .zv-cat-clg, .zv-cat-dlogo, .zv-cmp-slot__logo,
.zv-cmp-popt__logo, .zv-cmp-verdict__logo, .zv-cmp-head__logo, .zv-cmp-suggest__logo, .zv-ficha-logo,
.zv-dec-logo:not(.zv-dec-logo--pair), .zv-dec-logo__img, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo,
.chat-tool-link__logo, .zv-social__logo) > img[data-logo-kind="bleed"] { width: 100%; height: 100%; object-fit: cover; }
:is(.cat-row-logo, .tool-row-logo, .zv-home-flogo, .zv-home-slogo, .zv-cat-clg, .zv-cat-dlogo, .zv-cmp-slot__logo,
.zv-cmp-popt__logo, .zv-cmp-verdict__logo, .zv-cmp-head__logo, .zv-cmp-suggest__logo, .zv-ficha-logo,
.zv-dec-logo:not(.zv-dec-logo--pair), .zv-dec-logo__img, .zv-dec-fchip__logo, .zv-ficha-fchip__logo, .zv-dec-orow__logo, .zv-dix-logo,
.chat-tool-link__logo, .zv-social__logo):has(> img[data-logo-kind="white"]) { background: var(--zv-color-navy); border-color: var(--zv-color-navy); }
/* Logos que son un ![]()
suelto con su propia casilla (filas del comparador, ganadora en la respuesta) */
.zv-cmp-row__who img, .zv-cmp-answer__winner img { box-sizing: content-box; background: #FFFFFF; border: 1px solid var(--zv-color-line); box-shadow: var(--zv-shadow-e1); }
.zv-cmp-row__who img[data-logo-kind="white"], .zv-cmp-answer__winner img[data-logo-kind="white"] { background: var(--zv-color-navy); border-color: var(--zv-color-navy); }
/* ── Prompt de arranque (punto I, v2): bloque de la Decisión y línea de la Home ───────────────────── */
.zv-startprompt { padding: var(--zv-space-6); border-radius: var(--zv-radius-panel); background: var(--zv-color-navy); color: #F2F5FA; }
.zv-startprompt__title { margin: 0 0 var(--zv-space-1, 4px); font-family: var(--zv-font-display); font-size: 17px; font-weight: var(--zv-font-weight-semibold); }
.zv-startprompt__label { margin: 0 0 var(--zv-space-4); color: #9AA8BA; font-size: 13px; }
.zv-startprompt__text { margin: 0; color: #F2F5FA; font-family: var(--zv-font-ui); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.zv-startprompt__text b { color: var(--zv-color-teal-glow); font-weight: var(--zv-font-weight-semibold); }
.zv-startprompt__hint { margin: var(--zv-space-3) 0 var(--zv-space-4); color: #9AA8BA; font-size: 13px; line-height: 1.5; }
.zv-startprompt__copy { margin-top: var(--zv-space-4); display: inline-flex; align-items: center; gap: var(--zv-space-2); min-height: var(--zv-height-sm, 40px); padding: 0 var(--zv-space-4); border: 0; border-radius: var(--zv-radius-row); background: var(--zv-color-teal-graphic); color: var(--zv-color-navy); font: inherit; font-size: 14px; font-weight: var(--zv-font-weight-semibold); cursor: pointer; }
.zv-startprompt__copy:focus-visible { outline: 2px solid var(--zv-color-teal-glow); outline-offset: 3px; }
.zv-dec-step--prompt { margin: 0 0 var(--zv-space-6); }
.zv-dec-step--prompt .zv-dec-dot { top: 4px; width: 12px; height: 12px; left: -30px; border: 2px solid var(--zv-color-teal-graphic); background: var(--zv-color-surface); }
/* Línea de la Home: «Y te damos el prompt para empezar». Plegable; al abrirla muestra el prompt_inicio de la
Decisión de ejemplo con «Copiar». */
.zv-home-prompt { margin: var(--zv-space-6) 0 0; border: 1px solid var(--zv-color-line-strong); border-radius: var(--zv-radius-field); background: var(--zv-color-surface); box-shadow: var(--zv-shadow-e1); }
.zv-home-prompt__summary { display: flex; align-items: center; gap: var(--zv-space-3); min-height: 52px; padding: 0 var(--zv-space-4); color: var(--zv-color-teal-text); font-size: 15px; font-weight: var(--zv-font-weight-semibold); cursor: pointer; list-style: none; }
.zv-home-prompt__summary::-webkit-details-marker { display: none; }
.zv-home-prompt__summary:focus-visible { outline: 2px solid var(--zv-color-teal-text); outline-offset: 3px; border-radius: var(--zv-radius-field); }
.zv-home-prompt__summary svg { flex: none; }
.zv-home-prompt__summary span { flex: 1; }
.zv-home-prompt__chev { transition: transform 160ms ease; }
.zv-home-prompt[open] .zv-home-prompt__chev { transform: rotate(180deg); }
.zv-home-prompt__body { margin: 0; padding: 0 var(--zv-space-4) var(--zv-space-4); }
.zv-home-prompt__label { margin: 0 0 var(--zv-space-3); color: var(--zv-color-muted); font-size: 13px; line-height: 1.5; }
.zv-home-prompt__text { margin: 0 0 var(--zv-space-4); padding: var(--zv-space-4); border-radius: var(--zv-radius-row); background: var(--zv-color-navy); color: #F2F5FA; font-family: var(--zv-font-ui); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.zv-home-prompt__text b { color: var(--zv-color-teal-glow); font-weight: var(--zv-font-weight-semibold); }
/* ── Escalas (Home y Decisiones): tarjetas compactas, indicadores sin animación ───────────────────
Precio y Facilidad con barra de cinco tramos (activo en teal); «Tus datos» solo con una herramienta. */
.zv-scales { margin: 0; }
.zv-scales__title { margin: 0; color: var(--zv-color-ink); font-size: 15px; font-weight: var(--zv-font-weight-semibold); line-height: 1.3; }
.zv-scales__sub { margin: 2px 0 var(--zv-space-3); color: var(--zv-color-muted); font-size: 12.5px; line-height: 1.3; }
.zv-scales__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--zv-space-3); }
.zv-scales__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zv-scales__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zv-scales__list[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.zv-scard { display: flex; flex-direction: column; gap: var(--zv-space-3); padding: var(--zv-space-4); border: 1px solid var(--zv-color-line); border-radius: var(--zv-radius-field); background: var(--zv-color-surface); box-shadow: var(--zv-shadow-e1); cursor: default; user-select: none; -webkit-user-select: none; }
.zv-scard__top { display: flex; align-items: center; gap: var(--zv-space-3); }
.zv-scard__ico { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--zv-color-teal-soft, #DDF3EF); color: var(--zv-color-teal-text); }
.zv-scard__label { margin: 0; color: var(--zv-color-muted); font-size: 12px; font-weight: var(--zv-font-weight-medium); line-height: 1.2; }
.zv-scard__read { margin: 2px 0 0; color: var(--zv-color-ink); font-size: 16px; font-weight: var(--zv-font-weight-bold); line-height: 1.25; }
.zv-scard__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; }
.zv-scard__bar i { height: 6px; border-radius: 3px; background: var(--zv-color-line-strong); }
.zv-scard__bar i.is-on { background: var(--zv-color-teal-graphic); }
.zv-scard__ends { display: flex; justify-content: space-between; gap: var(--zv-space-3); margin-top: -6px; color: var(--zv-color-muted); font-size: 12px; line-height: 1.3; }
.zv-scard__chip { align-self: flex-start; margin: 0; padding: 2px 8px; border-radius: var(--zv-radius-pill); background: var(--zv-color-bg-panel); color: var(--zv-color-teal-text); font-size: 12px; font-weight: var(--zv-font-weight-semibold); }
.zv-scales--compact .zv-scales__list, .zv-scales--compact .zv-scales__list[data-count] { grid-template-columns: 1fr; gap: var(--zv-space-3); } /* columna estrecha de la Home: tarjetas apiladas */
@media (max-width: 640px) {
.zv-scales__list, .zv-scales__list[data-count="2"], .zv-scales__list[data-count="3"] { grid-template-columns: 1fr; }
}