/*
 * Mi Cuenta · tutoriales (Fase 5, T1): birrete en cada cabecera, oblea del Resumen, diálogo de historia y panel de
 * secciones abierto por el tutorial. Todo queda acotado a #accountView: el diálogo de historia vive dentro de la
 * vista para heredar el color de su sección (--account-tone de account-navigation.css). Sin variables en :root,
 * sin amarillos ni ocres y con letra de 12 px como mínimo.
 */

/* ---- Birrete en la cabecera de cada sección ---- */
#accountView .account-section-hero.account-readiness { grid-template-columns: minmax(0, 1fr) auto auto; }
#accountView .account-section-hero.account-readiness > .account-section-hero__actions { align-self: start; }

@media (max-width: 980px) {
  /* Tablet y celular: la cabecera pasa a una columna y el birrete queda arriba a la derecha, nunca debajo de la acción. */
  #accountView .account-section-hero.account-readiness { grid-template-columns: minmax(0, 1fr); }
  #accountView .account-section-hero > .account-section-hero__actions:has(> [data-account-tutorial]) { position: static; }
  #accountView .account-section-hero > .account-section-hero__actions:has(> [data-account-tutorial]) > [data-account-hero-action] { position: relative; z-index: 1; }
  #accountView .account-section-hero > .account-section-hero__actions:not(:has(> button:not([hidden]):not([data-account-tutorial]))) { display: contents; }
  #accountView .account-section-hero__actions > .tutorial-access-button[data-account-tutorial] { position: absolute; z-index: 2; top: 16px; right: 16px; }
  #accountView .account-section-hero:has(> .account-section-hero__actions > [data-account-tutorial]) > .account-section-hero__text { padding-right: 58px; }
}

/* ---- Oblea «Tutorial de Mi Cuenta» (Resumen) ---- */
#accountView .account-tutorial-banner { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; margin: 0 0 16px; padding: 16px 18px; border: 1.5px solid color-mix(in srgb, var(--account-tone) 26%, #fff); border-left: 6px solid var(--account-tone); border-radius: 18px; color: #1f2a44; background: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--account-tone) 12%, transparent); }
#accountView .account-tutorial-banner[hidden] { display: none; }
#accountView .account-tutorial-banner__symbol { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #287ff0, var(--account-tone-ink)); }
#accountView .account-tutorial-banner__symbol .app-icon { width: 26px; height: 26px; }
#accountView .account-tutorial-banner__copy { display: grid; min-width: 0; gap: 2px; }
#accountView .account-tutorial-banner__kicker { color: var(--account-tone-ink); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
#accountView .account-tutorial-banner h3 { margin: 2px 0 2px; color: #18233f; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
#accountView .account-tutorial-banner__meta { margin: 0; color: #56627a; font-size: 13px; font-weight: 650; line-height: 1.4; }
#accountView .account-tutorial-banner__seen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
#accountView .account-tutorial-banner__seen small { color: #56627a; font-size: 12px; font-weight: 800; }
#accountView .account-tutorial-banner__seen span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 11%, #fff); font-size: 12px; font-weight: 850; }
#accountView .account-tutorial-banner__seen .app-icon { width: 14px; height: 14px; }
#accountView .account-tutorial-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
#accountView .account-tutorial-banner__start { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #287ff0, var(--account-tone-ink)); font: inherit; font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 10px 22px color-mix(in srgb, var(--account-tone) 28%, transparent); cursor: pointer; }
#accountView .account-tutorial-banner__start .app-icon { width: 17px; height: 17px; }
#accountView .account-tutorial-banner__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
#accountView .account-tutorial-banner__link { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0; border: 0; color: #44506a; background: none; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
#accountView .account-tutorial-banner__link .app-icon { width: 15px; height: 15px; color: var(--account-tone-ink); }
#accountView .account-tutorial-banner__link:hover { color: var(--account-tone-ink); text-decoration: underline; }
#accountView .account-tutorial-banner__start:focus-visible, #accountView .account-tutorial-banner__link:focus-visible { outline: 3px solid color-mix(in srgb, var(--account-tone) 45%, #fff); outline-offset: 2px; }
#accountView .account-tutorial-banner.is-compact .account-tutorial-banner__actions { flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 640px) {
  #accountView .account-tutorial-banner, #accountView .account-tutorial-banner.is-compact { grid-template-columns: 46px minmax(0, 1fr); padding: 14px; }
  #accountView .account-tutorial-banner__symbol { width: 46px; height: 46px; align-self: start; }
  #accountView .account-tutorial-banner__actions { grid-column: 1 / -1; justify-content: stretch; }
  #accountView .account-tutorial-banner__actions > button { flex: 1 1 auto; }
  #accountView .account-tutorial-banner.is-compact .account-tutorial-banner__actions { align-items: stretch; }
  #accountView .account-tutorial-banner__links { justify-content: center; }
}

