/* Portal Vifer v3 · MI NEGOCIO EJECUTIVO: claro, con aire, cifras grandes, una pregunta por tarjeta. */
:root { --ej-ok: var(--success); --ej-okbg: #e6f6ee; --ej-warnbg: #fdf1e3; --ej-r: 22px; } /* en todo el portal, no solo en Mi negocio */
.ej { display: grid; gap: 18px; }

/* Cabecera y apartados */
.ej-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ej-eyebrow { margin: 0; color: var(--cyan-deep); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ej-title { margin: 2px 0 0; font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ej-seal { padding: 6px 12px; border-radius: 999px; background: var(--ej-warnbg); color: var(--warning); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ej-tabs { position: sticky; top: var(--top-h); z-index: 20; display: flex; gap: 6px; margin: 0 -4px; padding: 8px 4px; overflow-x: auto; background: linear-gradient(var(--bg) 70%, transparent); scrollbar-width: none; }
.ej-tab { flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; color: var(--fg-muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.ej-tab:hover { color: var(--fg); background: var(--surface-1); }
.ej-tab.is-on { background: var(--fg); color: var(--surface-1); box-shadow: var(--card-shadow); }
.ej-tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ej-page { display: grid; gap: 20px; }

/* La respuesta a "¿como voy?" */
.ej-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; padding: 32px 34px; border-radius: 28px; background: var(--surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--card-shadow); }
.ej-hero__hi { margin: 0; color: var(--fg-muted); font-size: 16px; }
.ej-hero__h { margin: 6px 0 12px; font-size: clamp(34px, 4vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.ej-hero__h em { font-style: normal; background: linear-gradient(90deg, #00a9b8, #7c6cf2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ej-hero__p { margin: 0 0 18px; color: var(--fg-muted); font-size: 18px; line-height: 1.55; max-width: 34em; }
.ej-hero__chart { display: grid; gap: 6px; }
.ej-hero__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: var(--fg-muted); font-size: 14px; }
.ej-hero__k b { color: var(--fg); font-size: 26px; font-weight: 600; }
.ej-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ej-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.ej-chip.is-ok { background: var(--ej-okbg); color: var(--success); } .ej-chip.is-warn { background: var(--ej-warnbg); color: var(--warning); }
.ej-chip .ej-ic { width: 16px; height: 16px; }
.ej-legend { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg-muted); font-size: 13px; }
.ej-lg { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-left: 10px; } .ej-lg--now { background: #00a9b8; } .ej-lg--ly { background: var(--ghost); }

/* Cuatro cifras del oficio */
.ej-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ej-tile { display: grid; gap: 6px; padding: 20px 20px 12px; border: 1px solid var(--border-subtle); border-radius: var(--ej-r); background: var(--surface-1); box-shadow: var(--card-shadow); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: transform 250ms var(--ease-out), box-shadow 250ms; }
.ej-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ej-tile:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.ej-tile__h { display: flex; align-items: center; gap: 10px; }
.ej-tile__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--cyan-deep); }
.ej-tile__l { color: var(--fg-muted); font-size: 15px; }
.ej-tile__v { margin-top: 4px; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ej-tile__d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-dim); font-size: 13px; }
.ej-tile__how { color: var(--cyan-deep); font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity 200ms, transform 200ms; }
.ej-tile:hover .ej-tile__how, .ej-tile:focus-visible .ej-tile__how { opacity: 1; transform: none; }
.ej-tile .ej-ar { margin: 2px -8px 0; width: calc(100% + 16px); }
.ej-pill { padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ej-pill.is-up { background: var(--ej-okbg); color: var(--success); } .ej-pill.is-down { background: var(--ej-warnbg); color: var(--warning); }

/* Tarjetas: pregunta, respuesta, una grafica, "ver el detalle" */
.ej-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ej-card { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 26px 28px; border-radius: var(--ej-r); background: var(--surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--card-shadow); }
.ej-span12 { grid-column: span 12; } .ej-span7 { grid-column: span 7; } .ej-span6 { grid-column: span 6; } .ej-span5 { grid-column: span 5; }
.ej-card__q { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.ej-card__a { margin: 2px 0 18px; color: var(--fg-muted); font-size: 16px; }
.ej-more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 16px; padding: 8px 14px; border: 1px solid var(--border-mid); border-radius: 999px; background: var(--surface-1); color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.ej-more:hover { border-color: var(--cyan); transform: translateX(2px); } .ej-more:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ej-more .ej-ic { width: 16px; height: 16px; }
.ej-card--win { background: linear-gradient(160deg, var(--ej-winbg), var(--surface-1) 60%); }
.ej-money { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; }
.ej-best { grid-column: 1 / -1; margin: 6px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--ej-okbg); font-size: 15px; } .ej-best b { color: var(--success); }
.ej-legend2 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ej-legend2 li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 52px; gap: 10px; align-items: center; font-size: 15px; }
.ej-legend2 b { font-weight: 600; text-align: right; } .ej-legend2 small { color: var(--fg-dim); text-align: right; }
.ej-legend2 li.is-keep { color: var(--success); font-weight: 600; }
.ej-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.ej-wins { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ej-win { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--surface-2); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: transform 200ms var(--ease-out), background 200ms; }
.ej-win:hover { transform: translateX(4px); background: var(--surface-3); } .ej-win:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ej-win__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ej-okbg); color: var(--success); font-weight: 700; }
.ej-win__t b { display: block; font-size: 15.5px; font-weight: 600; } .ej-win__t small { color: var(--cyan-deep); font-size: 13.5px; font-weight: 500; }
.ej-win__v { color: var(--success); font-size: 21px; font-weight: 700; white-space: nowrap; }
.ej-rows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ej-rows li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 15px; }
.ej-rows--wide li { grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto 120px; } .ej-rows small { color: var(--fg-dim); text-align: right; }
.ej-rows b { text-align: right; font-weight: 600; }
.ej-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.ej-tag.is-dog { background: var(--ej-badbg); color: var(--danger); } .ej-tag.is-puzzle { background: var(--ej-warnbg); color: var(--warning); }
.ej-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
.ej-ring { display: grid; justify-items: center; }
.ej-ring__svg { width: 104px; height: 104px; } .ej-ring__bg { fill: none; stroke: var(--surface-3); stroke-width: 8; } .ej-ring__v { fill: none; stroke-width: 8; stroke-linecap: round; }
.ej-ring__n { margin-top: -68px; margin-bottom: 34px; font-size: 22px; font-weight: 600; }
.ej-ring__l { color: var(--fg-muted); font-size: 14px; }
.ej-where { display: grid; gap: 18px; }
.ej-stack { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.ej-stack__s { flex: var(--w) 0 0; background: var(--c); border-right: 2px solid var(--surface-1); }
.ej-note { margin: 0; color: var(--fg-dim); font-size: 13.5px; }
.ej-big { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; } .ej-big b { font-size: 34px; font-weight: 600; color: var(--success); } .ej-big span { color: var(--fg-muted); }
.ej-cols { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 8px; }
.ej-cols__c { display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 1 1 0; min-width: 0; height: 100%; gap: 6px; }
.ej-cols__t { display: flex; align-items: flex-end; height: 100%; }
.ej-cols__b { display: block; width: 100%; height: calc(var(--p) * 100%); min-height: 3px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--c) 45%, var(--surface-1)); transform-origin: bottom; }
.ej-cols__b.is-top { background: var(--c); }
.ej-cols__l { overflow: hidden; color: var(--fg-dim); font-size: 12px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.ej-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ej-detail { gap: 16px; }

/* Graficas */
.ej-ar { display: block; width: 100%; height: auto; overflow: visible; }
.ej-ar__line { fill: none; stroke-width: 3; stroke-linecap: round; }
.ej-ar__ghost { fill: none; stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 5 6; }
.ej-ar__ax { fill: var(--fg-dim); font-size: 12px; }
.ej-ar__dot { stroke: var(--surface-1); stroke-width: 3; }
.ej-dn { width: 200px; height: 200px; }
.ej-dn__bg { fill: none; stroke: var(--surface-3); stroke-width: 22; }
.ej-dn__a { fill: none; stroke-width: 22; }
.ej-dn__c { fill: var(--fg); font-size: 19px; font-weight: 600; } .ej-dn__s { fill: var(--fg-dim); font-size: 12px; }
.ej-bar { display: block; height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ej-bar__v { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, var(--surface-1))); transform: scaleX(var(--p)); transform-origin: left; }

/* Movimiento que explica: entra por orden, las lineas se dibujan, las barras y columnas crecen */
@media (prefers-reduced-motion: no-preference) {
  .ej-hero, .ej-tile, .ej-card { animation: ej-rise 650ms var(--ease-out) both; }
  .ej-tile:nth-child(2), .ej-card:nth-child(2) { animation-delay: 70ms; } .ej-tile:nth-child(3), .ej-card:nth-child(3) { animation-delay: 140ms; } .ej-tile:nth-child(4), .ej-card:nth-child(4) { animation-delay: 210ms; } .ej-card:nth-child(n + 5) { animation-delay: 280ms; }
  @keyframes ej-rise { from { opacity: 0; transform: translateY(16px); } }
  .ej-ar__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ej-draw 1300ms 200ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  @keyframes ej-draw { to { stroke-dashoffset: 0; } }
  .ej-ar__fill, .ej-ar__dot { animation: ej-fade 900ms 650ms both; } @keyframes ej-fade { from { opacity: 0; } }
  .ej-bar__v { animation: ej-grow 1000ms 250ms var(--ease-out) both; } @keyframes ej-grow { from { transform: scaleX(0); } }
  .ej-cols__b { animation: ej-up 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + 200ms); } @keyframes ej-up { from { transform: scaleY(0); } }
  .ej-dn__a { animation: ej-pop 800ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 200ms); transform-origin: 90px 90px; } @keyframes ej-pop { from { opacity: 0; transform: scale(0.86); } }
  .ej-stack__s { animation: ej-fade 700ms both; animation-delay: calc(var(--i) * 70ms + 200ms); }
  .ej-ring__v { animation: ej-fade 900ms 300ms both; }
}

