/* Ainora UI v2 — Inicio (home) area.
   Readiness hero, KPI cards, channel controls ("Tú tienes el control"), setup steps, services and
   the guided tour. Colours only from ainora-theme.css tokens. */

/* ---------- Page header on Inicio ---------- */
.workspace:has(#home-view:not([hidden])) #organization-header{display:none}

/* ---------- Layout ---------- */
#home-view{display:block}
.home-layout{display:grid;gap:20px}
.home-slot{display:grid;gap:20px;min-width:0;align-content:start}
.home-slot:not(:has(> :not([hidden]))){display:none}
.home-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.home-columns:not(:has(> .home-slot-side > :not([hidden]))),
.home-columns:not(:has(> .home-slot-main > :not([hidden]))){grid-template-columns:minmax(0,1fr)}
.home-columns:not(:has(> .home-slot > :not([hidden]))){display:none}

/* Shared card header */
.home-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.home-card-head h2{font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.home-card-head p{margin-top:3px;color:var(--t-muted);font-size:13.5px}
.home-card-head .eyebrow{display:block;margin-bottom:6px;font-size:10.5px}
.reference-icon{display:inline-grid;place-items:center;flex:none}
.reference-icon svg{width:100%;height:100%}

/* ---------- Readiness hero ---------- */
.setup-hero{display:flex;align-items:center;gap:24px;padding:24px 28px}
.setup-ring{--pct:0;position:relative;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
 background:conic-gradient(var(--t-accent) calc(var(--pct) * 1%),var(--t-surface-3) 0)}
.setup-ring::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--t-surface)}
.setup-ring span{position:relative;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--t-text)}
.setup-copy{flex:1;min-width:0}
.setup-copy h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.setup-copy p{margin-top:4px;color:var(--t-muted);font-size:14.5px}
.setup-hero .primary-button{flex:none;min-height:44px;padding:0 20px}

/* ---------- KPI cards ---------- */
.home-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-stat{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;gap:8px;padding:18px 20px;min-width:0;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.home-stat:hover{border-color:var(--t-line-strong);box-shadow:var(--sh-md)}
.home-stat-label{display:flex;align-items:center;gap:8px;color:var(--t-muted);font-size:13px;font-weight:600;min-width:0}
.home-stat-label .reference-icon{width:16px;height:16px;color:var(--t-muted)}
.home-stat strong{display:flex;align-items:baseline;gap:2px;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.035em;color:var(--t-text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-stat-unit{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--t-muted)}
.home-stat small{color:var(--t-muted);font-size:12.5px;line-height:1.4;align-self:end}
.home-stat[data-level=warn] small{color:var(--t-warn)}
.home-stat[data-level=full] small{color:var(--t-danger)}
.kpi-bar{height:6px;border-radius:999px;background:var(--t-surface-3);overflow:hidden}
.kpi-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--t-accent),var(--t-accent-2));transition:width .6s var(--ease)}
.kpi-bar[data-level=warn] i{background:var(--t-warn)}
.kpi-bar[data-level=full] i{background:var(--t-danger)}
.home-stat-link{position:absolute;inset:0;width:100%;border:0;padding:0;margin:0;background:transparent;border-radius:inherit;cursor:pointer;font-size:0}
.home-stat-link:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}