/* ---- Panel de secciones abierto por el tutorial (tablet y celular) ---- */
#accountView .account-section-sheet.is-tutorial-open { position: fixed; inset: auto 0 0; z-index: 999990; margin: 0 auto; }
/* Durante el tutorial el panel ocupa la mitad de abajo y la explicación queda arriba (en celular, como hoja). */
#accountView .account-section-sheet.is-tutorial-open, #accountView .account-section-sheet.is-tutorial-open .account-section-sheet__panel { max-height: 48dvh; }

/* ---- Historia (diálogo por capítulos, con el diseño del centro de tutoriales) ---- */
#accountView .account-tutorial-story { width: min(780px, calc(100% - 28px)); max-width: none; max-height: min(820px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: #334155; background: #fff; box-shadow: 0 30px 90px rgba(17, 25, 54, .38); }
#accountView .account-tutorial-story::backdrop { background: rgba(17, 25, 54, .68); backdrop-filter: blur(4px); }
#accountView .account-tutorial-story > article { display: flex; max-height: min(820px, calc(100dvh - 28px)); flex-direction: column; margin: 0; }
#accountView .account-tutorial-story__head { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; padding: 18px 22px; color: #fff; background: linear-gradient(115deg, color-mix(in srgb, var(--account-tone-ink) 76%, #0b1430), var(--account-tone)); }
#accountView .account-tutorial-story__symbol { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 15px; background: rgba(255, 255, 255, .14); }
#accountView .account-tutorial-story__symbol .app-icon { width: 24px; height: 24px; }
#accountView .account-tutorial-story__head > div { min-width: 0; }
#accountView .account-tutorial-story__head p { margin: 0 0 3px; color: rgba(255, 255, 255, .86); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
#accountView .account-tutorial-story__head h2 { margin: 0; color: #fff; font-size: 21px; font-weight: 850; letter-spacing: -.02em; line-height: 1.2; }
#accountView .account-tutorial-story__head > button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; margin-left: auto; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .11); cursor: pointer; }
#accountView .account-tutorial-story__head > button .app-icon { width: 17px; height: 17px; }
#accountView .account-tutorial-story__head > button:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
#accountView .account-tutorial-story__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px; background: #f7f9fd; }
#accountView .account-tutorial-story__foot { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #fff; }
#accountView .account-tutorial-story__dots { display: flex; gap: 6px; margin-right: auto; }
#accountView .account-tutorial-story__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d5dcea; }
#accountView .account-tutorial-story__dots i.is-on { width: 26px; border-radius: 6px; background: var(--account-tone); }
#accountView .account-tutorial-story__btn { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 16px; border: 1.5px solid #d5dcea; border-radius: 12px; color: #334155; background: #fff; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
#accountView .account-tutorial-story__btn .app-icon { width: 16px; height: 16px; }
#accountView .account-tutorial-story__btn.is-primary { border: 0; color: #fff; background: linear-gradient(135deg, #287ff0, var(--account-tone-ink)); }
#accountView .account-tutorial-story__btn:disabled { cursor: default; opacity: .45; }
#accountView .account-tutorial-story__btn:focus-visible, #accountView .account-tutorial-story__tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--account-tone) 45%, #fff); outline-offset: 2px; }

/* Capítulos del tutorial general: texto a la izquierda y un dibujo hecho con elementos reales de la pantalla */
#accountView .account-tutorial-story__chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: center; }
#accountView .account-tutorial-story__chapter.is-chapter-2 { grid-template-columns: minmax(0, 1fr); align-items: start; }
#accountView .account-tutorial-story__copy h3 { margin: 0 0 8px; color: #18233f; font-size: 21px; letter-spacing: -.02em; line-height: 1.25; }
#accountView .account-tutorial-story__copy p { margin: 0 0 10px; color: #475569; font-size: 15px; line-height: 1.55; }
#accountView .account-tutorial-story__num { display: inline-block; margin-bottom: 6px; color: var(--account-tone-ink); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
#accountView .account-tutorial-story__art { display: grid; place-items: center; }
#accountView .account-tutorial-story__drawing { display: grid; width: 100%; gap: 10px; }