/* Tableta y movil */
@media (max-width: 1180px) { .ej-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ej-hero { grid-template-columns: minmax(0, 1fr); } .ej-span7, .ej-span6, .ej-span5 { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  .ej-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ej-hero { padding: 22px 18px; border-radius: 22px; } .ej-hero__p { font-size: 16px; }
  .ej-tiles { gap: 10px; } .ej-tile { padding: 14px 14px 8px; } .ej-tile__v { font-size: 26px; } .ej-tile__l { font-size: 13.5px; }
  .ej-card { padding: 20px 16px; } .ej-money { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ej-legend2 { width: 100%; }
  .ej-rows li, .ej-rows--wide li { grid-template-columns: 96px minmax(0, 1fr) auto; } .ej-rows small { display: none; }
  .ej-rings { gap: 4px; } .ej-ring__svg { width: 84px; height: 84px; } .ej-ring__n { margin-top: -58px; margin-bottom: 28px; font-size: 18px; } .ej-ring__l { font-size: 12.5px; }
  .ej-cols { height: 150px; gap: 4px; } .ej-cols__l { font-size: 10.5px; }
  .ej-win { grid-template-columns: 30px minmax(0, 1fr); } .ej-win__v { grid-column: 2; font-size: 18px; }
}

/* "Vista experta" (la Terminal) al pie del menu, discreta */
.side__expert { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px; color: var(--fg-muted); font-size: 12.5px; text-decoration: none; }
.side__expert:hover, .side__expert:focus-visible { color: var(--fg); }
.ej-pill.is-flat { background: var(--surface-3); color: var(--fg-muted); }
.ej-big b { white-space: nowrap; }

/* Hoy en modo corto: cuatro cifras grandes */
.kcs.kcs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kcs.kcs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kcs--4 .kc__v { font-size: 34px; }

/* Un solo lenguaje de tarjeta en todo el portal: blancas, esquinas amplias, sombra suave, titulos con aire */
.block, .kc, .cc-head, .cc-more__p > .cc-row > .block { border-radius: 22px; box-shadow: var(--card-shadow); }
.block { padding: 24px 26px; gap: 16px; }
.block__h h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.cc-head { padding: 28px 30px; border-radius: 26px; background: var(--surface-1); }
.cc-title { font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.cc-sent { font-size: 18px; line-height: 1.55; }
.kc { background: var(--surface-1); padding: 18px 20px 12px; }
.kc__v { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.kc--hero { background: linear-gradient(150deg, var(--cyan-wash), var(--surface-1) 70%); }
.kc--hero .kc__v { color: var(--cyan-deep); }
.ok { border-radius: 16px; }

/* El asistente ya esta en la barra de arriba: en escritorio, sin boton flotante que tape tarjetas */
@media (min-width: 900px) { .ai-fab { display: none; } }
.ej-tile .ej-ar { margin-top: 8px; }
/* En movil, los apartados se deslizan: un velo a la derecha lo sugiere */
@media (max-width: 620px) { .ej-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* Hoy ejecutivo */
.ej-tile--static { cursor: default; } .ej-tile--static:hover { transform: none; }
.hoyej__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hoyej__acts .ej-ic { width: 16px; height: 16px; }
.hoyej__seg { justify-self: end; }
.hoyej__cmd > .block { height: 100%; }
.hoyej__last { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hoyej__last li { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15px; }
.hoyej__last span:last-child { color: var(--fg-muted); }
.hoyej__t { color: var(--fg-dim); font-size: 13.5px; }
@media (max-width: 1180px) { .hoyej__cmd { grid-column: 1 / -1; } }
@media (max-width: 620px) { .hoyej__last li { grid-template-columns: 44px minmax(0, 1fr); } .hoyej__last span:last-child { grid-column: 2; } }

.ej-money--stack { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ej-money--stack .ej-legend2 { width: 100%; }

/* El asistente, en la barra de arriba tambien en escritorio (con su texto); el boton flotante, solo en movil */
.top__ai-l { display: none; }
@media (min-width: 900px) {
  .top__ai { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 14px; border-radius: 999px; background: var(--cyan); color: var(--fg-on-cyan); }
  .top__ai:hover, .top__ai:focus-visible { background: var(--cyan-deep); color: var(--fg-on-cyan); }
  .top__ai-l { display: inline; font-size: 14px; font-weight: 600; }
}

/* Ronda 2: euros en Hoy, trio bajo la grafica, accion bajo los anillos, cifras alineadas y porcentajes legibles */
.hoyej__eur { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--ej-okbg); }
.hoyej__eur b { color: var(--success); font-size: 24px; font-weight: 700; } .hoyej__eur span { color: var(--fg-muted); font-size: 14.5px; }
.ej-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.ej-trio li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ej-trio span { color: var(--fg-muted); font-size: 13.5px; } .ej-trio b { font-size: 20px; font-weight: 600; }
.ej-trio .is-up b { color: var(--success); } .ej-trio .is-down b { color: var(--warning); }
.ej-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ej-act { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--ej-okbg); color: var(--fg); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: transform 200ms var(--ease-out); }
.ej-act:hover { transform: translateX(3px); } .ej-act:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ej-act b { color: var(--success); white-space: nowrap; }
.ej-tile--static { grid-template-rows: auto auto auto 1fr; }
.ej-legend2 small, .ej-rows small { color: var(--fg-muted); font-size: 13.5px; }
.ej-ar__ax { font-size: 13px; }
.ej-trio b { white-space: nowrap; }
@media (max-width: 620px) { .ej-trio { gap: 6px; } .ej-trio li { padding: 10px 10px; } .ej-trio b { font-size: 15.5px; } .ej-trio span { font-size: 12px; } }