/* ---------- Channel controls ("Tú tienes el control") ---------- */
.automation-panel{padding:0;overflow:hidden}
#portal-content > .automation-panel{margin-bottom:20px}
.automation-head{padding:20px 22px 16px}
.automation-refresh{flex:none;min-height:36px;padding:0 12px;gap:6px;font-size:13px}
.automation-refresh .reference-icon{width:15px;height:15px}
.automation-panel[aria-busy=true] .automation-refresh .reference-icon{animation:home-spin .9s linear infinite}
@keyframes home-spin{to{transform:rotate(360deg)}}
.automation-list{list-style:none;margin:0;padding:0}
.automation-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;grid-template-areas:"icon copy pill switch";align-items:center;column-gap:14px;padding:14px 22px;border-top:1px solid var(--t-line)}
.automation-icon{grid-area:icon;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--t-surface-3)}
.automation-icon img{width:22px;height:22px}
.automation-icon.voice{background:var(--t-accent-soft);color:var(--t-accent-text)}
.automation-icon .reference-icon{width:19px;height:19px}
.automation-copy{grid-area:copy;min-width:0}
.automation-copy h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.automation-copy p{color:var(--t-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.automation-row>.badge{grid-area:pill;justify-self:end}
.automation-row .channel-switch{grid-area:switch;min-height:40px;padding:0 2px;font-size:13px;color:var(--t-text-2)}
.automation-row .switch-text{min-width:68px;text-align:left}
.automation-row[data-paused=true] .switch-text{color:var(--t-muted)}
.automation-row .channel-switch:disabled{opacity:.55;cursor:progress}
.automation-row .channel-switch:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px;border-radius:8px}
.automation-row.skeleton{height:69px;background:linear-gradient(90deg,transparent,var(--t-surface-3),transparent) 0 0/200% 100%;animation:home-shimmer 1.4s ease-in-out infinite}
@keyframes home-shimmer{to{background-position:-200% 0}}
.automation-status{padding:12px 22px;border-top:1px solid var(--t-line);background:color-mix(in srgb,var(--t-surface-3) 45%,var(--t-surface));color:var(--t-muted);font-size:12.5px}
.automation-status:empty{display:none}
.automation-status[data-error=true]{color:var(--t-danger);background:var(--t-danger-soft)}
/* Usage detail (Plan y consumo only) */
.automation-usage:empty{display:none}
.automation-usage{display:grid;gap:8px;padding:6px 22px 22px;border-top:1px solid var(--t-line)}
.automation-usage h3{margin-top:16px;font-size:15px;font-weight:700}
.automation-usage .help-text{font-size:12.5px;line-height:1.55}
.automation-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0}
.automation-metrics>div{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-md);background:var(--t-surface-3)}
.automation-metrics strong{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.automation-usage progress{height:8px;margin:6px 0}

/* ---------- Setup steps ("Configura a Ainora") ---------- */
.setup-panel{padding:20px 22px 22px;display:grid;gap:14px}
ol.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.setup-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--t-surface-3) 65%,var(--t-surface));border:1px solid transparent}
.setup-step.next{background:var(--t-surface);border-color:var(--t-accent-line);box-shadow:var(--sh-sm)}
.setup-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:var(--t-surface);color:var(--t-muted);border:1px solid var(--t-line)}
.setup-step.next .setup-mark{background:var(--t-accent-soft);color:var(--t-accent-text);border-color:transparent}
.setup-step.done .setup-mark{background:var(--t-ok-soft);color:var(--t-ok);border-color:transparent}
.setup-step-copy{min-width:0}
.setup-step-copy strong{display:block;font-size:13.5px;font-weight:700;color:var(--t-text)}
.setup-step-copy small{display:block;margin-top:1px;color:var(--t-muted);font-size:12.5px;line-height:1.4}
.setup-step.done .setup-step-copy strong{color:var(--t-muted);text-decoration:line-through;text-decoration-color:var(--t-line-strong)}
.setup-step button{min-height:34px;padding:0 12px;font-size:12.5px}

/* ---------- Services ---------- */
.home-services{padding:0;overflow:hidden}
.home-services .home-card-head{padding:20px 22px 14px}
.home-services .service-grid{display:block}
.home-service-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid var(--t-line)}
.home-service-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--t-accent-soft);color:var(--t-accent-text)}
.home-service-icon.omnichannel{background:var(--t-accent-2-soft,var(--t-surface-3));color:var(--t-accent-2)}
.home-service-icon .reference-icon{width:19px;height:19px}
.home-service-copy{min-width:0}
.home-service-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.home-service-title h3{font-size:14.5px;font-weight:700}
.home-service-copy p{margin-top:2px;color:var(--t-muted);font-size:13px;line-height:1.45}
.home-service-row .service-open{min-height:36px;padding:0 14px;font-size:13px}

/* ---------- Guided tour ---------- */
#onboarding:not(:has(.onboarding-cards)){display:none}
#onboarding{padding:20px 22px 22px;display:grid;gap:16px;overflow:hidden}
.onboarding-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.onboarding-step{position:relative;display:grid;align-content:start;gap:4px;min-width:0;padding:14px 12px 12px;border:1px solid var(--t-line);border-radius:var(--r-md);background:var(--t-surface);color:var(--t-text);text-align:left;font:inherit;cursor:default}
button.onboarding-step{cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
button.onboarding-step:hover{border-color:var(--t-accent-line);background:var(--t-surface-3)}
.onboarding-step .home-step-number{width:30px;height:30px;padding:7px;margin-bottom:6px;border-radius:9px;background:var(--t-surface-3);color:var(--t-muted)}
.onboarding-step[data-state=complete] .home-step-number{background:var(--t-ok-soft);color:var(--t-ok)}
.onboarding-step[data-state=in_progress] .home-step-number{background:var(--t-accent-soft);color:var(--t-accent-text)}
.onboarding-step[data-state=blocked] .home-step-number{background:var(--t-warn-soft);color:var(--t-warn)}
.onboarding-step strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onboarding-step span:last-child{font-size:11.5px;color:var(--t-muted);line-height:1.35}
.onboarding-step[data-state=complete] span:last-child{color:var(--t-ok)}
#onboarding [data-error]{color:var(--t-danger);font-size:13px}

/* Wizard bar shown above any view while the guided tour is running */
.wizard-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:14px 18px;border-color:var(--t-accent-line);background:var(--t-accent-soft)}
.wizard-bar>div:first-child{flex:1 1 320px;min-width:0}
.wizard-bar strong{color:var(--t-accent-text);font-size:14px}
.wizard-bar p{margin-top:2px;color:var(--t-text-2);font-size:13px}
.wizard-bar .section-save{margin:0}