/* 1 · De la sección a donde se nota */
#accountView .account-tutorial-story__flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; border: 1px solid #e3e8f1; border-left: 4px solid var(--account-tone); border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(30, 41, 59, .06); }
#accountView .account-tutorial-story__flow-source { display: flex; align-items: center; gap: 10px; min-width: 0; }
#accountView .account-tutorial-story__flow-source i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 13%, #fff); }
#accountView .account-tutorial-story__flow-source .app-icon { width: 18px; height: 18px; }
#accountView .account-tutorial-story__flow-source b { color: #1f2a44; font-size: 14px; line-height: 1.25; }
#accountView .account-tutorial-story__flow-arrow { display: none; }
#accountView .account-tutorial-story__flow-result { padding-left: 44px; color: #475569; font-size: 13px; font-weight: 700; line-height: 1.35; }

/* 2 · El menú real, agrupado por tema */
#accountView .account-tutorial-story__drawing.is-art-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#accountView .account-tutorial-story__group { display: grid; gap: 8px; padding: 12px; border: 1px solid #e3e8f1; border-top: 4px solid var(--account-tone); border-radius: 14px; background: #fff; }
#accountView .account-tutorial-story__group header b { color: var(--account-tone-ink); font-size: 14px; letter-spacing: .02em; }
#accountView .account-tutorial-story__group header p { margin: 3px 0 0; color: #475569; font-size: 13px; line-height: 1.4; }
#accountView .account-tutorial-story__group { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; gap: 8px 16px; }
#accountView .account-tutorial-story__group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
#accountView .account-tutorial-story__group li:last-child:nth-child(odd) { grid-column: 1 / -1; }
#accountView .account-tutorial-story__group li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 5px 6px; border-radius: 10px; background: color-mix(in srgb, var(--account-tone) 5%, #fff); }
#accountView .account-tutorial-story__group li i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 14%, #fff); }
#accountView .account-tutorial-story__group li .app-icon { width: 16px; height: 16px; }
#accountView .account-tutorial-story__group li span { display: grid; min-width: 0; }
#accountView .account-tutorial-story__group li b { overflow-wrap: anywhere; color: #1f2a44; font-size: 13px; line-height: 1.25; }
#accountView .account-tutorial-story__group li small { color: #56627a; font-size: 12px; font-weight: 650; line-height: 1.3; }
#accountView .account-tutorial-story__group li.is-locked { opacity: .55; }

/* 3 · Computadora y celular */
#accountView .account-tutorial-story__drawing.is-art-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 14px; }
#accountView .account-tutorial-story__mock { display: grid; gap: 8px; justify-items: center; margin: 0; }
#accountView .account-tutorial-story__mock figcaption { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; color: #44506a; background: #eef1f6; font-size: 12px; font-weight: 850; }
#accountView .account-tutorial-story__mock.is-here figcaption { color: #fff; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__mock figcaption .app-icon { width: 14px; height: 14px; }
#accountView .account-tutorial-story__screen { box-sizing: border-box; overflow: hidden; border: 3px solid #273449; background: #f4f6fb; box-shadow: 0 10px 24px rgba(30, 41, 59, .14); }
#accountView .account-tutorial-story__mock.is-laptop .account-tutorial-story__screen { display: grid; width: 100%; aspect-ratio: 16 / 10; grid-template-columns: 34% minmax(0, 1fr); gap: 6px; padding: 8px; border-bottom-width: 9px; border-radius: 10px; }
#accountView .account-tutorial-story__mock.is-phone .account-tutorial-story__screen { display: grid; width: 100%; max-width: 150px; aspect-ratio: 9 / 17; align-content: space-between; padding: 10px 7px 7px; border-radius: 18px; }
#accountView .account-tutorial-story__mock-side { display: grid; align-content: start; gap: 5px; padding: 5px; border-radius: 7px; background: #fff; }
#accountView .account-tutorial-story__mock-side span { display: grid; gap: 3px; padding-left: 4px; border-left: 3px solid var(--account-tone); }
#accountView .account-tutorial-story__mock-side i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--account-tone) 30%, #fff); }
#accountView .account-tutorial-story__mock-main { display: grid; align-content: start; gap: 6px; }
#accountView .account-tutorial-story__mock-main span { height: 18px; border-radius: 6px; background: #fff; }
#accountView .account-tutorial-story__mock-main span.is-hero { height: 34px; background: linear-gradient(115deg, var(--account-tone-ink), var(--account-tone)); }
#accountView .account-tutorial-story__mock-switch { display: grid; gap: 6px; padding: 7px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(30, 41, 59, .08); }
#accountView .account-tutorial-story__mock-place { display: flex; align-items: center; gap: 6px; min-width: 0; }
#accountView .account-tutorial-story__mock-place i { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 7px; color: #fff; background: var(--account-tone); }
#accountView .account-tutorial-story__mock-place .app-icon { width: 13px; height: 13px; }
#accountView .account-tutorial-story__mock-place span { display: grid; min-width: 0; line-height: 1.1; }
#accountView .account-tutorial-story__mock-place small { color: #56627a; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
#accountView .account-tutorial-story__mock-place b { color: #1f2a44; font-size: 12px; }
#accountView .account-tutorial-story__mock-more { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 6px; border-radius: 7px; color: #fff; background: var(--account-tone-ink); font-size: 12px; line-height: 1.15; }
#accountView .account-tutorial-story__mock-more .app-icon { width: 13px; height: 13px; flex: 0 0 13px; }
#accountView .account-tutorial-story__mock-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 10px 10px 6px 6px; background: #fff; box-shadow: 0 -4px 10px rgba(30, 41, 59, .1); }
#accountView .account-tutorial-story__mock-sheet i { display: grid; aspect-ratio: 1; place-items: center; border-radius: 7px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 14%, #fff); }
#accountView .account-tutorial-story__mock-sheet .app-icon { width: 15px; height: 15px; }

/* 4 · La barra de hitos de la cuenta, como en el Resumen */
#accountView .account-tutorial-story__drawing.is-art-4 { gap: 8px; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(115deg, color-mix(in srgb, var(--account-tone-ink) 76%, #0b1430), var(--account-tone)); }
#accountView .account-tutorial-story__drawing.is-art-4 small { color: rgba(255, 255, 255, .84); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
#accountView .account-tutorial-story__drawing.is-art-4 strong { font-size: 20px; letter-spacing: -.01em; }
#accountView .account-tutorial-story__drawing.is-art-4 .account-readiness__bar { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }

/* 5 · Una cabecera real con su birrete */
#accountView .account-tutorial-story__hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; padding: 20px 18px; border-radius: 18px; color: #fff; background: linear-gradient(115deg, color-mix(in srgb, var(--account-tone-ink) 76%, #0b1430), var(--account-tone)); box-shadow: 0 12px 26px color-mix(in srgb, var(--account-tone) 22%, transparent); }
#accountView .account-tutorial-story__hero > svg { position: absolute; top: 8%; right: 18%; height: 84%; aspect-ratio: 320 / 200; fill: none; stroke: #fff; stroke-width: 2.2; opacity: .16; pointer-events: none; }
#accountView .account-tutorial-story__hero > div { position: relative; display: grid; gap: 4px; min-width: 0; }
#accountView .account-tutorial-story__hero small { color: rgba(255, 255, 255, .84); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
#accountView .account-tutorial-story__hero b { font-size: 18px; line-height: 1.25; }
#accountView .account-tutorial-story__birrete { position: relative; display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; border: 2px solid color-mix(in srgb, var(--account-tone) 45%, #fff); border-radius: 12px; color: var(--account-tone-ink); background: #fff; animation: account-tutorial-pulse 1.6s ease-in-out infinite; }
#accountView .account-tutorial-story__birrete .app-icon { width: 21px; height: 21px; }
@keyframes account-tutorial-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