/* ---------- Service notice (only when something needs attention) ---------- */
.home-notice{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-radius:var(--r-lg);background:var(--t-warn-soft);color:var(--t-warn)}
.home-notice .service-icon{flex:none;width:20px;height:20px;margin-top:1px}
.home-notice h3{font-size:14.5px;color:var(--t-warn)}
.home-notice p{margin-top:2px;font-size:13.5px;color:var(--t-text-2)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
 .home-columns{grid-template-columns:minmax(0,1fr)}
 .onboarding-cards{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
@media (max-width:1100px){.home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
 .home-layout,.home-slot,.home-columns{gap:14px}
 .setup-hero{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px 18px;padding:20px}
 .setup-ring{width:72px;height:72px}.setup-ring::before{inset:7px}.setup-ring span{font-size:17px}
 .setup-copy h2{font-size:17px}.setup-copy p{font-size:13.5px}
 .setup-hero .primary-button{grid-column:1/-1;width:100%;min-height:48px}
 .home-stats{gap:12px}
 .home-stat{padding:16px;gap:6px}
 .home-stat-label{font-size:12.5px;align-items:flex-start}
 .home-stat-label .reference-icon{margin-top:2px}
 .home-stat strong{font-size:26px;flex-wrap:wrap}
 .home-stat-unit{font-size:12.5px}
 .automation-head,.home-services .home-card-head{padding:18px 16px 14px}
 .automation-refresh{min-height:44px;min-width:44px;padding:0 12px}
 .automation-refresh span:not(.reference-icon){display:none}
 .automation-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"icon copy switch" "icon pill switch";row-gap:6px;padding:14px 16px}
 .automation-row>.badge{justify-self:start}
 .automation-row .channel-switch{min-height:44px;min-width:44px;justify-content:flex-end}
 .automation-row .switch-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .automation-row.skeleton{height:84px}
 .automation-status{padding:12px 16px}
 .automation-usage{padding:4px 16px 18px}
 .setup-panel,#onboarding{padding:18px 16px}
 .setup-step{grid-template-columns:28px minmax(0,1fr);padding:12px}
 .setup-step button{grid-column:2;justify-self:start;min-height:44px;padding:0 16px;font-size:13px}
 .home-service-row{padding:14px 16px;gap:12px}
 .home-service-row .service-open{min-height:44px}
 .home-card-head{flex-wrap:wrap}
 .automation-head{flex-wrap:nowrap}
 .onboarding-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
 .onboarding-cards::-webkit-scrollbar{display:none}
 .onboarding-step{flex:0 0 132px;scroll-snap-align:start;min-height:44px}
 .wizard-bar{padding:14px}
 .wizard-bar .section-save{width:100%}
 .wizard-bar .section-save button{flex:1;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
 .automation-row.skeleton{animation:none}
 .kpi-bar i{transition:none}
}
/* Channel panel: the status refreshes by itself; "Actualizar" only appears to retry after an error */
.automation-panel [data-refresh]{display:none}
.automation-panel:has([data-error="true"]) [data-refresh]{display:inline-flex}

/* Lo que logró Ainora (results-view.mjs) */
.home-results{display:grid;gap:16px;padding:20px 22px}
.home-results-tabs{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-surface);flex-shrink:0}
.home-results-tab{border:0;background:transparent;color:var(--t-muted);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer}
.home-results-tab[aria-pressed="true"]{background:var(--t-accent-soft);color:var(--t-accent-text)}
.home-results-tab:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
.home-results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.home-result{display:grid;gap:6px;min-width:0;padding:14px 16px;border:1px solid var(--t-line);border-radius:14px}
.home-result-label{color:var(--t-muted);font-size:12.5px;font-weight:600}
.home-result-value{font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--t-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.home-result-hint{color:var(--t-muted);font-size:12px;line-height:1.4}
.home-result-trend{display:block;margin-top:2px;font-weight:700;color:var(--t-muted)}
.home-result-trend[data-up="true"]{color:var(--t-ok)}
.home-results-note{margin:0;font-size:12px}
@media (max-width:900px){.home-results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.home-results{padding:16px}.home-card-head:has(.home-results-tabs){flex-direction:column}.home-results-grid{grid-template-columns:1fr 1fr;gap:8px}.home-result{padding:12px}.home-result-value{font-size:22px}}

/* Seguimiento y reseñas (engagement-view.mjs) */
.home-engagement{display:grid;gap:14px;padding:20px 22px}
.engagement-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--t-line)}
.engagement-copy{min-width:0}
.engagement-copy h3{font-size:14.5px;font-weight:700;color:var(--t-text)}
.engagement-copy p{margin-top:3px;color:var(--t-muted);font-size:13px;line-height:1.5;max-width:62ch}
.engagement-switch{min-height:44px;min-width:44px;justify-content:flex-end;flex:none}
.engagement-switch:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px;border-radius:8px}
.engagement-field small{color:var(--t-muted);font-size:12px;font-weight:400}
.engagement-field textarea,.engagement-field input{font-weight:400}
.engagement-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px}
.engagement-status{margin:0;font-size:12.5px;min-height:1em}
@media (max-width:520px){.home-engagement{padding:16px}.engagement-foot .primary-button{width:100%}}