/* Galería de Alertas */
#accountView .account-tutorial-story__intro { margin: 0 0 14px; color: #475569; font-size: 15px; line-height: 1.5; }
#accountView .account-tutorial-story__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#accountView .account-tutorial-story__tab { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 12px; border: 1.5px solid #d5dcea; border-radius: 999px; color: #334155; background: #fff; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
#accountView .account-tutorial-story__tab .app-icon { width: 16px; height: 16px; color: var(--account-tone-ink); }
#accountView .account-tutorial-story__tab[aria-selected="true"] { border-color: var(--account-tone); color: #fff; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__tab[aria-selected="true"] .app-icon { color: #fff; }
#accountView .account-tutorial-story__example { display: grid; gap: 12px; padding: 16px; border: 1px solid #e4eaf4; border-radius: 18px; background: #fff; }
#accountView .account-tutorial-story__label { justify-self: start; padding: 3px 10px; border-radius: 999px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 12%, #fff); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
#accountView .account-tutorial-story__screens { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }
#accountView .account-tutorial-story__phone { display: grid; min-height: 230px; align-content: start; padding: 34px 10px 10px; border: 4px solid #1e293b; border-radius: 26px; background: linear-gradient(160deg, #1e3a8a, #312e81); }
#accountView .account-tutorial-story__laptop { display: grid; min-height: 150px; align-content: start; justify-items: end; padding: 12px; border: 4px solid #1e293b; border-bottom-width: 14px; border-radius: 12px; background: linear-gradient(160deg, #eef2ff, #e0f2fe); }
#accountView .account-tutorial-story__notice { display: grid; gap: 4px; width: 100%; max-width: 280px; padding: 10px 12px; border-radius: 14px; color: #0f172a; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 20px rgba(15, 23, 42, .22); }
#accountView .account-tutorial-story__notice-head { display: flex; align-items: center; gap: 6px; color: #334155; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
#accountView .account-tutorial-story__notice-head img { width: 18px; height: 18px; border-radius: 5px; }
#accountView .account-tutorial-story__notice p { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.35; }
#accountView .account-tutorial-story__note, #accountView .account-tutorial-story__privacy { margin: 0; color: #475569; font-size: 13px; line-height: 1.45; }
#accountView .account-tutorial-story__privacy { padding: 9px 11px; border-radius: 12px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 8%, #fff); font-weight: 700; }
#accountView .account-tutorial-story__day { position: relative; height: 34px; margin: 8px 0 22px; border-radius: 10px; background: color-mix(in srgb, var(--account-tone) 10%, #fff); }
#accountView .account-tutorial-story__day i { position: absolute; top: 0; bottom: 0; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__day i.is-night-end { left: 0; width: calc(8 / 24 * 100%); border-radius: 10px 0 0 10px; }
#accountView .account-tutorial-story__day i.is-night-start { right: 0; width: calc(2 / 24 * 100%); border-radius: 0 10px 10px 0; }
#accountView .account-tutorial-story__day small { position: absolute; top: calc(100% + 4px); color: #56627a; font-size: 12px; font-weight: 800; transform: translateX(-50%); }

/* Historia de Plan (T3): los lugares del equipo como círculos y el período como una barra con los días que faltan */
#accountView .account-tutorial-story__plan { gap: 18px; padding: 18px; border: 1px solid #e3e8f1; border-radius: 18px; background: #fff; }
#accountView .account-tutorial-story__seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
#accountView .account-tutorial-story__seats > span { display: grid; justify-items: center; gap: 5px; min-width: 48px; }
#accountView .account-tutorial-story__seats i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; font-size: 17px; font-style: normal; font-weight: 900; }
#accountView .account-tutorial-story__seats .is-taken i { color: #fff; background: var(--account-tone-ink); box-shadow: 0 6px 14px color-mix(in srgb, var(--account-tone-ink) 26%, transparent); }
#accountView .account-tutorial-story__seats .is-free i { border: 2px dashed color-mix(in srgb, var(--account-tone) 55%, #fff); color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 6%, #fff); }
#accountView .account-tutorial-story__seats .is-free .app-icon { width: 18px; height: 18px; }
#accountView .account-tutorial-story__seats .is-waiting i { border: 2px solid var(--account-tone); color: var(--account-tone-ink); background: #fff; }
#accountView .account-tutorial-story__seats .is-waiting { position: relative; }
#accountView .account-tutorial-story__seats .is-waiting:first-of-type { margin-left: 10px; }
#accountView .account-tutorial-story__seats small { min-height: 16px; color: #334155; font-size: 12px; font-weight: 800; }
#accountView .account-tutorial-story__period { display: flex; align-items: center; gap: 8px; }
#accountView .account-tutorial-story__period-track { position: relative; display: block; flex: 1; height: 28px; border-radius: 10px; background: color-mix(in srgb, var(--account-tone) 12%, #fff); }
#accountView .account-tutorial-story__period-track b { position: absolute; top: 0; right: 0; bottom: 0; display: grid; width: 38%; place-items: center; border-radius: 10px; color: #fff; background: var(--account-tone-ink); font-size: 13px; }
#accountView .account-tutorial-story__period-end { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 14%, #fff); }
#accountView .account-tutorial-story__period-end .app-icon { width: 18px; height: 18px; }

/* Historia de Recordatorios (T3): línea de tiempo y el aviso de cada momento; WhatsApp verde y correo azul */
#accountView .account-tutorial-story__timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
#accountView .account-tutorial-story__moment { display: grid; min-height: 56px; align-content: center; gap: 2px; padding: 6px 8px; border: 1.5px solid #d5dcea; border-radius: 12px; color: #334155; background: #fff; font: inherit; text-align: left; cursor: pointer; }
#accountView .account-tutorial-story__moment b { font-size: 12px; line-height: 1.2; }
#accountView .account-tutorial-story__moment small { color: #56627a; font-size: 12px; font-weight: 700; }
#accountView .account-tutorial-story__moment[aria-selected="true"] { border-color: var(--account-tone); color: #fff; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__moment[aria-selected="true"] small { color: rgba(255, 255, 255, .86); }
#accountView .account-tutorial-story__moment:focus-visible { outline: 3px solid color-mix(in srgb, var(--account-tone) 45%, #fff); outline-offset: 2px; }
#accountView .account-tutorial-story__reminder { justify-items: center; }
#accountView .account-tutorial-story__reminder-phone { display: grid; width: min(100%, 230px); min-height: 250px; align-content: center; padding: 30px 12px 16px; border: 4px solid #1e293b; border-radius: 28px; background: linear-gradient(170deg, #f1f5f9, #e2e8f0); }
#accountView .account-tutorial-story__bubble { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .16); }
#accountView .account-tutorial-story__bubble.is-whatsapp { border-left: 4px solid #16a34a; background: #effaf2; }
#accountView .account-tutorial-story__bubble.is-correo { border-left: 4px solid #2563eb; background: #eff5ff; }
#accountView .account-tutorial-story__bubble-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
#accountView .account-tutorial-story__bubble.is-whatsapp .account-tutorial-story__bubble-label { color: #15803d; }
#accountView .account-tutorial-story__bubble.is-correo .account-tutorial-story__bubble-label { color: #1d4ed8; }
#accountView .account-tutorial-story__bubble-label .app-icon { width: 14px; height: 14px; }
#accountView .account-tutorial-story__bubble p { margin: 0; color: #0f172a; font-size: 13px; font-weight: 650; line-height: 1.4; }
#accountView .account-tutorial-story__bubble-cancel { justify-self: start; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; color: #475569; font-size: 12px; font-weight: 850; }
#accountView .account-tutorial-story__agenda-notice { display: grid; width: min(100%, 300px); gap: 8px; padding: 14px; border: 1px solid #e3e8f1; border-left: 4px solid var(--account-tone); border-radius: 16px; background: #fff; box-shadow: 0 10px 22px rgba(30, 41, 59, .1); }
#accountView .account-tutorial-story__agenda-notice > span { display: inline-flex; align-items: center; gap: 6px; color: var(--account-tone-ink); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
#accountView .account-tutorial-story__agenda-notice .app-icon { width: 15px; height: 15px; }
#accountView .account-tutorial-story__agenda-notice p { margin: 0; color: #1f2a44; font-size: 14px; font-weight: 700; line-height: 1.4; }
#accountView .account-tutorial-story__shield { display: grid; justify-items: center; gap: 10px; }
#accountView .account-tutorial-story__shield i { display: grid; width: 96px; height: 96px; place-items: center; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--account-tone), var(--account-tone-ink)); box-shadow: 0 14px 30px color-mix(in srgb, var(--account-tone-ink) 30%, transparent); }
#accountView .account-tutorial-story__shield .app-icon { width: 46px; height: 46px; }
#accountView .account-tutorial-story__shield b { color: var(--account-tone-ink); font-size: 17px; }

/* Historia de Agenda online (T4): el celular del paciente con la página de reserva del ejemplo */
#accountView .account-tutorial-story__booking { justify-items: center; }
#accountView .account-tutorial-story__booking-phone { display: grid; width: min(100%, 250px); min-height: 280px; padding: 26px 10px 14px; border: 4px solid #1e293b; border-radius: 28px; background: linear-gradient(170deg, #f1f5f9, #e2e8f0); }
#accountView .account-tutorial-story__booking-page { display: grid; align-content: start; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); }
#accountView .account-tutorial-story__booking-page > header { display: grid; justify-items: start; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #e5eaf2; }
#accountView .account-tutorial-story__booking-page > header b { color: #18233f; font-size: 15px; line-height: 1.25; }
#accountView .account-tutorial-story__booking-contact { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
#accountView .account-tutorial-story__booking-contact li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 7px; color: #334155; font-size: 12px; font-weight: 700; line-height: 1.35; }
#accountView .account-tutorial-story__booking-contact .app-icon { width: 15px; height: 15px; margin-top: 1px; color: var(--account-tone-ink); }
#accountView .account-tutorial-story__booking-contact span { overflow-wrap: anywhere; }
#accountView .account-tutorial-story__booking-question { margin: 0; color: #18233f; font-size: 13px; font-weight: 850; line-height: 1.3; }
#accountView .account-tutorial-story__booking-choices { display: grid; gap: 6px; }
#accountView .account-tutorial-story__booking-choices span { padding: 8px 10px; border: 1.5px solid #d5dcea; border-radius: 10px; color: #334155; font-size: 13px; font-weight: 750; }
#accountView .account-tutorial-story__booking-choices span.is-on, #accountView .account-tutorial-story__booking-people span.is-on i { border-color: var(--account-tone); color: #fff; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__booking-people { display: flex; justify-content: center; gap: 16px; }
#accountView .account-tutorial-story__booking-people span { display: grid; justify-items: center; gap: 4px; }
#accountView .account-tutorial-story__booking-people i { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid color-mix(in srgb, var(--account-tone) 40%, #fff); border-radius: 50%; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 8%, #fff); font-size: 14px; font-style: normal; font-weight: 900; }
#accountView .account-tutorial-story__booking-people small { color: #334155; font-size: 12px; font-weight: 750; }
#accountView .account-tutorial-story__booking-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
#accountView .account-tutorial-story__booking-week span { display: grid; align-content: start; gap: 4px; }
#accountView .account-tutorial-story__booking-week b { color: #56627a; font-size: 12px; text-align: center; }
#accountView .account-tutorial-story__booking-week i { padding: 5px 0; border-radius: 7px; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 11%, #fff); font-size: 12px; font-style: normal; font-weight: 800; text-align: center; }
#accountView .account-tutorial-story__booking-week i.is-on { color: #fff; background: var(--account-tone-ink); }
#accountView .account-tutorial-story__booking-mail { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-left: 4px solid #2563eb; border-radius: 12px; color: #1d4ed8; background: #eff5ff; }
#accountView .account-tutorial-story__booking-mail .app-icon { width: 22px; height: 22px; }
#accountView .account-tutorial-story__booking-mail b { color: #0f172a; font-size: 20px; letter-spacing: .12em; }
#accountView .account-tutorial-story__booking-done { display: grid; justify-items: center; gap: 6px; padding: 6px 0; text-align: center; }
#accountView .account-tutorial-story__booking-done .app-icon { width: 34px; height: 34px; color: var(--account-tone-ink); }
#accountView .account-tutorial-story__booking-done b { color: #18233f; font-size: 14px; line-height: 1.3; }

/* Historia de Importar datos (T4): la mudanza en dibujos, sin datos de pacientes */
#accountView .account-tutorial-story__move { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; padding: 18px; border: 1px solid #e3e8f1; border-radius: 18px; background: #fff; }
#accountView .account-tutorial-story__move.is-move-3, #accountView .account-tutorial-story__move.is-move-4 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
#accountView .account-tutorial-story__move-tile { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--account-tone), var(--account-tone-ink)); }
#accountView .account-tutorial-story__move-tile .app-icon { width: 26px; height: 26px; }
#accountView .account-tutorial-story__move-source { display: grid; justify-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--account-tone) 7%, #fff); }
#accountView .account-tutorial-story__move-lines { display: grid; width: 100%; gap: 5px; }
#accountView .account-tutorial-story__move-lines i { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--account-tone) 26%, #fff); }
#accountView .account-tutorial-story__move-lines i:nth-child(even) { width: 72%; }
#accountView .account-tutorial-story__move-arrow { display: grid; place-items: center; color: var(--account-tone-ink); }
#accountView .account-tutorial-story__move-arrow .app-icon { width: 22px; height: 22px; }
#accountView .account-tutorial-story__move-result { display: grid; gap: 8px; }
#accountView .account-tutorial-story__move-result > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #e3e8f1; border-left: 4px solid var(--account-tone); border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(30, 41, 59, .06); }
#accountView .account-tutorial-story__move-result .app-icon { width: 17px; height: 17px; color: var(--account-tone-ink); }
#accountView .account-tutorial-story__move-link { display: flex; align-items: center; gap: 0; }
#accountView .account-tutorial-story__move-join { width: 70px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--account-tone-ink) 0 8px, transparent 8px 13px); }
#accountView .account-tutorial-story__move-preview { display: grid; width: min(100%, 280px); gap: 14px; padding: 14px; border: 1px solid #e3e8f1; border-radius: 14px; background: color-mix(in srgb, var(--account-tone) 5%, #fff); }
#accountView .account-tutorial-story__move-confirm { display: inline-flex; justify-self: center; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; color: #fff; background: var(--account-tone-ink); font-size: 15px; font-weight: 900; }
#accountView .account-tutorial-story__move-confirm .app-icon { width: 20px; height: 20px; }

/* ---- Modo ejemplo (T2): franja fija con el color de la sección y el resto del menú apagado ---- */
#accountView .account-demo-ribbon { position: sticky; top: 76px; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 10px 12px 10px 14px; border: 1px solid color-mix(in srgb, var(--account-tone) 38%, #fff); border-left: 6px solid var(--account-tone); border-radius: 16px; color: #1e293b; background: #fff; box-shadow: 0 12px 26px color-mix(in srgb, var(--account-tone-ink) 18%, transparent); }
#accountView .account-demo-ribbon[hidden] { display: none; }
#accountView .account-demo-ribbon__tag { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; color: #fff; background: var(--account-tone-ink); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
#accountView .account-demo-ribbon__tag .app-icon { width: 15px; height: 15px; }
#accountView .account-demo-ribbon__text { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
#accountView .account-demo-ribbon__text [data-demo-compact], #accountView .account-demo-ribbon__exit [data-demo-exit-short] { display: none; }
#accountView .account-demo-ribbon__exit { display: inline-flex; flex: none; min-height: 40px; align-items: center; gap: 7px; margin-left: auto; padding: 8px 14px; border: 1px solid var(--account-tone-ink); border-radius: 12px; color: var(--account-tone-ink); background: #fff; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
#accountView .account-demo-ribbon__exit:hover, #accountView .account-demo-ribbon__exit:focus-visible { color: #fff; background: var(--account-tone-ink); }
#accountView .account-demo-ribbon__exit:focus-visible { outline: 3px solid color-mix(in srgb, var(--account-tone) 40%, #fff); outline-offset: 2px; }
#accountView .account-demo-ribbon__exit .app-icon { width: 15px; height: 15px; }
#accountView.is-account-demo .account-section-nav > button.is-demo-locked { cursor: not-allowed; opacity: .45; }
#accountView .account-section-sheet [data-account-sheet-trigger].is-demo-locked { cursor: not-allowed; opacity: .45; }

@media (max-width: 980px) {
  #accountView .account-tutorial-story__chapter { grid-template-columns: minmax(0, 1fr); }
  #accountView .account-tutorial-story__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* En celular la franja del ejemplo se acorta a «EJEMPLO · Nada se guarda» y «Salir», en una sola fila, al comienzo de la sección. */
  /* En celular no queda fija: la barra «Estás en» ya ocupa arriba y la explicación del tutorial, abajo. */
  #accountView .account-demo-ribbon { position: relative; top: auto !important; flex-wrap: nowrap; gap: 8px; padding: 8px 8px 8px 10px; }
  #accountView .account-demo-ribbon__text { flex: 1 1 auto; }
  #accountView .account-demo-ribbon__text [data-demo-text], #accountView .account-demo-ribbon__exit [data-demo-exit-long] { display: none; }
  #accountView .account-demo-ribbon__text [data-demo-compact], #accountView .account-demo-ribbon__exit [data-demo-exit-short] { display: inline; }
  #accountView .account-demo-ribbon__exit { min-height: 38px; padding: 7px 11px; }
  /* En celular la historia sube desde abajo, como el panel de secciones. */
  #accountView .account-tutorial-story { width: 100%; max-height: 92dvh; margin: auto auto 0; border-radius: 24px 24px 0 0; }
  #accountView .account-tutorial-story > article { max-height: 92dvh; }
  #accountView .account-tutorial-story__head { padding: 14px 16px; }
  #accountView .account-tutorial-story__head h2 { font-size: 18px; }
  #accountView .account-tutorial-story__body { padding: 16px; }
  #accountView .account-tutorial-story__foot { padding: 12px 14px max(12px, env(safe-area-inset-bottom)); }
  #accountView .account-tutorial-story__foot .account-tutorial-story__btn { flex: 1 1 auto; justify-content: center; }
  #accountView .account-tutorial-story__dots { flex: 1 0 100%; justify-content: center; margin: 0; }
  #accountView .account-tutorial-story__drawing.is-art-2, #accountView .account-tutorial-story__screens { grid-template-columns: minmax(0, 1fr); }
  /* En celular, el título del grupo arriba y una sección por fila. */
  #accountView .account-tutorial-story__group { grid-template-columns: minmax(0, 1fr); }
  #accountView .account-tutorial-story__group ul { grid-template-columns: minmax(0, 1fr); }
  #accountView .account-tutorial-story__phone { justify-self: center; width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  #accountView .account-tutorial-story__birrete { animation: none; }
}