/* ========== HabilidadHumana.com — Estilos (HabilidadHumana design system) ========== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap");
@import url("../../design_system/css/tokens.css");

:root {
    --bg: var(--hh-ivory);
    --bg-soft: var(--hh-gray-100);
    --card: var(--hh-white);
    --card-border: var(--hh-gray-200);
    --text: var(--hh-night);
    --muted: var(--hh-gray-600);
    --primary: var(--hh-blue);
    --primary-hover: #102a48;
    --accent: var(--hh-teal);
    --coral: var(--hh-coral);
    --coral-hover: #F46B48;
    --coral-active: #E65C39;
    --danger: var(--hh-danger);
    --warn: var(--hh-warning);
    --ok: var(--hh-success);
    --info: var(--hh-info);
    --radius: var(--hh-radius-md);
    --shadow: var(--hh-shadow-sm);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--hh-font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--hh-font-display); font-weight: 600; letter-spacing: -.01em; font-size: 1.9rem; margin-bottom: .6rem; }
h2 { font-size: 1.2rem; margin-bottom: .8rem; }
h3 { font-size: 1.02rem; margin: .8rem 0 .3rem; }
.muted { color: var(--muted); }
small { color: var(--muted); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .7rem 1.4rem;
    background: rgba(245, 241, 235, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand-mini { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.brand-mini:hover { text-decoration: none; }
.brand-mini img { display: block; height: 34px; width: auto; }
.topbar nav { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; align-items: center; }
.topbar nav a {
    color: var(--muted);
    padding: .45rem .85rem;
    border-radius: var(--hh-radius-pill);
    font-size: .92rem;
    font-weight: 600;
}
.topbar nav a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.topbar nav a.active { color: #fff; background: var(--primary); }
.topbar-nav-groups { flex-wrap: nowrap; }
.topbar-menu { position: relative; flex: 0 0 auto; }
.topbar-menu > summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    padding: .45rem .85rem;
    border-radius: var(--hh-radius-pill);
    font-size: .92rem;
    font-weight: 600;
}
.topbar-menu > summary::-webkit-details-marker,
.topbar-menu > summary::marker { display: none; }
.topbar-menu > summary::after {
    content: "";
    display: inline-block;
    width: .38rem;
    height: .38rem;
    margin-left: .4rem;
    margin-bottom: .12rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
}
.topbar-menu[open] > summary::after { transform: rotate(225deg); margin-bottom: -.1rem; }
.topbar-menu > summary:hover { color: var(--text); background: var(--bg-soft); }
.topbar-menu > summary.active,
.topbar-menu.is-current > summary { color: #fff; background: var(--primary); }
.topbar-menu__list {
    position: absolute;
    left: 0;
    top: calc(100% + .4rem);
    min-width: 220px;
    z-index: 80;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-md);
    box-shadow: var(--hh-shadow-md);
}
.topbar-menu__list a { display: block; border-radius: 10px; font-weight: 700; }
.topbar-menu__list a.active { color: #fff; background: var(--primary); }
.topbar-user { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.topbar-user__identity { display: inline-flex; align-items: baseline; gap: .3rem; font-weight: 700; }
.topbar-user__identity small { font-weight: 600; color: var(--muted); }
.topbar-avatar {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--primary); color: #fff; font-size: .92rem; font-weight: 800; flex: 0 0 auto;
}
.topbar-account { position: relative; }
.topbar-account > summary {
    list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; color: var(--text);
}
.topbar-account > summary::-webkit-details-marker, .topbar-account > summary::marker { display: none; }
.topbar-account > summary::after {
    content: ""; width: .42rem; height: .42rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); margin-top: -.25rem; flex: 0 0 auto;
}
.topbar-account[open] > summary::after { transform: rotate(225deg); margin-top: .15rem; }
.topbar-account__menu {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 220px; z-index: 80;
    padding: .45rem; background: #fff; border: 1px solid var(--card-border); border-radius: var(--hh-radius-md);
    box-shadow: var(--hh-shadow-md);
}
.topbar-account__menu a {
    display: block; padding: .55rem .7rem; border-radius: 10px; color: var(--text); font-weight: 700; font-size: .9rem;
}
.topbar-account__menu a:hover { background: var(--bg-soft); text-decoration: none; color: var(--primary); }
.topbar-account__menu a:last-child { color: var(--danger); margin-top: .2rem; border-top: 1px solid var(--card-border); border-radius: 0 0 10px 10px; }

.topbar--switcher {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem;
}
.topbar--switcher .brand-mini { justify-self: start; }
.topbar--switcher .topbar-user { justify-self: end; }
.topbar-switcher {
    display: inline-flex; flex: none; flex-wrap: nowrap; justify-self: center; gap: .15rem; padding: .22rem;
    background: #fff; border: 1px solid var(--card-border); border-radius: var(--hh-radius-pill);
    box-shadow: var(--shadow);
}
.topbar-switcher a {
    min-width: 9.2rem; text-align: center; color: var(--muted); background: transparent; font-weight: 800;
}
.topbar-switcher a:hover { color: var(--text); background: var(--bg-soft); }
.topbar-switcher a.active { color: #fff; background: var(--primary); }

.container { max-width: 1200px; margin: 0 auto; padding: 1.8rem 1.4rem 4rem; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1.5rem; }

/* ---------- Cards / tablas ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.4rem;
    margin-top: 1.2rem;
    box-shadow: var(--shadow);
}
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.admin-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.2rem;
    align-items: flex-end;
    margin: 0.4rem 0 1rem;
    padding: .9rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.admin-filterbar label { margin: 0; min-width: 14rem; flex: 1 1 14rem; }
.admin-filterbar .catalog-chip-label { margin-top: 0; }
.category-scope-group { margin: 0 0 1.4rem; }
.category-scope-group h2 {
    margin: 0 0 .7rem;
    font-family: var(--hh-font-display);
    font-size: 1.15rem;
}

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--card-border); }
.table th { color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.table tr:hover td { background: var(--bg-soft); }
.row-actions { white-space: nowrap; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    background: var(--card-border);
    color: var(--text);
    border: 2px solid transparent;
    border-radius: var(--hh-radius-pill);
    padding: .55rem 1.15rem;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--hh-gray-300); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-hover); box-shadow: var(--hh-shadow-sm); }
.btn-primary:active { background: var(--coral-active); }
.btn-danger { background: transparent; color: var(--danger); border: 2px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border: 2px solid var(--card-border); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: .32rem .85rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---------- Formularios ---------- */
label { display: block; margin-bottom: .9rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
input, select, textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .75rem;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--hh-gray-300);
    border-radius: var(--hh-radius-sm);
    font-size: .95rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-width: 0; }
.form-narrow { max-width: 640px; }

/* ---------- Login ---------- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem;
    background:
        radial-gradient(circle at 74% 22%, rgba(31, 167, 160, .14), transparent 30%),
        radial-gradient(circle at 92% 68%, rgba(255, 122, 89, .12), transparent 32%),
        var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg); padding: 2.2rem; box-shadow: var(--hh-shadow-md); }
.brand { text-align: center; margin-bottom: 1.6rem; }
.brand-icon { font-size: 2.6rem; }
.brand-logo { display: block; height: 56px; width: auto; margin: 0 auto; }
.brand h1 { font-size: 1.6rem; margin-top: .6rem; }
.tagline { color: var(--muted); font-size: .88rem; }
.auth-help { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.auth-link { display: block; margin-top: 1rem; color: var(--primary); font-size: .88rem; font-weight: 700; text-align: center; text-decoration: none; }
.auth-link:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Alertas / badges / toast ---------- */
.alert { padding: .8rem 1rem; border-radius: var(--hh-radius-sm); margin: .8rem 0; font-size: .92rem; border-left: 4px solid; }
.alert-error { background: rgba(182, 70, 59, .08); border-color: var(--danger); color: var(--danger); }
.alert-warn { background: rgba(169, 105, 24, .08); border-color: var(--warn); color: var(--warn); }
.alert-ok { background: rgba(36, 122, 90, .08); border-color: var(--ok); color: var(--ok); }
.alert-info { background: rgba(38, 108, 145, .08); border-color: var(--info); color: var(--info); }

.badge { display: inline-block; padding: .18rem .65rem; border-radius: var(--hh-radius-pill); font-size: .74rem; font-weight: 700;
    background: var(--card-border); color: var(--text); text-transform: capitalize; }
.badge-admin { background: var(--primary); color: #fff; }
.badge-seller { background: var(--card-border); }
.badge-completed { background: rgba(36, 122, 90, .14); color: var(--ok); }
.badge-in_progress { background: rgba(169, 105, 24, .14); color: var(--warn); }
.badge-abandoned { background: rgba(182, 70, 59, .14); color: var(--danger); }
.badge-score { background: rgba(31, 167, 160, .14); color: var(--accent); }
.badge-test { background: rgba(23, 55, 94, .14); color: var(--primary); }
.badge-org { background: rgba(23, 55, 94, .12); color: var(--primary); text-transform: none; }
.badge-principal { background: var(--primary); color: #fff; text-transform: none; }
.badge-payer { background: rgba(169, 105, 24, .16); color: var(--warn); text-transform: none; }
.org-cell {
    display: flex; align-items: center; gap: .7rem; min-width: 12rem;
    margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit;
    text-align: left; cursor: pointer;
}
.org-cell__icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: rgba(23, 55, 94, .1); font-size: 1.1rem;
}
.org-cell__info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.org-cell__info strong { font-size: .93rem; line-height: 1.25; }
.org-cell__info small { color: var(--muted); font-size: .8rem; }
.org-cell:hover .org-cell__info strong,
.org-cell:focus-visible .org-cell__info strong {
    color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
}
.orgs-table__center { text-align: center; }
.orgs-table__actions-col { width: 3.2rem; }
.services-table__actions-col { width: 3.2rem; }
.commercial-table__actions-col { width: 3.2rem; }
.org-user-count {
    margin: 0; padding: 0; background: none; border: 0; color: var(--primary);
    font: inherit; font-weight: 700; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.org-user-count.is-full { color: var(--danger, #d64545); }
.org-people-roles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem; margin: 0 0 1.1rem;
}
.org-people-role {
    padding: .85rem 1rem; border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-md, 12px); background: var(--bg-soft);
}
.org-people-role small {
    display: block; margin-bottom: .25rem; color: var(--muted);
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.org-people-role strong { display: block; }
.org-people-role span { color: var(--muted); font-size: .88rem; }
.org-people-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
@media (max-width: 640px) {
    .org-people-roles { grid-template-columns: 1fr; }
}
.badge-lang { background: rgba(31, 167, 160, .16); color: var(--accent); text-transform: none; }
.contract-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.contract-tabs .active { background:var(--primary); color:#fff; }
.contract-finder { margin-top: 1.2rem; }
.contract-finder__search { display: grid; gap: .4rem; font-weight: 700; }
.contract-finder__search input { font-weight: 400; font-size: 1.05rem; padding: .75rem 1rem; }
.contract-finder__results { margin-top: 1rem; }
.contract-hits { display: grid; gap: .55rem; }
.contract-hits h3 { margin: .55rem 0 .15rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contract-hit { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; width: 100%; text-align: left; padding: .85rem 1rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-soft); cursor: pointer; font: inherit; color: inherit; }
.contract-hit:hover, .contract-hit:focus-visible { border-color: var(--primary); outline: none; }
.contract-hit small { color: var(--muted); display: block; font-weight: 400; }
.contract-hit__meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.contract-account { margin-top: 1.2rem; }
.contract-account__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.contract-account__head h2 { margin: 0; }
.contract-bucket { margin-top: 1.3rem; }
.contract-bucket h3 { margin: 0 0 .65rem; }
.contract-card-list { display: grid; gap: .75rem; }
.contract-card { padding: 1rem 1.1rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-soft); display: grid; gap: .55rem; }
.contract-card header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.contract-card header h4 { margin: .1rem 0 0; }
.contract-card header small { color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.contract-card__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.contract-people { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.contract-people button { font: inherit; background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; text-align: left; }
.contract-people button:hover { text-decoration: underline; }
.contract-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px auto; gap: .5rem; align-items: end; margin-bottom: .55rem; }
.contract-editor { max-width: min(860px, calc(100vw - 2rem)); min-width: 0; min-inline-size: 0; }
.check-row { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); min-width: 0; }
.check-row input { width: auto; margin: 0; flex: 0 0 auto; }
.assign-check { align-self: end; margin-bottom: .9rem; padding-bottom: .35rem; }
.scope-picks { border: 0; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; min-width: 0; }
.scope-picks legend { font-weight: 700; margin-bottom: .55rem; color: var(--text); }
.scope-pick { position: relative; display: grid; gap: .25rem; margin: 0; padding: .85rem .9rem; min-width: 0; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--bg-soft); cursor: pointer; color: var(--text); font-weight: 400; overflow-wrap: anywhere; }
.scope-pick strong { display: block; font-size: 1rem; }
.scope-pick span { color: var(--muted); font-size: .82rem; font-weight: 400; line-height: 1.35; }
.scope-pick:has(input:checked) { border-color: var(--primary); background: rgba(23, 55, 94, .06); }
.scope-pick input { position: absolute; opacity: 0; pointer-events: none; }
.billing-box { margin: 1rem 0; border: 1px solid var(--card-border); border-radius: var(--radius); padding: .35rem .95rem .95rem; background: var(--bg-soft); min-width: 0; }
.billing-box > summary { cursor: pointer; font-weight: 700; padding: .6rem 0; }
.billing-box .muted { margin-top: 0; }
.badge-account-active { background: rgba(36, 122, 90, .14); color: var(--ok); text-transform: none; }
.badge-account-pending_payment,
.badge-account-paused_payment { background: rgba(169, 105, 24, .14); color: var(--warn); text-transform: none; }
.badge-account-cancelled,
.badge-account-resigned { background: rgba(182, 70, 59, .14); color: var(--danger); text-transform: none; }
.billing-detail-grid { display: grid; gap: .85rem; }
.billing-detail-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.billing-notice { border-color: rgba(169, 105, 24, .35); background: rgba(169, 105, 24, .08); }
.suggest-field { position: relative; min-width: 0; }
.suggest-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - .35rem); margin: 0; padding: .25rem; list-style: none; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--hh-shadow-md); max-height: 240px; overflow: auto; }
.suggest-list button { display: grid; gap: .1rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .55rem .65rem; border-radius: var(--hh-radius-sm); font: inherit; color: inherit; cursor: pointer; }
.suggest-list button:hover, .suggest-list button.is-on { background: var(--bg-soft); }
.suggest-list small { color: var(--muted); }
.assign-found { margin: -.4rem 0 .9rem; padding: .55rem .75rem; border-radius: var(--hh-radius-sm); background: rgba(36, 122, 90, .08); color: var(--ok); font-size: .88rem; }
.family-child-rows { display: grid; gap: .55rem; margin: .4rem 0 .7rem; }
.family-child-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(8rem, .9fr) auto; gap: .5rem; align-items: end; }
.family-child-row .btn { margin-bottom: .9rem; }
@media (max-width: 720px) {
    .contract-line { grid-template-columns: 1fr 1fr; }
    .contract-hit { flex-direction: column; }
    .contract-hit__meta { justify-content: flex-start; }
    .scope-picks { grid-template-columns: 1fr; }
    .family-child-row { grid-template-columns: 1fr; }
}
.badge-diff-inicial { background: rgba(36, 122, 90, .14); color: var(--ok); }
.badge-diff-intermedio { background: rgba(31, 167, 160, .14); color: var(--accent); }
.badge-diff-avanzado { background: rgba(169, 105, 24, .14); color: var(--warn); }
.badge-diff-extremo { background: rgba(182, 70, 59, .14); color: var(--danger); }

.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--hh-night); border: 1px solid var(--hh-night); color: var(--hh-ivory);
    padding: .7rem 1.3rem; border-radius: var(--hh-radius-md); box-shadow: var(--hh-shadow-md);
    opacity: 0; pointer-events: none; transition: all .25s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { border-color: var(--danger); background: var(--danger); color: #fff; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.stat-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 1.1rem; text-align: center; }
.stat-num { display: block; font-family: var(--hh-font-display); font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--muted); font-size: .82rem; }

/* ---------- Escenarios ---------- */
.hero { margin-bottom: .5rem; }
.hero p { color: var(--muted); max-width: 700px; }
.hero--learn { margin: .15rem 0 1.5rem; }
.hero--learn h1 { font-size: clamp(2.35rem, 5vw, 3.35rem); line-height: 1.08; margin-bottom: .4rem; }
.hero--learn p { font-size: 1.08rem; max-width: 34rem; }

/* ---------- Bienvenida del área ya contratada ---------- */
.learn-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: .15rem 0 2rem;
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    border-radius: 28px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--hh-shadow-sm);
}
.learn-hero__copy h1 {
    margin: 0 0 .6rem;
    font-family: var(--hh-font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    font-weight: 600;
}
.learn-hero__tagline {
    margin: 0 0 1.15rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 32rem;
}
.learn-hero__features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem 1.8rem;
    margin: 0 0 1.2rem;
    padding: 0;
}
.learn-hero__features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 15rem;
}
.learn-hero__features li strong { display: block; font-size: .88rem; line-height: 1.3; }
.learn-hero__features li small { display: block; color: var(--muted); font-size: .78rem; margin-top: .1rem; }
.learn-hero__feature-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .88rem;
    flex: 0 0 auto;
}
.learn-hero__feature-icon--green { background: rgba(31, 167, 160, .14); color: #16857f; }
.learn-hero__feature-icon--blue { background: rgba(38, 108, 145, .14); color: #266c91; }
.learn-hero__feature-icon--purple { background: rgba(122, 107, 176, .14); color: #6b5aa8; }
.learn-hero__tip {
    margin: 0;
    padding: .7rem .9rem;
    background: rgba(31, 167, 160, .08);
    border: 1px dashed rgba(31, 167, 160, .35);
    border-radius: 12px;
    font-size: .86rem;
    color: var(--text);
}
.learn-hero__visual { position: relative; }
.learn-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
}
.learn-hero__badge {
    position: absolute;
    right: 4%;
    bottom: 8%;
    display: flex;
    align-items: center;
    gap: .7rem;
    max-width: 15rem;
    padding: .85rem 1rem;
    background: var(--primary);
    color: #fff;
    border-radius: 16px;
    box-shadow: var(--hh-shadow-md);
}
.learn-hero__badge-icon { font-size: 1.3rem; flex: 0 0 auto; }
.learn-hero__badge strong { display: block; font-size: .84rem; line-height: 1.25; }
.learn-hero__badge p { margin: .15rem 0 0; font-size: .74rem; opacity: .85; line-height: 1.3; }
@media (max-width: 860px) {
    .learn-hero { grid-template-columns: 1fr; }
    .learn-hero__visual { order: -1; max-width: 420px; margin: 0 auto; }
    .learn-hero__badge { position: static; margin-top: -1.5rem; max-width: none; }
}
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.scenario-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 1.3rem; display: flex; flex-direction: column; gap: .4rem; transition: border-color .15s, transform .15s, box-shadow .15s; }
.scenario-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--hh-shadow-md); }
.scenario-card.inactive { opacity: .6; }
.scenario-top { display: flex; gap: .4rem; flex-wrap: wrap; }
.scenario-customer { font-size: .88rem; color: var(--muted); }
.scenario-desc { font-size: .88rem; color: var(--muted); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scenario-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; gap: .5rem; flex-wrap: wrap; }

.quest-board-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 .2rem; }
.quest-board-progress { margin: 0; color: var(--muted); }
.quest-board-progress strong { color: var(--text); }
.quest-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.quest-filter { border: 1px solid var(--card-border); background: var(--card); color: var(--text); border-radius: var(--hh-radius-pill); padding: .28rem .75rem; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.quest-filter:hover { border-color: var(--primary); }
.quest-filter.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.quest-stamp { display: inline-block; padding: .18rem .7rem; border-radius: var(--hh-radius-pill); font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.quest-stamp--not_started { background: rgba(23, 55, 94, .1); color: var(--primary); }
.quest-stamp--started { background: rgba(169, 105, 24, .16); color: var(--warn); }
.quest-stamp--completed { background: rgba(36, 122, 90, .16); color: var(--ok); }
.scenario-card.is-todo { border-color: rgba(23, 55, 94, .22); }
.scenario-card.is-play { border-color: rgba(169, 105, 24, .45); box-shadow: 0 0 0 1px rgba(169, 105, 24, .12); }
.scenario-card.is-done { border-color: rgba(36, 122, 90, .38); background: linear-gradient(180deg, rgba(36, 122, 90, .06), var(--card) 42%); }
.scenario-card.is-done .scenario-actions .btn-primary { background: var(--ok); border-color: var(--ok); }
.page-head-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.page-head-actions .course-org-switcher select { margin-top: 0; }
.print-only { display: none; }

/* ---------- Catálogo: filtros a la izquierda + listado ---------- */
.catalog-browse {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.3rem;
}
.catalog-browse--courses {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}
.catalog-filters {
    position: sticky;
    top: 4.6rem;
    max-height: calc(100vh - 5.4rem);
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg);
    padding: 1.05rem 1.1rem 1.2rem;
    box-shadow: var(--hh-shadow-sm);
}
.catalog-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .85rem;
}
.catalog-filters__head h2 {
    margin: 0;
    font-size: 1.05rem;
}
.catalog-filters fieldset {
    border: 0;
    margin: 0 0 .95rem;
    padding: 0;
}
.catalog-filters legend {
    padding: 0;
    margin-bottom: .4rem;
    font-size: .86rem;
    font-weight: 700;
    color: var(--muted);
}
.catalog-filters label { margin-bottom: .75rem; }
.catalog-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.catalog-chip-label {
    flex: 1 1 100%;
    margin: .35rem 0 .05rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.catalog-chip {
    border: 1px solid var(--card-border);
    background: var(--bg-soft);
    color: var(--text);
    border-radius: var(--hh-radius-pill);
    padding: .28rem .7rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.catalog-chip:hover { border-color: var(--primary); }
.catalog-chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.catalog-toolbar p { margin: 0; }
.catalog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.2rem;
}
.catalog-pager .hh-page {
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--text);
}
.catalog-pager .hh-page:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.users-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem 1.2rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}
.users-toolbar > p { margin: 0; font-size: .9rem; }
.users-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem;
}
.users-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
}
.users-toolbar__field span {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.users-toolbar__field select {
    margin: 0;
    min-width: 11rem;
    font-size: .88rem;
    font-weight: 600;
}

/* ---------- Tabla de usuarios ---------- */
.users-table { width: 100%; table-layout: auto; }
.users-table th, .users-table td { vertical-align: middle; }
.users-table__center { text-align: center; }
.users-table__actions-col { width: 3.2rem; }
.users-table td.nowrap { white-space: nowrap; }
@media (max-width: 960px) {
    .users-table td.nowrap { white-space: normal; }
}

.user-cell { display: flex; align-items: center; gap: .7rem; min-width: 12rem; }
.user-cell__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(23, 55, 94, .1);
    color: var(--primary);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.user-cell__info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.user-cell__info strong { font-size: .93rem; line-height: 1.25; }
.user-cell__info small { color: var(--muted); font-size: .8rem; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .7rem .22rem .55rem;
    border-radius: var(--hh-radius-pill);
    font-size: .78rem;
    font-weight: 700;
}
.status-pill::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}
.status-pill.is-active,
.status-pill.is-ok { background: rgba(36, 122, 90, .12); color: var(--ok); }
.status-pill.is-inactive,
.status-pill.is-danger { background: rgba(182, 70, 59, .1); color: var(--danger); }
.status-pill.is-warn { background: rgba(169, 105, 24, .14); color: var(--warn); }
.status-pill.is-info { background: rgba(23, 55, 94, .1); color: var(--primary); }
.status-pill.is-neutral { background: var(--bg-soft); color: var(--muted); }
.status-pill.is-neutral::before { display: none; }

/* Menú de acciones por fila (evita amontonar botones sueltos). */
.row-menu { position: relative; display: inline-block; }
.row-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.row-menu__toggle:hover,
.row-menu.is-open .row-menu__toggle {
    background: var(--bg-soft);
    border-color: var(--card-border);
    color: var(--text);
}
.row-menu__list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 30;
    flex-direction: column;
    gap: .05rem;
    min-width: 13rem;
    padding: .4rem;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-md);
    box-shadow: var(--hh-shadow-md);
}
.row-menu.is-open .row-menu__list { display: flex; }
.row-menu__list button,
.row-menu__list a {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.row-menu__list a:hover,
.row-menu__list a:focus { text-decoration: none; color: var(--text); }
.row-menu__list button:hover,
.row-menu__list a:hover { background: var(--bg-soft); }
.row-menu__list button.is-danger { color: var(--danger); }
.row-menu__list button.is-danger:hover { background: rgba(182, 70, 59, .08); }
.row-menu__list button:disabled { opacity: .6; cursor: default; }

.profile-settings__form {
    display: grid;
    gap: .9rem;
    max-width: 34rem;
}
.profile-settings__meta {
    display: grid;
    gap: .55rem;
    margin: .2rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-md);
    background: var(--bg-soft);
}
.profile-settings__meta div {
    display: grid;
    grid-template-columns: minmax(8rem, 34%) 1fr;
    gap: .75rem;
}
.profile-settings__meta dt {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}
.profile-settings__meta dd {
    margin: 0;
}
.profile-settings__actions {
    display: flex;
    justify-content: flex-start;
    gap: .6rem;
    margin-top: .2rem;
}

.topbar-account__menu a:first-child {
    border-top: none;
}

.scenario-list { display: flex; flex-direction: column; gap: 1.35rem; }
.scenario-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .55rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--card-border);
}
.scenario-group__head h3 {
    margin: 0;
    font-family: var(--hh-font-display);
    font-size: 1.15rem;
}
.scenario-group__head span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}
.scenario-group__list { display: flex; flex-direction: column; gap: .7rem; }
.scenario-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: .95rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.scenario-row:hover { border-color: var(--primary); box-shadow: var(--hh-shadow-sm); }
.scenario-row.inactive { opacity: .62; }
.scenario-row.is-todo { border-color: rgba(23, 55, 94, .22); }
.scenario-row.is-play { border-color: rgba(169, 105, 24, .45); }
.scenario-row.is-done { border-color: rgba(36, 122, 90, .38); background: linear-gradient(180deg, rgba(36, 122, 90, .06), var(--card) 48%); }
.scenario-row__portrait {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.scenario-row__portrait img { width: 100%; height: 100%; object-fit: cover; }
.scenario-row__title { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.scenario-row__title h3 { margin: 0; font-size: 1.05rem; }
.scenario-row__who { margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }
.scenario-row__desc {
    margin: .35rem 0 .5rem;
    font-size: .88rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scenario-row__meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.scenario-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    min-width: 0;
}
.scenario-row__actions-split {
    width: 1px;
    height: 22px;
    margin: 0 .2rem;
    background: var(--card-border);
}
.scenario-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--primary);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.scenario-icon-btn::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--hh-night);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .22rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 3;
}
.scenario-icon-btn svg { width: 17px; height: 17px; display: block; }
.scenario-icon-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--hh-shadow-sm);
    border-color: var(--primary);
    background: var(--bg-soft);
}
.scenario-icon-btn:hover::after,
.scenario-icon-btn:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.scenario-icon-btn--play {
    width: 40px;
    height: 40px;
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
}
.scenario-icon-btn--play:hover {
    background: var(--coral-hover);
    border-color: var(--coral-hover);
    color: #fff;
}
.scenario-icon-btn--danger { color: var(--danger); }
.scenario-icon-btn--danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

@media (max-width: 980px) {
    .catalog-browse, .catalog-browse--courses { grid-template-columns: 1fr; }
    .catalog-filters { position: static; max-height: none; }
    .scenario-row { grid-template-columns: 56px minmax(0, 1fr); }
    .scenario-row__portrait { width: 56px; height: 56px; }
    .scenario-row__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* ---------- Modales ---------- */
/* `margin: auto` es lo que centra un <dialog> abierto con showModal(); hay que
   repetirlo aquí porque el reset global (* { margin: 0 }) anula el del navegador. */
/* Sin padding inferior: lo aporta la barra de acciones, que va pegada al pie
   para que el contenido no se vea asomar por debajo al desplazarse. */
.modal { border: 1px solid var(--card-border); border-radius: var(--hh-radius-lg); background: var(--card); color: var(--text);
    padding: 1.6rem 1.6rem 0; width: 92%; max-width: 480px; box-shadow: var(--hh-shadow-lg);
    margin: auto; max-height: 88vh; min-width: 0; min-inline-size: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.modal-wide { max-width: min(720px, calc(100vw - 2rem)); }
.modal-service-form {
    width: min(920px, calc(100vw - 2rem));
    max-width: min(920px, calc(100vw - 2rem));
}
.service-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
}
.service-form-layout__col {
    display: grid;
    gap: .85rem;
    align-content: start;
    min-width: 0;
}
.service-form-layout__col h3 {
    margin: 0 0 .15rem;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.service-form-layout label { display: grid; gap: .35rem; }
.service-form-layout .form-row { gap: .85rem; }
.service-entitlements-panel {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    display: grid;
    gap: .75rem;
}
.service-entitlements-panel h3 {
    margin: 0;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.service-entitlements-list { display: grid; gap: .55rem; }
.service-entitlement-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(160px, 1.4fr) minmax(120px, .9fr) auto;
    gap: .5rem;
    align-items: center;
}
.service-catalog-quotas {
    display: grid;
    gap: .55rem;
    padding: .85rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg, #fff) 88%, #eef6f4);
}
.service-catalog-quotas h4 {
    margin: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.service-catalog-quotas__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}
.service-catalog-quotas__grid label { display: grid; gap: .3rem; font-size: .92rem; }
.service-billing-offer {
    display: grid;
    gap: .55rem;
    padding: .85rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg, #fff) 88%, #f4f0ee);
}
.service-billing-offer h4 {
    margin: .35rem 0 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.service-billing-offer [data-prepaid-block] h4 { margin-top: 0; }
@media (max-width: 720px) {
    .service-entitlement-row { grid-template-columns: 1fr; }
    .service-catalog-quotas__grid { grid-template-columns: 1fr; }
}
.modal form { min-width: 0; max-width: 100%; }
.modal input, .modal select, .modal textarea { min-width: 0; max-width: 100%; }
.modal::backdrop { background: rgba(11, 29, 42, .6); backdrop-filter: blur(3px); }
.modal h2 { margin-bottom: 1rem; }

/* La barra de acciones queda siempre visible al pie del modal: en un formulario
   largo, Cancelar/Guardar deben alcanzarse sin tener que desplazarse hasta el final. */
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem;
    position: sticky; bottom: 0; z-index: 1;
    margin: 1.2rem -1.6rem 0; padding: .9rem 1.6rem 1.6rem;
    background: var(--card); border-top: 1px solid var(--card-border); }

@media (max-width: 720px) {
    .modal { width: calc(100% - 1.6rem); max-height: 92vh; padding: 1.2rem 1.2rem 0; }
    .modal-actions { margin: 1rem -1.2rem 0; padding: .8rem 1.2rem 1.2rem; }
    .modal-actions .btn { flex: 1; }
    .service-form-layout { grid-template-columns: 1fr; }
}

/* ---------- Simulador ---------- */
.mode-select { margin-top: 1.4rem; border-top: 1px solid var(--card-border); padding-top: 1.2rem; }
.mode-buttons { display: flex; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }
.btn-mode { flex: 1; min-width: 220px; padding: 1.1rem; font-size: 1.05rem; background: var(--bg-soft);
    border: 2px solid var(--card-border); border-radius: var(--hh-radius-md); line-height: 1.4; }
.btn-mode small { color: var(--muted); font-weight: 400; }
.btn-mode:hover { border-color: var(--primary); background: var(--card); }

.play-area { display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 480px; }
.play-header { order: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--card-border); }
.play-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* Retrato grande estilo videollamada: la contraparte con la que hablas */
.customer-hero { display: flex; align-items: center; gap: 1rem; }
.hero-portrait { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px;
    flex-shrink: 0; border-radius: 50%; background: var(--bg-soft); border: 3px solid var(--card-border);
    font-size: 2.6rem; overflow: hidden; transition: border-color .2s; }
.hero-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hero-info { display: flex; flex-direction: column; gap: .15rem; }
.hero-info strong { font-family: var(--hh-font-display); font-weight: 600; font-size: 1.35rem; }
.hero-info small { display: block; font-size: .88rem; }

.customer-hero.talking .hero-portrait { border-color: var(--accent); animation: pulse-hero 1.3s infinite; }
@keyframes pulse-hero {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 167, 160, .5); }
    70% { box-shadow: 0 0 0 14px rgba(31, 167, 160, 0); }
}

@media (max-width: 720px) {
    .hero-portrait { width: 68px; height: 68px; font-size: 2rem; }
    .hero-info strong { font-size: 1.1rem; }
}

.chat-box { order: 2; flex: 1; overflow-y: auto; padding: 1.1rem .4rem; display: flex; flex-direction: column; gap: .8rem; }
.bubble { max-width: 78%; padding: .7rem 1rem; border-radius: var(--hh-radius-md); font-size: .95rem; white-space: pre-wrap; }
.bubble-meta { font-size: .74rem; color: var(--muted); margin-bottom: .25rem; display: flex; gap: .5rem; justify-content: space-between; }
.bubble-ai { align-self: flex-start; background: var(--hh-night); color: var(--hh-ivory); border-bottom-left-radius: 4px; }
.bubble-ai .bubble-meta { color: rgba(245, 241, 235, .68); }
.bubble-visual { margin-top: .85rem; display: grid; gap: .55rem; }
.bubble-visual-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center;
    padding: .65rem; border-radius: var(--hh-radius-sm); background: rgba(255, 255, 255, .96); color: var(--text); }
.bubble-visual-step--stacked { grid-template-columns: minmax(0, 1fr) 120px; }
.bubble-visual-assets { display: flex; flex-wrap: wrap; gap: .45rem; }
.bubble-asset { min-width: 112px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    align-items: center; gap: .08rem .4rem; padding: .42rem .55rem; border: 1px solid rgba(31, 167, 160, .28);
    border-radius: var(--hh-radius-sm); background: rgba(31, 167, 160, .1); }
.bubble-asset > span { grid-row: 1 / 3; font-size: 1.45rem; line-height: 1; }
.bubble-asset strong { font-size: .9rem; line-height: 1.1; }
.bubble-asset small { color: var(--muted); font-size: .82rem; }
.bubble-equation { min-width: 150px; padding: .45rem .6rem; border-radius: var(--hh-radius-sm); background: var(--bg-soft); text-align: center; }
.bubble-equation strong { display: block; font-family: var(--hh-font-display); font-size: 1.45rem; color: var(--primary); white-space: nowrap; }
.bubble-equation span { display: block; color: var(--muted); font-size: .74rem; line-height: 1.2; }
.bubble-equation-ok { background: rgba(36, 122, 90, .12); }
.bubble-coin-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; min-width: 130px; }
.coin-mini { width: 28px; height: 28px; font-size: .7rem; }
.place-value { display: grid; gap: .2rem; max-width: 360px; }
.place-value__head, .place-value > div:not(.place-value__line) { display: grid; grid-template-columns: 72px 72px minmax(80px, 1fr); align-items: center; gap: .35rem; }
.place-value__head span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.place-value strong { display: inline-grid; min-height: 36px; place-items: center; border-radius: var(--hh-radius-sm); background: rgba(31, 167, 160, .12);
    color: var(--primary); font-family: var(--hh-font-display); font-size: 1.35rem; }
.place-value strong.is-ok, .vertical-addition strong.is-ok { background: rgba(36, 122, 90, .14); color: var(--ok); box-shadow: inset 0 0 0 2px rgba(36, 122, 90, .18); }
.place-value strong.is-wrong, .vertical-addition strong.is-wrong { background: rgba(182, 70, 59, .14); color: var(--danger); box-shadow: inset 0 0 0 2px rgba(182, 70, 59, .22); }
.place-value small { color: var(--muted); font-size: .8rem; }
.place-value__line { height: 2px; width: 150px; background: var(--text); opacity: .4; }
.vertical-addition { display: grid; justify-items: end; gap: .05rem; padding: .5rem .7rem; border-radius: var(--hh-radius-sm); background: var(--bg-soft);
    font-family: var(--hh-font-display); color: var(--primary); font-size: 1.45rem; }
.vertical-addition i { display: block; width: 72px; height: 2px; background: var(--primary); opacity: .55; }
.vertical-addition strong { font-size: 1.65rem; }
.subtraction-step { margin-top: .75rem; padding: 1rem 1.15rem; border-radius: .9rem; background: #f7f5f2; color: #17395f; max-width: 22rem; }
.subtraction-step__head, .subtraction-step__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; text-align: right; }
.subtraction-step__head { color: #5d625f; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; text-align: center; margin-bottom: .35rem; }
.subtraction-step__row strong { padding: .3rem .45rem; font-family: Georgia, serif; font-size: 1.35rem; }
.subtraction-step > i { display: block; border-top: 2px solid #8290a0; margin: .25rem 0 .35rem; }
.subtraction-step__result strong { color: #6b7277; background: #fff; border-radius: .4rem; }
.subtraction-step__hint { display: block; margin-top: .65rem; color: #5d625f; font-size: .78rem; line-height: 1.35; }
.count-forward-step { margin-top: .75rem; padding: 1rem; border-radius: .9rem; background: #f7f5f2; }
.count-forward-step__line { display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; color: #17395f; }
.count-forward-step__line strong { padding: .35rem .55rem; border-radius: .45rem; background: #fff; font-family: Georgia, serif; font-size: 1.25rem; }
.count-forward-step__line span { color: var(--primary); font-weight: 700; }
[data-cue-state*="unidades"] .place-value__head span:nth-child(2),
[data-cue-state*="unidades"] .place-value strong:nth-child(2n),
[data-cue-state*="units"] .place-value__head span:nth-child(2) { background: rgba(36, 122, 90, .18); color: var(--ok); border-radius: .35rem; }
[data-cue-state*="decenas"] .place-value__head span:first-child,
[data-cue-state*="decenas"] .place-value strong:nth-child(2n+1),
[data-cue-state*="tens"] .place-value__head span:first-child { background: rgba(36, 122, 90, .18); color: var(--ok); border-radius: .35rem; }
.cue-highlight-units .place-value > div:nth-child(2) strong:nth-child(2),
.cue-highlight-units .place-value > div:nth-child(3) strong:nth-child(2),
.cue-highlight-units .place-value > div:nth-child(5) strong:nth-child(2),
.cue-highlight-tens .place-value > div:nth-child(2) strong:first-child,
.cue-highlight-tens .place-value > div:nth-child(3) strong:first-child,
.cue-highlight-tens .place-value > div:nth-child(5) strong:first-child,
.cue-highlight-result .vertical-addition strong,
.cue-highlight-result .subtraction-step__result strong { animation: visualCuePulse 1.2s ease-in-out 2; }
@keyframes visualCuePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(36, 122, 90, 0); } 50% { box-shadow: 0 0 0 5px rgba(36, 122, 90, .28); background: rgba(36, 122, 90, .18); } }
.bubble-seller { align-self: flex-end; background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-bottom-right-radius: 4px; }
.bubble-system { align-self: center; background: rgba(169, 105, 24, .1); border: 1px solid var(--warn);
    color: var(--warn); font-size: .85rem; }

.chat-input { order: 3; display: flex; gap: .7rem; padding-top: .9rem; border-top: 1px solid var(--card-border); }
.chat-input textarea { flex: 1; margin-top: 0; }

.learning-visual { order: 1; margin: .9rem 0 0; padding: .9rem; border: 1px solid rgba(31, 167, 160, .22);
    border-radius: var(--hh-radius-md); background: linear-gradient(135deg, rgba(31, 167, 160, .08), rgba(255, 255, 255, .92));
    box-shadow: var(--hh-shadow-xs); }
.learning-visual--inline { order: initial; align-self: flex-start; width: min(760px, 92%); margin: -.35rem 0 .25rem 1.2rem;
    padding: .75rem; border-left: 3px solid var(--accent); }
.learning-visual__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.learning-visual__head h3 { margin: .1rem 0 0; font-size: 1.05rem; }
.learning-visual__head small { max-width: 420px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.learning-visual__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.store-board { display: grid; grid-template-columns: minmax(0, 1.4fr) 160px; gap: .8rem; align-items: start; }
.store-items { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: .55rem; }
.learning-visual--inline .store-items { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.store-item { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
    border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); background: var(--card); color: var(--text);
    cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.store-item:hover { transform: translateY(-1px); border-color: var(--accent); }
.store-item.is-selected { background: rgba(31, 167, 160, .14); border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(31, 167, 160, .12); }
.store-item__icon { font-size: 1.7rem; line-height: 1; }
.store-item small { color: var(--muted); }
.store-register { display: grid; grid-template-columns: 1fr auto; gap: .35rem .6rem; padding: .75rem; border-radius: var(--hh-radius-sm);
    background: var(--hh-night); color: var(--hh-ivory); }
.store-register span { color: rgba(245, 241, 235, .72); font-size: .78rem; }
.store-register strong { font-family: var(--hh-font-display); font-size: 1.2rem; }
.store-register strong.is-active { color: var(--hh-coral); }
.coin-tray { grid-column: 1 / -1; display: flex; min-height: 42px; align-items: center; gap: .35rem; flex-wrap: wrap;
    padding: .45rem; border-radius: var(--hh-radius-sm); background: rgba(255, 255, 255, .7); }
.coin { --i: 0; display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 50%;
    background: #f2c94c; border: 2px solid #c99a18; color: #513b03; font-weight: 800; font-size: .78rem;
    animation: coin-in .28s ease both; animation-delay: calc(var(--i) * 35ms); }
.coin-tray.is-counting .coin { animation-name: coin-count; }
@keyframes coin-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes coin-count { 0% { transform: translateY(0); } 45% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.pizza-board, .area-board { display: grid; grid-template-columns: auto minmax(160px, 1fr); gap: 1rem; align-items: center; }
.pizza { position: relative; display: grid; grid-template-columns: repeat(var(--slices), 1fr); width: min(100%, 420px); max-width: 420px;
    min-height: 120px; overflow: hidden; border: 3px solid #c86f2e; border-radius: var(--hh-radius-md); background: #ffd28f; }
.pizza-slice { min-height: 120px; border: 0; border-right: 1px dashed rgba(120, 62, 12, .35); background: transparent; cursor: pointer; }
.pizza-slice:last-child { border-right: 0; }
.pizza-slice.is-filled { background: linear-gradient(180deg, #ff9f43, #ffcf75); animation: visual-pop .2s ease both; }
.fraction-readout strong, .area-readout strong, .group-readout strong { display: block; font-family: var(--hh-font-display); font-size: 1.7rem; color: var(--primary); }
.fraction-readout span, .area-readout span, .group-readout span { color: var(--muted); font-size: .9rem; }
.area-grid { display: grid; grid-template-columns: repeat(var(--cols), 32px); grid-template-rows: repeat(var(--rows), 32px); gap: 3px; }
.area-cell { width: 32px; height: 32px; border-radius: 5px; background: rgba(31, 167, 160, .16); border: 1px solid rgba(31, 167, 160, .2); }
.area-cell.is-edge { background: var(--hh-coral); border-color: var(--coral); animation: visual-pop .2s ease both; }
.area-cell.is-area { background: rgba(31, 167, 160, .48); animation: visual-pop .2s ease both; }
.group-board { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: .55rem; align-items: stretch; }
.object-group, .object-remainder { min-height: 92px; padding: .55rem; border-radius: var(--hh-radius-sm); background: var(--card);
    border: 1px solid var(--card-border); }
.object-group strong, .object-remainder strong { display: block; margin-bottom: .35rem; font-size: .78rem; color: var(--muted); }
.object-row { display: flex; flex-wrap: wrap; gap: .2rem; }
.object-token { --i: 0; display: inline-grid; width: 26px; height: 26px; place-items: center; border-radius: 50%;
    background: rgba(31, 167, 160, .12); animation: token-share .24s ease both; animation-delay: calc(var(--i) * 30ms); }
.object-token.is-left { background: rgba(255, 122, 89, .16); }
.object-remainder { border-color: rgba(255, 122, 89, .45); }
.group-readout { grid-column: 1 / -1; }
.generic-visual-assets { display: flex; flex-wrap: wrap; gap: .55rem; }
.generic-asset { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .65rem; border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-sm); background: var(--card); }
.generic-asset span { font-size: 1.3rem; }
@keyframes token-share { from { opacity: 0; transform: translateY(-6px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes visual-pop { from { transform: scale(.96); } to { transform: scale(1); } }

.voice-controls { order: 1; display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin: .85rem 0 .15rem; padding: .8rem 1rem; border: 1px solid rgba(31, 167, 160, .24);
    border-radius: var(--hh-radius-lg); background: linear-gradient(135deg, rgba(31, 167, 160, .11), rgba(255, 255, 255, .82));
    box-shadow: var(--hh-shadow-xs); }
.voice-turn-copy { display: flex; min-width: 0; max-width: 520px; flex-direction: column; align-items: flex-start; gap: .12rem; }
.voice-turn-kicker { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.voice-turn-copy strong { color: var(--text); font-size: 1.05rem; line-height: 1.2; }
.voice-turn-copy p { margin: 0; font-size: .82rem; line-height: 1.35; }
.voice-auto-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    align-items: center; column-gap: .55rem; min-width: 188px; margin-left: auto; cursor: pointer; }
.voice-auto-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.voice-auto-toggle__track { grid-column: 1; grid-row: 1 / 3; display: flex; width: 42px; height: 24px;
    align-items: center; padding: 3px; border-radius: 99px; background: var(--muted); transition: background .18s; }
.voice-auto-toggle__track span { width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 4px rgba(11, 29, 42, .24); transition: transform .18s; }
.voice-auto-toggle input:checked + .voice-auto-toggle__track { background: var(--accent); }
.voice-auto-toggle input:checked + .voice-auto-toggle__track span { transform: translateX(18px); }
.voice-auto-toggle input:focus-visible + .voice-auto-toggle__track { outline: 3px solid rgba(31, 167, 160, .25); outline-offset: 3px; }
.voice-auto-toggle__copy { display: contents; }
.voice-auto-toggle__copy strong { grid-column: 2; grid-row: 1; color: var(--text); font-size: .78rem; line-height: 1.2; }
.voice-auto-toggle__copy small { grid-column: 2; grid-row: 2; color: var(--muted); font-size: .68rem; line-height: 1.25; }
.mic-button { display: inline-flex; width: 86px; height: 86px; flex: 0 0 86px; flex-direction: column;
    align-items: center; justify-content: center; gap: .08rem; border-radius: 50%; border: 3px solid var(--coral);
    color: var(--hh-night); background: var(--hh-coral); cursor: pointer; box-shadow: 0 8px 22px rgba(255, 122, 89, .28);
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.mic-icon { font-size: 1.75rem; line-height: 1; }
.mic-button__label { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mic-button:hover { background: #ff8b70; transform: translateY(-1px); }
.mic-button:focus-visible { outline: 4px solid rgba(31, 167, 160, .28); outline-offset: 3px; }
.mic-button:disabled { cursor: wait; filter: grayscale(.2); opacity: .62; transform: none; box-shadow: none; }
.mic-button.listening { color: #fff; background: var(--danger); border-color: var(--danger); animation: pulse-red 1.2s infinite; }
.voice-controls[data-state="listening"] { border-color: rgba(182, 70, 59, .35); background: rgba(182, 70, 59, .08); }
.voice-controls[data-state="speaking"] { border-color: rgba(31, 167, 160, .35); }
.voice-controls[data-state="paused"] { border-color: rgba(169, 105, 24, .35); background: rgba(169, 105, 24, .08); }
.micro-operation-visual { margin-top: .75rem; padding-top: .65rem; border-top: 1px dashed rgba(31, 63, 95, .18); }
.micro-operation-host { margin-top: .65rem; }
.voice-controls[data-state="ready"] { border-color: rgba(169, 105, 24, .35); background: rgba(169, 105, 24, .08); }

.practice-briefing-modal { max-width: 660px; }
.practice-briefing-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; }
.practice-briefing-modal__head h2 { margin: .15rem 0 0; }
.practice-briefing-modal__close { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
    border: 1px solid var(--card-border); border-radius: 50%; color: var(--text); background: var(--bg-soft);
    font-size: 1.6rem; line-height: 1; cursor: pointer; }
.practice-briefing-modal__section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--card-border); }
.practice-briefing-modal__section h3 { margin-bottom: .35rem; }
.practice-briefing-modal__section p { color: var(--text); line-height: 1.55; }
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(182, 70, 59, .5); }
    50% { box-shadow: 0 0 0 16px rgba(182, 70, 59, 0); }
}

/* ---------- Modo coach (conversación + tips en vivo) ---------- */
/* Contenedor ancho para acomodar el panel lateral del coach */
main.container--wide { max-width: 1540px; width: min(100% - 2rem, 1540px); }

.play-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 1.2rem; align-items: stretch; }
.play-columns .play-area { min-width: 0; }

.coach-panel { display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 480px; overflow: hidden; }
.coach-head h3 { margin: 0 0 .15rem; }
.coach-head small { display: block; }
.coach-status { min-height: 1.2rem; font-size: .85rem; margin: .5rem 0 .2rem; }
.coach-feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; padding-right: .3rem; }

.coach-card { background: var(--bg-soft); border: 1px solid var(--card-border); border-left: 3px solid var(--accent);
    border-radius: var(--hh-radius-md); padding: .8rem .9rem; font-size: .9rem; }
.coach-card:first-of-type { border-left-color: var(--coral); box-shadow: var(--hh-shadow-xs); }
.coach-card-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; }
.coach-card p { margin: .35rem 0; }
.coach-lectura { color: var(--muted); font-style: italic; }
.coach-bien { color: var(--ok); }
.coach-mejorar { color: var(--warn); }
.coach-tips-title { font-weight: 600; margin-top: .5rem; }
.coach-tips { margin: .3rem 0 .3rem 1.2rem; }
.coach-tips li { margin: .25rem 0; }
.coach-frase { background: rgba(31, 167, 160, .1); border-radius: var(--hh-radius-sm); padding: .5rem .7rem; }

@media (max-width: 980px) {
    .play-columns { grid-template-columns: 1fr; }
    .coach-panel { height: auto; min-height: 0; max-height: 45vh; }
}

/* ---------- Práctica de frases (escuchar y repetir) ---------- */
.phrase-practice { display: block; margin-top: .6rem; }
.phrase-practice-ui { border-top: 1px dashed var(--card-border); padding-top: .6rem; }
.pp-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pp-status { font-size: .82rem; }
.pp-record.pp-recording { background: var(--danger); border-color: var(--danger); color: #fff;
    animation: pulse-red 1.2s infinite; }

.pp-result { margin-top: .7rem; }
.pp-score { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-radius: var(--hh-radius-sm); margin-bottom: .5rem; }
.pp-score strong { font-family: var(--hh-font-display); font-size: 1.6rem; }
.pp-score span { font-size: .88rem; }
.pp-great { background: rgba(36, 122, 90, .12); color: var(--ok); }
.pp-ok    { background: rgba(31, 167, 160, .12); color: var(--accent); }
.pp-low   { background: rgba(169, 105, 24, .12); color: var(--warn); }

.pp-heard { font-size: .85rem; font-style: italic; margin: .3rem 0; }
.pp-words { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.pp-word { padding: .12rem .45rem; border-radius: var(--hh-radius-sm); font-size: .88rem; cursor: help; }
.pp-word-ok  { background: rgba(36, 122, 90, .14); color: var(--ok); }
.pp-word-mid { background: rgba(169, 105, 24, .16); color: var(--warn); }
.pp-word-bad { background: rgba(182, 70, 59, .14); color: var(--danger); text-decoration: underline wavy; }
.pp-note { font-size: .76rem; }

/* En el panel del coach el espacio es angosto: controles más compactos */
.coach-card .pp-controls .btn { padding: .3rem .7rem; min-height: 34px; font-size: .82rem; }

/* ---------- Informe ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
.meta-row { display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; margin: .6rem 0; }
.transcript { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; padding-right: .4rem; }
.transcript .bubble { max-width: 92%; }

.report-content { font-size: .93rem; }
.report-content h1 { font-size: 1.3rem; margin: 1rem 0 .5rem; color: var(--accent); }
.report-content h2 { font-size: 1.05rem; margin: 1rem 0 .4rem; color: var(--primary); }
.report-content h3 { font-size: .96rem; }
.report-content ul { margin: .4rem 0 .4rem 1.3rem; }
.report-content p { margin: .5rem 0; }

.score-badge { display: inline-flex; align-items: baseline; gap: .2rem; font-family: var(--hh-font-display);
    font-size: 2.4rem; font-weight: 700; padding: .4rem 1.2rem; border-radius: var(--hh-radius-md); margin-bottom: .8rem; }
.score-badge small { font-family: var(--hh-font-body); font-size: 1rem; font-weight: 500; }
.score-high { background: rgba(36, 122, 90, .12); color: var(--ok); }
.score-mid { background: rgba(31, 167, 160, .12); color: var(--accent); }
.score-low { background: rgba(169, 105, 24, .12); color: var(--warn); }

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; gap: .6rem; }
    .form-row { grid-template-columns: 1fr; }
    .bubble { max-width: 92%; }
    .bubble-visual-step { grid-template-columns: 1fr; }
    .bubble-equation { width: 100%; }
    .bubble-coin-row { justify-content: flex-start; }
    .play-area { height: auto; }
    .chat-box { max-height: 55vh; }
    .learning-visual__head { flex-direction: column; gap: .35rem; }
    .learning-visual--inline { width: 96%; margin-left: .25rem; }
    .store-board, .pizza-board, .area-board { grid-template-columns: 1fr; }
    .store-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area-grid { grid-template-columns: repeat(var(--cols), minmax(22px, 1fr)); grid-template-rows: repeat(var(--rows), 28px); }
    .area-cell { width: auto; height: 28px; }
    .voice-controls { position: relative; z-index: 2; justify-content: flex-start; gap: .75rem;
        margin: .45rem 0 0; padding: .65rem .75rem; border-radius: 18px; flex-wrap: wrap; }
    .mic-button { width: 78px; height: 78px; flex-basis: 78px; }
    .voice-turn-copy { flex: 1; }
    .voice-turn-copy strong { font-size: .95rem; }
    .voice-turn-copy p { font-size: .76rem; }
    .voice-auto-toggle { width: 100%; min-width: 0; margin: .1rem 0 0; padding: .5rem .2rem .05rem;
        border-top: 1px solid rgba(31, 167, 160, .18); }
    .play-header-actions { gap: .35rem; }
    .play-header-actions .btn { min-height: 36px; padding: .3rem .6rem; font-size: .7rem; }
    .practice-briefing-modal { width: calc(100% - 1.2rem); }
}

/* ===== Informe interactivo ===== */
.report-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.report-toolbar { display: flex; gap: 10px; align-items: center; }
.report-toolbar select { max-width: 260px; }

.badge-sale { background: rgba(36, 122, 90, .14); color: var(--ok); }
.badge-nosale { background: rgba(182, 70, 59, .14); color: var(--danger); }
.closed-actions { text-align: center; padding: 14px; }
.closed-actions p { margin: 0 0 12px; }
.closed-actions .btn + .btn { margin-left: 8px; }
.conversation-recovery { max-width: min(560px, 94%); text-align: left; }
.conversation-recovery p { margin: 6px 0 12px; }
.conversation-recovery__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.report-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; border-bottom: 1px solid var(--card-border); padding-bottom: 10px; }
.tab-btn { background: var(--bg-soft); border: 1px solid var(--card-border); color: var(--muted);
    padding: 8px 14px; border-radius: var(--hh-radius-pill); cursor: pointer; font-size: .88rem; font-weight: 600; transition: all .15s; }
.tab-btn:hover { color: var(--text); border-color: var(--primary); }
.tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Resumen: anillo + radar */
.resumen-grid { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; }
.score-ring-wrap { text-align: center; }
.score-ring { width: 130px; height: 130px; }
.ring-anim { transition: stroke-dashoffset 1s ease; }
.ring-score { font-family: var(--hh-font-display); font-size: 36px; font-weight: 700; fill: var(--text); }
.ring-total { font-size: 13px; fill: var(--muted); }
.score-nivel { font-weight: 700; margin-top: 6px; font-size: .95rem; }
.resultado-chip { margin-top: 10px; display: inline-block; padding: 5px 12px; border-radius: var(--hh-radius-pill);
    background: var(--bg-soft); border: 1px solid var(--card-border); font-size: .85rem; }
.radar-chart { width: 100%; max-width: 440px; margin: 0 auto; display: block; }
.radar-label { font-size: 11px; fill: var(--muted); }
.radar-note { font-size: 10px; fill: var(--accent); font-weight: 700; }
.resumen-texto { font-size: 1.02rem; line-height: 1.55; margin: 14px 0; }
.radar-comments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radar-comment { background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); padding: 10px 12px; }
.radar-comment.weak { border-left: 3px solid var(--danger); }
.radar-comment.strong { border-left: 3px solid var(--ok); }
.rc-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .9rem; }
.rc-nota { color: var(--accent); font-weight: 700; }
.rc-bar { height: 5px; background: var(--card-border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.rc-bar div { height: 100%; background: linear-gradient(90deg, var(--hh-teal), var(--hh-blue), var(--hh-coral)); border-radius: 3px; }
.radar-comment p { font-size: .84rem; color: var(--muted); margin: 0; }
.frase-final { margin: 18px 0 0; padding: 14px 18px; border-left: 3px solid var(--coral);
    background: rgba(255, 122, 89, .08); border-radius: 0 var(--hh-radius-sm) var(--hh-radius-sm) 0;
    font-family: var(--hh-font-display); font-size: 1.1rem; font-style: italic; }

/* Objeciones */
.obj-summary { display: flex; gap: 14px; margin-bottom: 14px; font-size: .9rem; flex-wrap: wrap; }
.obj-ok { color: var(--ok); font-weight: 600; } .obj-mid { color: var(--warn); font-weight: 600; } .obj-bad { color: var(--danger); font-weight: 600; }
.obj-card { background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); margin-bottom: 10px; overflow: hidden; }
.obj-card summary { padding: 12px 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.obj-card summary::-webkit-details-marker { display: none; }
.obj-card.obj-ok { border-left: 3px solid var(--ok); }
.obj-card.obj-mid { border-left: 3px solid var(--warn); }
.obj-card.obj-bad { border-left: 3px solid var(--danger); }
.obj-tag { margin-left: auto; font-size: .75rem; color: var(--muted); background: var(--card); padding: 3px 10px; border-radius: var(--hh-radius-pill); border: 1px solid var(--card-border); }
.obj-body { padding: 4px 16px 14px; }
.obj-row { margin: 10px 0; line-height: 1.5; font-size: .92rem; }
.obj-who { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 3px; font-weight: 700; }
.obj-row.super { background: rgba(31, 167, 160, .08); border: 1px dashed rgba(31, 167, 160, .4);
    border-radius: var(--hh-radius-sm); padding: 10px 12px; }

/* Momento de giro */
.giro-hero { background: linear-gradient(135deg, rgba(31, 167, 160, .12), rgba(255, 122, 89, .08));
    border: 1px solid rgba(23, 55, 94, .25); border-radius: var(--hh-radius-md); padding: 20px; margin-bottom: 20px; }
.giro-titulo { font-family: var(--hh-font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 14px; }
.giro-quote { padding: 12px 14px; border-radius: var(--hh-radius-sm); margin: 8px 0; line-height: 1.5; }
.giro-quote.vendedor { background: rgba(23, 55, 94, .12); }
.giro-quote.cliente { background: var(--card); border: 1px solid var(--card-border); }
.giro-arrow { text-align: center; color: var(--accent); font-size: 1.2rem; }
.giro-explica { margin-top: 12px; line-height: 1.55; }
.giro-formula { margin-top: 10px; padding: 12px 14px; background: rgba(31, 167, 160, .08);
    border-left: 3px solid var(--accent); border-radius: 0 var(--hh-radius-sm) var(--hh-radius-sm) 0; line-height: 1.5; }
.tl-title { margin: 18px 0 12px; }
.timeline { border-left: 2px solid var(--card-border); margin-left: 10px; padding-left: 20px; }
.tl-item { position: relative; margin-bottom: 18px; }
.tl-dot { position: absolute; left: -32px; top: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .65rem; }
.tl-pos .tl-dot { background: rgba(36, 122, 90, .18); color: var(--ok); }
.tl-neg .tl-dot { background: rgba(182, 70, 59, .16); color: var(--danger); }
.tl-body { background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); padding: 12px 14px; }
.tl-pos .tl-body { border-left: 3px solid var(--ok); }
.tl-neg .tl-body { border-left: 3px solid var(--danger); }
.tl-quote { font-weight: 600; margin-bottom: 4px; }
.tl-react { color: var(--muted); margin-bottom: 6px; font-style: italic; }
.tl-body p { font-size: .88rem; color: var(--muted); margin: 0; }

/* Errores y fortalezas */
.two-col-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.err-card { background: var(--bg-soft); border: 1px solid var(--card-border); border-left: 3px solid var(--danger);
    border-radius: var(--hh-radius-sm); padding: 12px 14px; margin-bottom: 10px; font-size: .92rem; }
.err-frase { font-weight: 600; margin-bottom: 6px; }
.err-costo { color: var(--muted); margin-bottom: 8px; }
.err-mejor { background: rgba(36, 122, 90, .08); border-radius: var(--hh-radius-xs); padding: 8px 10px; line-height: 1.45; }
.fort-list { list-style: none; padding: 0; margin: 0; }
.fort-list li { background: var(--bg-soft); border: 1px solid var(--card-border); border-left: 3px solid var(--ok);
    border-radius: var(--hh-radius-sm); padding: 10px 14px; margin-bottom: 8px; line-height: 1.5; font-size: .92rem; }

/* Plan de entrenamiento */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.plan-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--hh-radius-md);
    padding: 16px; position: relative; transition: transform .15s, border-color .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--hh-shadow-md); }
.plan-day { position: absolute; top: 12px; right: 12px; font-size: .72rem; color: var(--hh-night);
    background: rgba(255, 122, 89, .16); padding: 3px 10px; border-radius: var(--hh-radius-pill); font-weight: 700; }
.plan-icon { font-size: 2rem; margin-bottom: 8px; }
.plan-card h4 { margin: 0 0 8px; }
.plan-ej { font-size: .9rem; line-height: 1.5; color: var(--text); }
.plan-obj { font-size: .82rem; color: var(--muted); border-top: 1px dashed var(--card-border);
    padding-top: 8px; margin-top: 10px; line-height: 1.45; }

.legacy-report { white-space: pre-wrap; font-family: inherit; font-size: .9rem; line-height: 1.55; }
.report-foot { margin-top: 18px; }

@media (max-width: 1100px) {
    .report-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .resumen-grid, .radar-comments, .two-col-inner, .plan-grid { grid-template-columns: 1fr; }
}

/* Voces ElevenLabs por escenario */
.voice-row { display: flex; gap: 8px; align-items: center; }
.voice-row select { flex: 1; }
.voice-row .btn { white-space: nowrap; }
.voice-id-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
.voice-id-row input { margin-top: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.voice-id-row .btn { white-space: nowrap; }

@media (max-width: 720px) {
    .voice-row { align-items: stretch; flex-wrap: wrap; }
    .voice-row select { flex-basis: 100%; }
    .voice-id-row { grid-template-columns: 1fr; }
}

/* Tips clave: flujo de 6 fases de la conversación de neuroventa */
.tips-flow { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.tip-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--hh-radius-md);
    padding: 14px 16px; border-left: 4px solid var(--primary); }
.tip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft);
    color: var(--muted); font-size: .75rem; font-weight: 700; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; }
.tip-icon { font-size: 1.3rem; }
.tip-head h4 { margin: 0; font-size: 1rem; }
.tip-diag, .tip-consejo { font-size: .9rem; line-height: 1.5; margin: 6px 0; }
.tip-diag { color: var(--muted); }
.tip-consejo { background: rgba(36, 122, 90, .08); border-radius: var(--hh-radius-xs); padding: 8px 10px; }
.tip-connector { text-align: center; color: var(--muted); font-size: 1.1rem; margin: -2px 0; }

.tip-iniciar { border-left-color: var(--hh-blue); }
.tip-empatizar { border-left-color: var(--hh-teal); }
.tip-confianza { border-left-color: var(--hh-info); }
.tip-seducir { border-left-color: var(--hh-coral); }
.tip-provocar { border-left-color: var(--hh-warning); }
.tip-activar { border-left-color: var(--hh-danger); }

/* ===== Retrato del personaje (escenarios) ===== */
.photo-picker { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; }
.photo-preview { width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--card-border); background: var(--bg-soft); }
.photo-picker-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.photo-picker-controls select { width: min(100%, 260px); margin-top: 0; }
.photo-picker-controls .btn { white-space: nowrap; }
.photo-picker input[type="url"] { margin-top: 0; }
.photo-notes-label { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; }
.photo-notes-label textarea { width: 100%; min-height: 4.2rem; resize: vertical; }
.photo-profile-note { display: block; margin-top: -.1rem; }

/* ===== Rúbricas e instrumentos ===== */
.rubric-list-card { display: flex; flex-direction: column; }
.rubric-list-card .scenario-actions { margin-top: auto; }
.rubric-result-preview { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 1rem; color: var(--muted); font-size: .82rem; }
.rubric-result-preview span { padding: .28rem .55rem; border: 1px solid var(--card-border); border-radius: 99px; background: var(--bg-soft); }
.rubric-modal form { display: flex; flex-direction: column; gap: 1rem; }
.rubric-section { border: 1px solid var(--card-border); border-radius: var(--hh-radius-md); background: var(--card); overflow: hidden; }
.rubric-section > summary { padding: 1rem 1.15rem; cursor: pointer; font-weight: 800; background: var(--bg-soft); }
.rubric-section-body { display: flex; flex-direction: column; gap: .9rem; padding: 1.15rem; }
.rubric-result-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rubric-dimensions-section { padding: 1.15rem; overflow: visible; }
.rubric-dimensions-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.rubric-dimensions-head h3 { margin: 0 0 .3rem; }
.rubric-weight-box { min-width: 105px; padding: .7rem .85rem; text-align: center; border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); background: var(--bg-soft); }
.rubric-weight-box span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.rubric-weight-box strong { display: block; margin-top: .15rem; font-size: 1.35rem; }
.rubric-weight-box strong.is-valid { color: var(--ok); }
.rubric-weight-box strong.is-invalid { color: var(--danger); }
#rubricDimensions { display: flex; flex-direction: column; gap: .75rem; margin-bottom: .85rem; }
.rubric-dimension { border: 1px solid var(--card-border); border-radius: var(--hh-radius-sm); background: #fff; overflow: hidden; }
.rubric-dimension > summary { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.rubric-dimension > summary::-webkit-details-marker { display: none; }
.rubric-dimension > summary strong { flex: 1; }
.rubric-drag { color: var(--muted); letter-spacing: -.2em; }
.rubric-dimension-body { display: flex; flex-direction: column; gap: .8rem; padding: 0 1rem 1rem; border-top: 1px solid var(--card-border); }
.rubric-dimension-body > .form-row { padding-top: 1rem; }
.rubric-anchor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.rubric-dimension-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.rubric-sticky-actions { position: sticky; bottom: 0; z-index: 3; margin: 0 -1rem -1rem; padding: .85rem 1rem; border-top: 1px solid var(--card-border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }

@media (max-width: 760px) {
    .rubric-result-labels, .rubric-anchor-grid { grid-template-columns: 1fr; }
    .rubric-dimensions-head { align-items: stretch; flex-direction: column; }
    .rubric-weight-box { width: 100%; }
    .rubric-dimension > summary { align-items: flex-start; }
}

.scenario-thumb { width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    vertical-align: middle; margin-right: .3rem; border: 1px solid var(--card-border); }

.briefing-customer { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .8rem; }
.briefing-portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--primary); flex-shrink: 0; }
.briefing-portrait-placeholder { display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; background: var(--bg-soft); border-color: var(--card-border); }
.briefing-customer .scenario-customer { margin: 0; }

/* ===== Informe de crecimiento del participante ===== */
.history-table-wrap { width: 100%; overflow-x: auto; }
.history-table { min-width: 1080px; }
.history-table th, .history-table td { vertical-align: middle; }
.history-table th:last-child, .history-table td:last-child { width: 330px; }
.history-actions { display: grid; grid-template-columns: 170px 100px 40px; gap: .55rem; align-items: center; min-width: 328px; }
.history-actions > .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; white-space: nowrap; }
.history-delete-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; color: var(--danger); background: transparent; border: 1px solid rgba(182,70,59,.35); border-radius: 50%; cursor: pointer; font-size: 1rem; transition: color .15s, background .15s, border-color .15s, transform .15s; }
.history-delete-button:hover { color: #fff; background: var(--danger); border-color: var(--danger); transform: translateY(-1px); }
.history-delete-button:focus-visible { outline: 3px solid rgba(182,70,59,.22); outline-offset: 2px; }
.history-delete-button:disabled { cursor: wait; opacity: .55; transform: none; }
.history-delete-button.is-loading span { animation: hh-delete-pulse .8s ease-in-out infinite alternate; }
@keyframes hh-delete-pulse { to { opacity: .3; } }
[data-session-row] { transition: opacity .22s ease, transform .22s ease; }
.participant-report-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.4rem; }
.participant-report-head h1 { margin: .35rem 0; max-width: 820px; }
.report-view-switch { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.report-view-switch .btn { margin: 0; white-space: nowrap; }
.report-expert .guided-only { display: none !important; }
.report-guided > .participant-score-card,
.report-guided > .scenario-progress,
.report-guided > .participant-section:not(.micro-practices),
.report-guided > .participant-two-col,
.report-guided > .participant-final-quote,
.report-guided > .repeat-cta { display: none !important; }
.guided-learning-hero { display: grid; grid-template-columns: auto minmax(240px, 1fr) minmax(260px, .8fr); gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; padding: 1.6rem; background: linear-gradient(135deg, #fff, rgba(31,167,160,.08)); border: 1px solid var(--card-border); border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-sm); }
.guided-result-mark { display: grid; place-items: center; width: 64px; height: 64px; color: #fff; background: var(--ok); border-radius: 50%; font-size: 1.8rem; font-weight: 900; }
.guided-learning-hero h2, .guided-completion h2 { margin: .2rem 0 .45rem; }
.guided-learning-hero p:not(.eyebrow), .guided-completion p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.55; }
.guided-next-focus { display: block; margin-top: .7rem; color: var(--primary); font-size: .86rem; }
.guided-route { display: grid; gap: .55rem; }
.guided-route span { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; color: var(--muted); background: var(--bg-soft); border-radius: var(--hh-radius-pill); font-size: .78rem; font-weight: 800; }
.guided-route b { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); background: #fff; border-radius: 50%; }
.guided-route .is-done { color: var(--ok); }
.guided-route .is-done b { color: #fff; background: var(--ok); }
.guided-route .is-active { color: var(--primary); box-shadow: inset 0 0 0 2px rgba(31,167,160,.35); }
.guided-route .is-active b { color: #fff; background: var(--accent); }
.guided-step-count { display: inline-block; margin-top: .55rem; color: var(--primary); font-size: .78rem; font-weight: 800; }
.report-guided .micro-practices { padding: 1.25rem; }
.report-guided .micro-practice-list { max-width: 920px; margin-right: auto; margin-left: auto; }
.report-guided .micro-practice-intro { grid-template-columns: 1fr auto; }
.report-guided .micro-practice-intro > label { display: none; }
.report-guided .micro-learning-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guided-completion { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.7rem; color: var(--text); background: linear-gradient(135deg, rgba(255,122,89,.1), rgba(31,167,160,.1)); border: 1px solid rgba(31,167,160,.25); border-radius: var(--hh-radius-lg); }
.guided-completion[hidden], .micro-practices[hidden], .micro-practice-card[hidden] { display: none !important; }
.guided-completion-actions { display: flex; gap: .65rem; flex: 0 0 auto; }
.guided-completion-actions .btn { margin: 0; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--primary); font-weight: 700; text-decoration: none; }
.eyebrow { margin: 0 0 .35rem; color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.participant-score-card { display: grid; grid-template-columns: auto minmax(180px, .65fr) minmax(280px, 1.5fr); gap: 1.5rem; align-items: center; margin-bottom: 1.2rem; padding: 2rem; color: #fff; background: linear-gradient(135deg, var(--primary), var(--hh-night)); border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-md); }
.participant-score { display: flex; align-items: baseline; justify-content: center; width: 128px; height: 128px; border: 8px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.08); }
.participant-score strong { margin-top: 31px; font-size: 2.8rem; line-height: 1; }
.participant-score span { font-size: .9rem; opacity: .7; }
.participant-score-card .eyebrow { color: var(--hh-coral-light); }
.participant-score-card h2 { margin: 0 0 .6rem; color: #fff; }
.participant-rubric-name { margin: .65rem 0 0; color: rgba(255,255,255,.72); font-size: .82rem; }
.participant-summary { margin: 0; color: rgba(255,255,255,.86); font-size: 1.02rem; line-height: 1.7; }
.result-chip { display: inline-block; padding: .34rem .75rem; color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: var(--hh-radius-pill); font-size: .78rem; font-weight: 800; }
.scenario-progress-overview { margin: 1.6rem 0; }
.scenario-progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.scenario-progress-card { display: flex; flex-direction: column; padding: 1.25rem; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--hh-radius-md); box-shadow: var(--hh-shadow-sm); }
.scenario-progress-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; }
.scenario-progress-card h3 { margin: .9rem 0 1rem; }
.scenario-progress-numbers { display: flex; align-items: end; justify-content: space-between; gap: .8rem; }
.scenario-progress-numbers > strong { color: var(--primary); font-family: var(--hh-font-display); font-size: 2rem; line-height: 1; }
.scenario-progress-numbers small { display: block; margin-top: .25rem; color: var(--muted); font-family: var(--hh-font-body); font-size: .68rem; font-weight: 600; }
.scenario-progress-numbers > span { font-size: .8rem; font-weight: 800; }
.scenario-progress-track, .skill-mini-track { overflow: hidden; background: var(--card-border); border-radius: 999px; }
.scenario-progress-track { height: 8px; margin: .9rem 0 .4rem; }
.scenario-progress-track i, .skill-mini-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--hh-coral)); border-radius: inherit; }
.scenario-progress-card-actions { display: flex; gap: .6rem; margin-top: auto; padding-top: .8rem; }
.scenario-progress-card-actions .btn { flex: 1; margin: 0; }
.history-detail-heading { padding: 1.2rem 1.2rem 0; }
.scenario-progress-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.progress-attempt-chip { padding: .4rem .75rem; color: var(--primary); background: rgba(31,167,160,.1); border-radius: var(--hh-radius-pill); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.progress-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.progress-summary-grid article { padding: 1rem; background: var(--bg-soft); border-radius: var(--hh-radius-md); }
.progress-summary-grid span { display: block; color: var(--muted); font-size: .76rem; }
.progress-summary-grid strong { display: block; margin-top: .35rem; color: var(--primary); font-family: var(--hh-font-display); font-size: 1.8rem; }
.progress-summary-grid small { font-size: .72rem; }
.trend-up { color: var(--ok) !important; }
.trend-down { color: var(--danger) !important; }
.progress-chart { display: flex; align-items: end; gap: .55rem; min-height: 170px; margin: 1.2rem 0; padding: 1rem 1rem .5rem; overflow-x: auto; border-bottom: 1px solid var(--card-border); }
.progress-chart-point { display: grid; grid-template-rows: auto 112px auto; flex: 1 0 48px; gap: .25rem; min-width: 48px; color: var(--muted); text-align: center; text-decoration: none; }
.progress-chart-value { color: var(--primary); font-size: .76rem; font-weight: 800; }
.progress-chart-bar { display: flex; align-items: end; justify-content: center; height: 112px; }
.progress-chart-bar i { display: block; width: min(28px, 70%); background: var(--accent); border-radius: 6px 6px 0 0; transition: height .25s; }
.progress-chart-point.is-current .progress-chart-bar i { background: linear-gradient(180deg, var(--hh-coral), var(--accent)); }
.progress-chart-point.is-current small { color: var(--primary); font-weight: 900; }
.progress-baseline { margin: 1rem 0 0; padding: 1rem; color: var(--muted); background: var(--bg-soft); border-radius: var(--hh-radius-md); }
.skill-comparison { margin-top: 1.2rem; }
.skill-comparison h3 { margin-bottom: .8rem; }
.skill-comparison-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(100px, 2fr) 52px 44px; gap: .75rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--card-border); }
.skill-mini-track { height: 7px; }
.skill-comparison-row strong, .skill-comparison-row em { font-size: .78rem; text-align: right; }
.skill-comparison-row em { color: var(--muted); font-style: normal; font-weight: 800; }
.micro-practice-list { display: grid; gap: .8rem; margin-top: 1.1rem; }
.micro-practice-card { overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--hh-radius-md); }
.micro-practice-intro { display: grid; grid-template-columns: 1fr 130px auto; gap: 1rem; align-items: center; padding: 1rem; background: var(--bg-soft); }
.micro-practice-intro span { color: var(--accent); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.micro-practice-intro h3 { margin: .25rem 0; }
.micro-practice-intro p { margin: 0; color: var(--muted); font-size: .86rem; }
.micro-practice-intro label { margin: 0; }
.micro-practice-intro select { margin-top: .25rem; }
.micro-practice-intro .btn { margin: 0; }
.micro-mastered-chip, .micro-progress-chip { display: inline-block; margin-top: .55rem; padding: .3rem .6rem; border-radius: var(--hh-radius-pill); font-size: .72rem; }
.micro-mastered-chip { color: var(--ok); background: rgba(36,122,90,.12); }
.micro-progress-chip { color: var(--primary); background: rgba(31,167,160,.12); }
.micro-learning-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; padding: 1rem; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); background: #fff; }
.micro-learning-guide article { padding: .8rem; background: var(--bg-soft); border-radius: var(--hh-radius-sm); }
.micro-learning-guide article > span { display: block; margin-bottom: .35rem; color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.micro-learning-guide article p { margin: 0; font-size: .84rem; line-height: 1.5; }
.micro-learning-model { border-left: 3px solid var(--accent); }
.micro-learning-model .phrase-practice-ui { margin-top: .5rem; }
.micro-practice-chat { padding: 1rem; background: #fff; }
.micro-practice-messages { display: flex; flex-direction: column; gap: .65rem; max-height: 360px; overflow-y: auto; }
.micro-bubble { max-width: 82%; padding: .7rem .85rem; border-radius: var(--hh-radius-md); }
.micro-bubble strong { font-size: .7rem; }
.micro-bubble p { margin: .2rem 0 0; line-height: 1.5; }
.micro-bubble-listen { float: right; margin: -.3rem -.3rem 0 .7rem; padding: .25rem; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.micro-bubble-listen:hover { background: rgba(31,167,160,.12); }
.micro-bubble--assistant { align-self: flex-start; background: var(--bg-soft); }
.micro-bubble--user { align-self: flex-end; color: #fff; background: var(--primary); }
.micro-practice-form { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: end; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--card-border); }
.micro-practice-form textarea { margin: 0; }
.micro-practice-form .btn { margin: 0; }
.micro-voice-button { color: var(--primary); border-color: var(--accent); background: rgba(31,167,160,.08); }
.micro-voice-button:hover { color: #fff; background: var(--accent); }
.micro-voice-button.is-recording { color: #fff; background: var(--danger); border-color: var(--danger); animation: hh-voice-pulse 1s ease-in-out infinite alternate; }
.micro-voice-button:disabled { opacity: .45; cursor: not-allowed; }
.micro-voice-status { min-height: 1.3em; margin: .45rem 0 0; font-size: .78rem; }
@keyframes hh-voice-pulse { to { box-shadow: 0 0 0 5px rgba(182,70,59,.14); } }
.micro-practice-feedback { margin-top: 1rem; padding: 1rem; color: var(--primary); background: rgba(31,167,160,.09); border-left: 4px solid var(--accent); border-radius: var(--hh-radius-sm); }
.micro-practice-feedback > strong { font-family: var(--hh-font-display); font-size: 1.8rem; }
.micro-practice-feedback p { margin: .35rem 0 .8rem; }
.micro-turn-feedback { align-self: center; width: min(92%, 760px); padding: .9rem 1rem; border: 1px solid var(--card-border); border-left-width: 4px; border-radius: var(--hh-radius-md); background: #fff; }
.micro-turn-feedback.is-pass { border-left-color: var(--ok); background: rgba(36,122,90,.05); }
.micro-turn-feedback.is-retry { border-left-color: var(--warn); background: rgba(169,105,24,.05); }
.micro-turn-feedback > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.micro-turn-feedback > div:first-child span { font-family: var(--hh-font-display); font-weight: 800; }
.micro-turn-feedback > p { margin: .45rem 0; line-height: 1.5; }
.micro-turn-feedback > small { display: block; margin-top: .45rem; color: var(--muted); line-height: 1.45; }
.micro-correct-form { display: flex; align-items: center; gap: .45rem; padding: .6rem; color: var(--primary); background: rgba(31,167,160,.09); border-radius: var(--hh-radius-sm); }
.micro-correct-form span { flex: 1; }
.micro-streak { margin-top: .6rem; color: var(--accent); font-size: .74rem; font-weight: 800; }
.micro-history-progress { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin-top: .8rem; padding: .7rem; background: rgba(31,167,160,.08); border-radius: var(--hh-radius-sm); }
.micro-history-progress span, .micro-history-progress small { color: var(--muted); font-size: .72rem; }
.micro-history-progress small { grid-column: 1 / -1; }
.micro-inline-fields { display: grid; grid-template-columns: 1fr 90px; gap: .5rem; }
.micro-mastery-rule { margin: .7rem 0; color: var(--accent); font-size: .78rem; font-weight: 800; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.participant-section { margin-bottom: 1.2rem; padding: 1.7rem; }
.section-heading { margin-bottom: 1.25rem; }
.section-heading h2 { margin: 0; }
.skill-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.skill-row { padding: 1rem; background: var(--bg-soft); border-radius: var(--hh-radius-md); }
.skill-row-head { display: flex; justify-content: space-between; gap: 1rem; }
.skill-row-head span { color: var(--accent); font-weight: 800; }
.skill-track { height: 8px; margin: .65rem 0; overflow: hidden; background: var(--card-border); border-radius: 999px; }
.skill-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--hh-coral)); border-radius: inherit; }
.skill-row p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.participant-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.growth-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.growth-list li { padding: .85rem 1rem .85rem 2.5rem; position: relative; background: var(--bg-soft); border-radius: var(--hh-radius-md); }
.growth-list li::before { content: "✓"; position: absolute; left: 1rem; color: var(--ok); font-weight: 900; }
.growth-card { padding: 1rem; background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: var(--hh-radius-md); }
.growth-card + .growth-card { margin-top: .75rem; }
.growth-card h3 { margin-top: 0; }
.better-answer { padding: .75rem; color: var(--primary); background: rgba(31,167,160,.09); border-left: 3px solid var(--accent); border-radius: 0 var(--hh-radius-sm) var(--hh-radius-sm) 0; }
.participant-details { display: grid; gap: .7rem; }
.participant-details details { overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--hh-radius-md); }
.participant-details summary { padding: 1rem 1.2rem; cursor: pointer; font-weight: 800; background: var(--bg-soft); }
.participant-details details > div { padding: .4rem 1.2rem 1.2rem; }
.turning-point blockquote { margin: 1rem 0; padding: 1rem 1.2rem; color: var(--primary); font-family: var(--hh-font-display); font-size: 1.35rem; background: rgba(255,122,89,.08); border-left: 4px solid var(--hh-coral); }
.growth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.growth-grid .growth-card + .growth-card { margin-top: 0; }
.plan-step { padding: 1rem; background: var(--bg-soft); border-top: 3px solid var(--accent); border-radius: var(--hh-radius-md); }
.plan-step > span { color: var(--accent); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.plan-step h3 { margin: .55rem 0; }
.participant-final-quote { max-width: 850px; margin: 2rem auto; color: var(--primary); font-family: var(--hh-font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.3; text-align: center; }
.repeat-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; color: #fff; background: linear-gradient(135deg, var(--hh-night), var(--primary)); border-radius: var(--hh-radius-lg); }
.repeat-cta h2 { margin: .2rem 0; color: #fff; }
.repeat-cta p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.78); }
.report-empty { padding: 3rem; text-align: center; }
.report-wait-icon { font-size: 2.6rem; }

@media (max-width: 900px) {
    .participant-report-head, .repeat-cta { align-items: stretch; flex-direction: column; }
    .participant-score-card { grid-template-columns: auto 1fr; }
    .participant-summary { grid-column: 1 / -1; }
    .participant-two-col, .skill-bars { grid-template-columns: 1fr; }
    .growth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .micro-practice-intro { grid-template-columns: 1fr 130px; }
    .micro-practice-intro .btn { grid-column: 1 / -1; }
    .guided-learning-hero { grid-template-columns: auto 1fr; }
    .guided-route { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .guided-completion { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
    .participant-score-card { grid-template-columns: 1fr; text-align: center; }
    .participant-score { margin: 0 auto; }
    .growth-grid { grid-template-columns: 1fr; }
    .participant-section, .participant-score-card, .repeat-cta { padding: 1.25rem; }
    .progress-summary-grid { grid-template-columns: 1fr; }
    .scenario-progress-heading, .micro-practice-intro { grid-template-columns: 1fr; flex-direction: column; }
    .skill-comparison-row { grid-template-columns: 1fr 54px 42px; }
    .skill-comparison-row .skill-mini-track { grid-column: 1 / -1; grid-row: 2; }
    .micro-practice-form { grid-template-columns: 1fr; }
    .report-view-switch, .guided-completion-actions { flex-direction: column; width: 100%; }
    .report-view-switch .btn, .guided-completion-actions .btn { width: 100%; }
    .guided-learning-hero { grid-template-columns: 1fr; text-align: left; }
    .guided-result-mark { width: 52px; height: 52px; }
    .guided-route { grid-column: auto; grid-template-columns: 1fr; }
    .report-guided .micro-learning-guide { grid-template-columns: 1fr; }
    .report-guided .micro-practice-intro { grid-template-columns: 1fr; }
}
.lesson-blocks { display: grid; gap: 12px; margin: 10px 0; }
.lesson-block { border: 1px solid #d9e4e5; border-radius: 12px; padding: 14px; background: #f8fbfb; }
.lesson-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lesson-block__head strong { color: #164c59; }
.lesson-block__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.lesson-block__grid label { margin: 0; }
.lesson-block textarea, .lesson-block input, .lesson-block select { width: 100%; }
.lesson-block__wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .lesson-block__grid { grid-template-columns: 1fr; } }
.operation-template-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Cursos narrativos ------------------------------------------------------ */
.course-admin-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr); gap:1.2rem; align-items:start; }
.course-org-picker { max-width:1040px; margin:2rem auto; }
.course-org-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem; margin-top:1rem; }
.course-org-grid a { display:flex; flex-direction:column; gap:.25rem; padding:1rem; color:var(--primary); text-decoration:none; border:1px solid var(--card-border); border-radius:var(--hh-radius-md); background:#fff; transition:.2s ease; }
.course-org-grid a:hover { border-color:var(--accent); transform:translateY(-1px); }
.course-org-grid a span { color:var(--muted); font-size:.82rem; }
.course-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.course-library-head small { color:var(--accent); font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.course-library-head h2 { margin:.15rem 0 0; }
.course-library-head__actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.course-org-switcher { margin:0; }
.course-org-switcher select { width:auto; min-width:220px; max-width:280px; margin:0; }
.course-library-bucket { display:grid; gap:.85rem; }
.course-library-bucket + .course-library-bucket { margin-top:.6rem; padding-top:1.35rem; border-top:1px solid var(--card-border); }
.course-library-bucket__head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
.course-library-bucket__head h3 { margin:0; font-family:var(--hh-font-display); font-size:1.2rem; }
.course-library-bucket__head p { margin:.2rem 0 0; max-width:52ch; }
.course-library-bucket__head span { color:var(--muted); font-weight:700; }
.course-library-empty { display:grid; justify-items:start; gap:.75rem; margin:0; padding:1.1rem 1rem; border:1px dashed var(--card-border); border-radius:var(--hh-radius-md); background:#fff; }
.course-admin-list { display:grid; gap:.7rem; }
.course-admin-list:has(.scenario-group) { gap: 1.35rem; }
.course-admin-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.4rem 0; border:1px solid var(--card-border); border-radius:var(--hh-radius-md); background:#fff; transition:.2s ease; }
.course-admin-item:hover { border-color:var(--accent); }
.course-admin-list a { display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; padding:1rem; color:var(--primary); text-decoration:none; }
.course-admin-list a span { color:var(--muted); font-size:.82rem; }
.course-admin-list a em { grid-column:2; grid-row:1 / 3; align-self:center; font-style:normal; }
.course-admin-item .course-duplicate-form { padding-right:1rem; }
.course-duplicate-form { margin:0; }
.course-admin-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-bottom:1.2rem; align-items:start; }
.course-editor-head { margin-bottom:1.2rem; }
.course-admin-panels .course-editor-head { margin-bottom:0; }
.course-settings-panel { padding:0; overflow:hidden; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-lg); box-shadow:var(--shadow-sm); }
.course-settings-panel[open] { grid-column:1 / -1; }
.course-settings-panel summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; cursor:pointer; list-style:none; }
.course-settings-panel summary::-webkit-details-marker { display:none; }
.course-settings-panel summary div { display:grid; gap:.15rem; min-width:0; }
.course-settings-panel summary small { color:var(--accent); font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.course-settings-panel summary strong { overflow:hidden; color:var(--primary); font-size:1.1rem; text-overflow:ellipsis; white-space:nowrap; }
.course-settings-panel summary span { color:var(--muted); font-size:.82rem; }
.course-summary-actions { display:flex!important; align-items:center; flex:0 0 auto; gap:.45rem; }
.course-summary-actions a,.course-summary-actions button,.course-settings-panel summary em { flex:0 0 auto; padding:.62rem .9rem; color:var(--primary); background:#f5f8fb; border:1px solid var(--card-border); border-radius:999px; font:inherit; font-style:normal; font-weight:900; text-decoration:none; cursor:pointer; }
.course-summary-actions a,.course-summary-actions button { color:#0a7068; background:#eafaf8; border-color:#9de0d8; }
.course-summary-actions a:hover,.course-summary-actions button:hover { background:#d9f7f3; }
.course-settings-panel[open] summary { border-bottom:1px solid var(--card-border); }
.course-settings-panel[open] summary em { color:#fff; background:var(--primary); }
.course-meta-form { max-width:950px; padding:1.15rem 1.25rem 1.35rem; }
.course-team-content { padding:1.15rem 1.25rem 1.35rem; }
.course-team-content .page-head { margin-bottom:.7rem; }
.course-brand-compact { display:flex; align-items:center; gap:.75rem; margin:1rem 0; padding:.85rem 1rem; background:#f5f8fb; border:1px solid var(--card-border); border-radius:var(--hh-radius-sm); }
.course-brand-compact strong { color:var(--primary); }
.course-brand-compact span { color:var(--muted); font-size:.88rem; }
.course-brand-compact i { width:112px; height:28px; margin-left:auto; background:radial-gradient(circle at 14px 50%,var(--brand-primary) 0 12px,transparent 13px),radial-gradient(circle at 42px 50%,var(--brand-secondary) 0 12px,transparent 13px),radial-gradient(circle at 70px 50%,var(--brand-accent) 0 12px,transparent 13px),radial-gradient(circle at 98px 50%,var(--brand-background) 0 12px,transparent 13px); }
.course-voice-settings { margin:1.2rem 0; padding:1rem; background:var(--bg-soft); border:1px solid var(--card-border); border-radius:var(--hh-radius-md); }
.course-voice-settings legend { padding:0 .45rem; color:var(--primary); font-weight:900; }
.course-voice-settings [hidden] { display:none !important; }
.course-brand-settings { margin:1.2rem 0; padding:1.2rem; border:1px solid var(--card-border); border-radius:var(--hh-radius-md); background:linear-gradient(135deg,rgba(31,167,160,.05),rgba(95,121,216,.05)); }
.course-brand-settings legend { padding:0 .45rem; font-weight:900; }
.course-brand-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr); gap:1.2rem; align-items:stretch; }
.course-brand-colors { display:grid; grid-template-columns:repeat(4,minmax(115px,1fr)); gap:.7rem; margin:.8rem 0 1rem; }
.course-brand-colors label { padding:.65rem; background:#fff; border:1px solid var(--card-border); border-radius:12px; font-size:.78rem; }
.course-brand-colors label span { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.course-brand-colors input[type="color"] { width:42px; height:34px; padding:2px; }
.course-brand-colors code { font-size:.72rem; }
.course-brand-logo-fields { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem; align-items:end; margin:.8rem 0; }
.course-brand-logo-fields > span { grid-column:1/-1; min-height:1.2em; color:var(--muted); font-size:.78rem; }
.course-brand-logo-upload { display:flex; align-items:center; justify-content:center; min-height:46px; cursor:pointer; }
.course-brand-preview { position:relative; min-height:310px; overflow:hidden; padding:2rem; color:var(--brand-text); background:var(--brand-background); border-radius:20px; font-family:var(--brand-body); }
.course-brand-preview::after { content:""; position:absolute; right:-55px; bottom:-75px; width:190px; height:190px; background:var(--brand-primary); border-radius:50%; opacity:.32; }
.course-brand-preview > * { position:relative; z-index:1; }
.course-brand-preview > img { display:block; width:min(34%,120px); max-height:70px; margin:0 0 2.8rem auto; object-fit:contain; }
.course-brand-preview small { color:var(--brand-muted); font-weight:900; letter-spacing:.12em; }
.course-brand-preview h3 { margin:.55rem 0; color:var(--brand-text); font:800 2rem/1.05 var(--brand-heading); }
.course-brand-preview p { color:var(--brand-muted); }
.course-brand-preview > div { display:flex; gap:.45rem; margin-top:1.2rem; }
.course-brand-preview > div span { padding:.42rem .62rem; color:#fff; background:var(--brand-primary); border-radius:999px; font-size:.7rem; font-weight:800; }
.course-brand-preview > div span:nth-child(2) { background:var(--brand-secondary); }
.course-brand-preview > div span:nth-child(3) { background:var(--brand-accent); }
@media(max-width:900px){.course-brand-layout{grid-template-columns:1fr}.course-brand-colors{grid-template-columns:repeat(2,minmax(115px,1fr))}}
.course-builder-grid { display:grid; grid-template-columns:minmax(280px,.65fr) minmax(520px,1.35fr); gap:1.2rem; align-items:start; }
.course-builder-grid details { margin:.65rem 0; padding:.75rem; border:1px solid var(--card-border); border-radius:var(--hh-radius-sm); }
.course-builder-grid summary { cursor:pointer; font-weight:800; }
.course-builder-grid summary small { color:var(--muted); font-weight:500; }
.course-add { background:var(--bg-soft); border-style:dashed !important; }
.course-add form { margin-top:1rem; }
.course-unit { margin:1rem 0; padding:1rem; background:var(--bg-soft); border-radius:var(--hh-radius-md); }
.course-unit > header,.course-episode-title,.course-scene-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.course-author-actions { display:flex; align-items:center; gap:.45rem; }
.course-unit > header span { color:var(--accent); font-size:.75rem; font-weight:900; text-transform:uppercase; }
.course-unit > header h3 { margin:.2rem 0; }
.course-unit-duration { display:block; color:var(--muted); font-size:.78rem; font-weight:700; }
.course-unit form,.course-episode-title form,.course-scene-row form { margin:0; }
.course-icon-add,.course-icon-edit,.course-icon-delete { width:32px; height:32px; display:grid; place-items:center; padding:0; color:var(--primary); background:#fff; border:1px solid var(--card-border); border-radius:50%; cursor:pointer; font-size:1rem; font-weight:850; line-height:1; box-shadow:0 1px 2px rgba(11,32,48,.04); }
.course-icon-add:hover,.course-icon-edit:hover { color:var(--primary); background:var(--bg-soft); border-color:#cfd9df; transform:translateY(-1px); }
.course-icon-delete:hover { color:#9f332d; background:#fff7f6; border-color:#e7b6b0; transform:translateY(-1px); }
.course-icon-edit { color:#fff; background:var(--accent); border-color:var(--accent); }
.course-icon-edit:hover { color:#fff; background:#168f88; border-color:#168f88; }
.course-episode-title > .course-author-actions > form { display:none !important; }
.course-episode { margin-top:.8rem; padding:.9rem; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-sm); }
.course-episode-assessment { display:none !important; }
.course-episode-title { padding-bottom:.6rem; border-bottom:1px solid var(--card-border); }
.course-episode-title { justify-content:flex-start; text-align:left; }
.course-episode-title > strong { flex:1; text-align:left; }
.course-episode-description { margin:.7rem 0 .3rem; color:var(--muted); line-height:1.45; }
.course-episode-settings { margin:.75rem 0 !important; padding:.8rem !important; background:var(--bg-soft); border-style:dashed !important; }
.course-episode-settings form { display:grid; gap:.7rem; margin-top:.75rem; }
.course-episode-settings-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(620px,calc(100% - 2rem)); max-width:calc(100% - 2rem); max-height:90vh; margin:0; padding:0; border:0; border-radius:var(--hh-radius-lg); box-shadow:0 24px 80px rgba(0,0,0,.3); }
.course-episode-settings-modal::backdrop { background:rgba(8,20,31,.58); backdrop-filter:blur(3px); }
.course-episode-settings-modal form { display:grid; gap:1rem; max-height:90vh; overflow:auto; padding:1.25rem; }
.course-episode-settings-modal header,.course-episode-settings-modal footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.course-episode-settings-modal header { padding-bottom:.8rem; border-bottom:1px solid var(--card-border); }
.course-episode-settings-modal header small { color:var(--accent); font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.course-episode-settings-modal header h3 { margin:.15rem 0 0; }
.course-episode-settings-modal footer { justify-content:flex-end; padding-top:.4rem; }
.course-episode-settings-modal footer [data-episode-delete] { margin-right:auto; }
.course-scene-row { justify-content:flex-start; margin-top:.55rem; padding:.65rem; background:var(--bg-soft); border-radius:8px; }
.course-scene-row > span { display:grid; place-items:center; flex:0 0 30px; height:30px; color:#fff; background:#5f79d8; border:1px solid #5f79d8; border-radius:50%; font-size:.75rem; font-weight:900; }
.course-scene-row > span:not(.course-scene-drag):not(.course-scene-edit-icon) { background:#5f79d8; }
.course-scene-row > .course-scene-drag { flex:0 0 auto; width:20px; height:28px; color:var(--muted); background:transparent; border-radius:0; cursor:grab; font-size:1rem; line-height:.72; letter-spacing:-.25rem; user-select:none; }
.course-scene-editor[draggable="true"] > summary { cursor:grab; }
.course-scene-editor[draggable="true"] > summary:active,.course-scene-editor.is-dragging > summary { cursor:grabbing; }
.course-scene-editor.is-dragging { opacity:.45; }
.course-episode-title > .course-episode-drag { flex:0 0 auto; color:var(--muted); cursor:grab; font-size:1rem; letter-spacing:-.25rem; user-select:none; }
.course-episode[draggable="true"] > .course-episode-title { cursor:grab; }
.course-episode[draggable="true"] > .course-episode-title:active,.course-episode.is-dragging > .course-episode-title { cursor:grabbing; }
.course-episode.is-dragging { opacity:.45; }
.course-episode-list.is-saved { outline:2px solid rgba(31,167,160,.32); outline-offset:4px; border-radius:10px; transition:outline-color .2s ease; }
.course-scene-list.is-saved { outline:2px solid rgba(31,167,160,.32); outline-offset:4px; border-radius:10px; transition:outline-color .2s ease; }
.course-add-scene-global { margin-top:1rem !important; }
.course-add-scene-global > p { margin:.7rem 0; }
.course-scene-row > div { flex:1; display:flex; flex-direction:column; }
.course-scene-row > .course-scene-edit-icon { flex:0 0 32px; height:32px; margin-left:.2rem; color:#fff; background:var(--accent); border:1px solid var(--accent); font-size:.95rem; }
.course-scene-row > .course-scene-edit-icon:hover { color:#fff; background:#168f88; border-color:#168f88; }
.course-scene-row > .course-scene-delete-icon { flex:0 0 32px; margin-left:.2rem; color:#9f332d; background:#fff; border:1px solid var(--card-border); }
.course-scene-row > .course-scene-delete-icon:hover { color:#9f332d; background:#fff7f6; border-color:#e7b6b0; }
.course-scene-row small { color:var(--muted); }
.course-scene-editor { padding:0 !important; overflow:hidden; background:transparent !important; border:0 !important; }
.course-scene-editor > summary { list-style:none; cursor:pointer; }
.course-scene-editor > summary::-webkit-details-marker { display:none; }
.course-scene-editor[open] { margin-top:.55rem; background:#fff !important; border:1px solid var(--accent) !important; border-radius:var(--hh-radius-sm); }
.course-scene-editor[open] > summary { margin-top:0; border:0; border-bottom:1px solid rgba(31,167,160,.22); border-radius:0; background:rgba(31,167,160,.08); }
.course-scene-edit-form { margin:.45rem 0 0; padding:1rem; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-sm); }
.course-scene-editor[open] > .course-scene-edit-form { margin:0; border:0; border-radius:0; }
.course-technical-field,.course-row-technical-only { display:none !important; }
.author-notebook { display:grid; gap:.6rem; margin:.75rem 0 1rem; padding:.9rem; background:linear-gradient(135deg,rgba(255,128,95,.08),rgba(31,167,160,.06)); border:1px solid rgba(31,167,160,.24); border-radius:var(--hh-radius-md); }
.author-notebook > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.45rem; }
.author-notebook strong { color:var(--primary); }
.author-notebook span,.author-notebook small { color:var(--muted); font-size:.8rem; }
.author-notebook textarea { min-height:84px; resize:vertical; }
.author-notebook button { justify-self:start; }
.author-notebook--episode { margin:.55rem .25rem .8rem; background:#fbfcfd; }
.author-notebook--compact { display:flex; align-items:center; gap:.45rem; margin:0; padding:0; background:transparent; border:0; border-radius:0; }
.author-notebook--compact small { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.author-notebook-modal[hidden] { display:none !important; }
.author-notebook-modal { position:fixed; inset:0; z-index:2400; display:grid; place-items:center; padding:1.5rem; }
.author-notebook-modal__backdrop { position:absolute; inset:0; background:rgba(8,20,31,.58); backdrop-filter:blur(4px); }
.author-notebook-modal__dialog { position:relative; z-index:1; width:min(820px,100%); max-height:min(760px,92vh); display:grid; gap:1rem; padding:1.2rem; overflow:auto; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-lg); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.author-notebook-modal__dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.author-notebook-modal__dialog h2 { margin:.1rem 0 .25rem; }
.author-notebook-modal__dialog small { color:var(--accent); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.author-notebook-modal__dialog p { margin:0; color:var(--muted); }
.author-notebook-modal__dialog textarea { min-height:260px; resize:vertical; font-size:1rem; line-height:1.45; }
.author-notebook-modal__dialog footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.author-notebook-modal__dialog footer small { flex:1; color:var(--muted); letter-spacing:0; text-transform:none; }
.author-notebook-modal-open { overflow:hidden; }
.scene-guided-editor { display:grid; grid-template-columns:1fr; gap:.8rem; margin:1rem 0; }
.scene-guided-editor [hidden] { display:none !important; }
.scene-guided-card { padding:1rem; background:linear-gradient(135deg,rgba(31,167,160,.08),rgba(95,121,216,.06)); border:1px solid rgba(31,167,160,.22); border-radius:var(--hh-radius-md); }
.scene-guided-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.scene-guided-card header div { display:flex; flex-direction:column; gap:.15rem; }
.scene-guided-card header button { flex:0 0 auto; padding:.45rem .65rem; color:var(--primary); background:#fff; border:1px solid var(--card-border); border-radius:999px; cursor:pointer; font:inherit; font-size:.72rem; font-weight:900; }
.scene-guided-card header small { color:var(--accent); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.scene-guided-card header strong { color:var(--primary); font-size:1.05rem; }
.scene-guided-card p { margin:.2rem 0 .9rem; color:var(--muted); font-size:.9rem; line-height:1.45; }
.scene-check-types { display:flex; flex-wrap:wrap; gap:.42rem; margin:.65rem 0 .85rem; }
.scene-check-types button { padding:.5rem .7rem; color:var(--primary); background:#fff; border:1px solid var(--card-border); border-radius:999px; cursor:pointer; font:inherit; font-size:.78rem; font-weight:850; }
.scene-check-types button.is-active { color:#fff; background:var(--primary); border-color:var(--primary); }
.scene-guided-card label { margin:.7rem 0; font-size:.78rem; }
.scene-guided-card textarea,.scene-guided-card input[type="text"] { font-size:.9rem; }
.scene-check-options { display:grid; gap:.45rem; margin:.5rem 0; }
.scene-check-options-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; color:var(--muted); font-size:.78rem; font-weight:850; }
.scene-check-options-head em { color:#a94355; font-style:normal; }
.scene-check-option { display:grid; grid-template-columns:132px minmax(0,1fr) 34px; gap:.55rem; align-items:center; margin:0 !important; padding:.45rem; background:#fff; border:1px solid var(--card-border); border-radius:10px; }
.scene-check-option.is-correct { border-color:rgba(31,167,160,.7); box-shadow:0 0 0 2px rgba(31,167,160,.12); }
.scene-check-correct { display:flex !important; align-items:center; justify-content:center; gap:.35rem; margin:0 !important; padding:.45rem .55rem; border:1px solid var(--card-border); border-radius:999px; color:var(--primary); background:#f8fafc; cursor:pointer; font-size:.76rem !important; font-weight:900; }
.scene-check-option.is-correct .scene-check-correct { color:#fff; background:var(--accent); border-color:var(--accent); }
.scene-check-correct input[type="radio"],.scene-check-correct input[type="checkbox"] { width:auto; margin:0; accent-color:var(--primary); }
.scene-check-option input[type="text"] { margin:0; }
.scene-check-option button,.scene-check-add { color:#9c3145; background:#fff; border:1px solid #e5bdc5; border-radius:8px; cursor:pointer; font:inherit; font-weight:900; }
.scene-check-add { justify-self:start; padding:.45rem .65rem; color:var(--primary); border-color:var(--card-border); }
.course-delete-form { margin-top:.5rem !important; }
.course-scene-editor > form.course-delete-form { display:none !important; }
.course-editable > form { margin-top:1rem; }
.course-enroll-form { display:grid; grid-template-columns:minmax(260px,1fr) 240px auto; gap:.8rem; align-items:end; margin-bottom:1.2rem; }
.course-enroll-form label { margin:0; }
.course-run-timeline { display:grid; gap:.5rem; }
.course-run-timeline > div { display:grid; grid-template-columns:1fr 180px 90px; gap:1rem; padding:.75rem 1rem; background:var(--bg-soft); border-radius:8px; }
.course-run-timeline span { color:var(--muted); }
.course-run-timeline em { color:var(--accent); font-style:normal; font-weight:900; text-align:right; }

.course-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.learning-company-title { margin:1.1rem 0 .7rem; color:var(--primary); font-size:1.15rem; }
.course-catalog-card { display:flex; flex-direction:column; min-height:280px; padding:1.4rem; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-lg); box-shadow:var(--hh-shadow-sm); }
.course-catalog-card__top,.course-catalog-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.course-catalog-card__top span { color:var(--accent); font-size:.75rem; font-weight:900; text-transform:uppercase; }
.course-catalog-card h3 { margin:.8rem 0 .5rem; font-size:1.35rem; }
.course-catalog-card p { flex:1; color:var(--muted); line-height:1.55; }
.course-catalog-meta { margin:.8rem 0; color:var(--muted); font-size:.85rem; }
.course-catalog-meta strong { color:var(--accent); font-size:1.05rem; }

.learning-continue { margin: 1.4rem 0 2rem; }
.learning-avance { margin: 0 0 2rem; }
.avance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-top: .85rem;
}
.avance-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--hh-shadow-sm);
}
a.avance-stat:hover { border-color: var(--accent); }
.avance-stat strong { font-family: var(--hh-font-display); font-size: 1.7rem; line-height: 1.1; }
.avance-stat span { font-weight: 700; font-size: .92rem; }
.avance-stat small { color: var(--muted); font-size: .8rem; }
.avance-logros {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
}
.avance-logros li {
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(31, 167, 160, .12);
    color: #16857f;
    font-size: .82rem;
    font-weight: 700;
}
.avance-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}
.avance-list h3 {
    margin: 0 0 .45rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.avance-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.avance-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .55rem .7rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}
.avance-list a:hover { border-color: var(--accent); }
.avance-list span { font-weight: 700; font-size: .9rem; }
.avance-list small { display: block; font-weight: 600; color: var(--muted); font-size: .75rem; }
.avance-list strong { color: var(--accent); font-size: .88rem; white-space: nowrap; }
.avance-empty { margin: .85rem 0 0; }
.path-card--static { cursor: default; }
.path-card--static .btn, .path-card--static form { margin-top: .65rem; }
.path-card--static form { display: inline; }
@media (max-width: 900px) {
    .avance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.learning-continue h2, .learning-explore h2 { font-family: var(--hh-font-display); font-size: 1.55rem; font-weight: 600; }
.learning-continue-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem;
    margin-top: .85rem; padding: 1.35rem 1.5rem; background: #fff; border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-sm);
}
.learning-card-icon {
    display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center;
    border-radius: 18px; font-size: 2rem; flex: 0 0 auto;
}
.learning-card-icon--sm { width: 56px; height: 56px; font-size: 1.55rem; border-radius: 14px; margin-bottom: .7rem; }
.learning-card-icon--teal { background: rgba(31, 167, 160, .16); }
.learning-card-icon--peach { background: rgba(255, 122, 89, .18); }
.learning-card-icon--blue { background: rgba(38, 108, 145, .16); }
.learning-card-icon--gold { background: rgba(169, 105, 24, .16); }
.learning-card-icon--green { background: rgba(46, 125, 87, .14); }
.learning-card-icon--orange { background: rgba(255, 138, 61, .16); }
.learning-card-icon--purple { background: rgba(92, 61, 145, .14); }
.learning-card-icon--coral { background: rgba(239, 91, 114, .14); }
.learning-card-icon--mint { background: rgba(31, 167, 160, .16); color: #16857f; }
.learning-card-icon--sky { background: rgba(74, 144, 184, .16); color: #266c91; }
.learning-card-icon--amber { background: rgba(212, 137, 58, .16); color: #b56f24; }
.learning-card-icon--violet { background: rgba(122, 107, 176, .16); color: #6b5aa8; }
.learning-card-icon--rose { background: rgba(232, 107, 122, .16); color: #c44f62; }
.learning-card-icon--indigo { background: rgba(63, 65, 118, .14); color: #3f4176; }
.learning-card-icon--grape { background: rgba(92, 61, 145, .14); color: #5c3d91; }
.plan-card--tone-mint { --plan-accent: #1fa7a0; --plan-soft: rgba(31, 167, 160, .14); }
.plan-card--tone-sky { --plan-accent: #4a90b8; --plan-soft: rgba(74, 144, 184, .16); }
.plan-card--tone-amber { --plan-accent: #d4893a; --plan-soft: rgba(212, 137, 58, .16); }
.plan-card--tone-violet { --plan-accent: #7a6bb0; --plan-soft: rgba(122, 107, 176, .16); }
.plan-card--tone-rose { --plan-accent: #e86b7a; --plan-soft: rgba(232, 107, 122, .16); }
.plan-card--tone-indigo { --plan-accent: #3f4176; --plan-soft: rgba(63, 65, 118, .14); }
.plan-card--tone-grape { --plan-accent: #5c3d91; --plan-soft: rgba(92, 61, 145, .14); }
.plan-card--tone-peach { --plan-accent: #ff7a59; --plan-soft: rgba(255, 122, 89, .16); }
.plan-card--tone-teal { --plan-accent: #1fa7a0; --plan-soft: rgba(31, 167, 160, .14); }
.plan-card--tone-blue { --plan-accent: #4a90b8; --plan-soft: rgba(74, 144, 184, .16); }
.plan-card--tone-green { --plan-accent: #2e7d57; --plan-soft: rgba(46, 125, 87, .14); }
.plan-card--tone-orange { --plan-accent: #d4893a; --plan-soft: rgba(212, 137, 58, .16); }
.plan-card--tone-purple { --plan-accent: #7a6bb0; --plan-soft: rgba(122, 107, 176, .16); }
.plan-card--tone-coral { --plan-accent: #e86b7a; --plan-soft: rgba(232, 107, 122, .16); }
.learning-continue-card small { color: var(--accent); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.learning-continue-card h3 { margin: .35rem 0 .8rem; font-family: var(--hh-font-display); font-size: 1.55rem; }
.learning-continue-card__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .8rem; min-width: 160px; }
.learning-continue-card__aside .btn { min-width: 140px; text-align: center; }
.learning-progress { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .88rem; }
.learning-progress__bar { flex: 1; min-width: 120px; height: 8px; overflow: hidden; background: var(--card-border); border-radius: 999px; }
.learning-progress__bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.learning-progress strong { color: var(--text); font-size: .92rem; }
.learning-explore { margin: 0 0 2.2rem; }
.learning-explore__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.learning-explore__head a { font-weight: 800; white-space: nowrap; }
.learning-explore__viewport { position: relative; }
.learning-explore__row {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .15rem .2rem 1rem 0;
    scrollbar-width: none;
}
.learning-explore__row::-webkit-scrollbar { display: none; }
.learning-explore__row .course-catalog-card {
    flex: 0 0 min(268px, 78vw); min-height: 248px; scroll-snap-align: start;
}
.learning-explore__row .course-catalog-card h3 { flex: 1; font-family: var(--hh-font-display); font-size: 1.22rem; }
.learning-explore__row .course-catalog-card .btn { margin-top: auto; align-self: stretch; text-align: center; }
.learning-explore__next {
    position: absolute; right: .15rem; top: 42%; width: 42px; height: 42px; border: 1px solid var(--card-border);
    border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.4rem; line-height: 1; cursor: pointer;
    box-shadow: var(--hh-shadow-sm);
}
.learning-offers { margin: 0 0 2.2rem; }
.welcome-store { margin: 0 0 2rem; }
.welcome-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
    margin-bottom: 2.4rem;
}
.welcome-hero__copy h1 {
    margin: 0 0 .75rem;
    font-family: var(--hh-font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    line-height: 1.06;
    font-weight: 600;
}
.welcome-hero__tagline {
    margin: 0 0 .85rem;
    color: #266c91;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
    max-width: 34rem;
}
.welcome-hero__text {
    margin: 0 0 1.25rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 34rem;
}
.welcome-hero__features {
    list-style: none;
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
}
.welcome-hero__features li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    color: var(--text);
}
.welcome-hero__feature-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .95rem;
    flex: 0 0 auto;
}
.welcome-hero__feature-icon--green { background: rgba(31, 167, 160, .14); color: #16857f; }
.welcome-hero__feature-icon--blue { background: rgba(38, 108, 145, .14); color: #266c91; }
.welcome-hero__feature-icon--purple { background: rgba(122, 107, 176, .14); color: #6b5aa8; }
.welcome-hero__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.welcome-hero__media { position: relative; }
.welcome-hero__video-label {
    margin: 0 0 .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.welcome-hero__photo,
.welcome-hero__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: var(--hh-shadow-md);
    background: #0f2438;
}
.welcome-hero__quote {
    margin: 0;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .94);
    border-radius: 14px;
    box-shadow: var(--hh-shadow-sm);
    border: 1px solid rgba(15, 61, 92, .06);
}
.welcome-hero__quote p {
    margin: 0;
    font-family: var(--hh-font-display);
    font-size: .98rem;
    line-height: 1.35;
    color: var(--text);
}
.welcome-hero__quote em { font-style: italic; color: var(--accent); font-weight: 600; }
.welcome-plans {
    margin-bottom: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: 24px;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .75);
}
.welcome-plans__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}
.welcome-plans__head h2 {
    margin: 0 0 .25rem;
    font-family: var(--hh-font-display);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    font-weight: 600;
}
.welcome-plans__head > div > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}
.welcome-plans__trust {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    max-width: 16rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}
.welcome-plans__trust-icon { font-size: 1rem; line-height: 1.2; }
.welcome-plans__trust p { margin: 0; }
.welcome-plans__notice { margin: 0 0 1rem; }
.welcome-plans__group { margin-top: .5rem; }
.welcome-plans__group--spaced {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--card-border);
}
.welcome-plans__group-head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1rem;
}
.welcome-plans__group-head h3 {
    margin: 0 0 .2rem;
    font-family: var(--hh-font-display);
    font-size: 1.25rem;
    font-weight: 600;
}
.welcome-plans__group-head p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}
.welcome-plans__group-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-top: .15rem;
}
.welcome-plans__group-badge--empresas { background: rgba(15, 61, 92, .08); color: var(--primary); }
.welcome-plans__group-badge--personas { background: rgba(239, 91, 114, .12); color: #c43d57; }
.welcome-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.welcome-store .plan-card {
    --plan-accent: var(--accent);
    --plan-soft: rgba(31, 167, 160, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    min-height: 290px;
    width: 100%;
    padding: 1.35rem 1.25rem 1.15rem;
    border: 1px solid rgba(15, 61, 92, .08);
    border-left: 4px solid var(--plan-accent);
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 61, 92, .06);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.welcome-store .plan-card:hover {
    border-color: rgba(15, 61, 92, .12);
    border-left-color: var(--plan-accent);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(15, 61, 92, .1);
    text-decoration: none;
    color: var(--text);
}
.welcome-store .plan-card__mode {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .18rem .65rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.welcome-store .plan-card__mode--online {
    background: rgba(31, 167, 160, .14);
    color: #16857f;
}
.welcome-store .plan-card__mode--quote {
    background: rgba(38, 108, 145, .1);
    color: #266c91;
}
.welcome-store .plan-card__icon {
    margin: .15rem 0 .25rem;
    width: 58px;
    height: 58px;
    font-size: 1.65rem;
    border-radius: 16px;
    background: var(--plan-soft) !important;
}
.welcome-store .plan-card h4 {
    margin: 0;
    font-family: var(--hh-font-display);
    font-size: 1.16rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--primary);
    max-width: 16rem;
}
.welcome-store .plan-card__desc {
    margin: 0;
    flex: 1;
    color: #5f6c78;
    font-size: .86rem;
    line-height: 1.55;
    max-width: 18rem;
}
.welcome-store .plan-card__meta {
    margin: 0;
    color: #8a96a3;
    font-size: .78rem;
}
.welcome-store .plan-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    margin-top: .25rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(31, 167, 160, .1);
    color: var(--accent);
    font-size: .84rem;
    font-weight: 800;
}
.welcome-store .plan-card:hover .plan-card__cta {
    background: var(--accent);
    color: #fff;
}
.welcome-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: rgba(38, 108, 145, .07);
    border: 1px solid rgba(38, 108, 145, .1);
}
.welcome-support__copy {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.welcome-support__icon { font-size: 1.35rem; line-height: 1; }
.welcome-support__copy strong {
    display: block;
    margin-bottom: .15rem;
    font-size: .95rem;
}
.welcome-support__copy p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}
.welcome-support__cta { white-space: nowrap; }
@media (max-width: 960px) {
    .welcome-hero { grid-template-columns: 1fr; }
    .welcome-hero__visual { order: -1; max-width: 520px; }
    .welcome-plans__head { flex-direction: column; }
    .welcome-support { flex-direction: column; align-items: stretch; }
    .welcome-support__cta { width: 100%; text-align: center; }
}

/* ---------- Banner de estado vacío con llamado a la acción ---------- */
.empty-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: .4rem 0 1.5rem;
    border-radius: 16px;
    background: rgba(122, 107, 176, .08);
    border: 1px solid rgba(122, 107, 176, .18);
}
.empty-banner__copy { display: flex; align-items: flex-start; gap: .75rem; }
.empty-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(122, 107, 176, .16);
    font-size: 1.15rem;
}
.empty-banner__copy strong { display: block; margin-bottom: .15rem; font-size: .95rem; }
.empty-banner__copy p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.empty-banner__cta { white-space: nowrap; }
.empty-banner__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
@media (max-width: 640px) {
    .empty-banner { flex-direction: column; align-items: stretch; }
    .empty-banner__actions { flex-direction: column; }
    .empty-banner__cta { width: 100%; text-align: center; }
}
.plan-store { margin: 0 0 2.4rem; max-width: 760px; }
.plan-store__intro { margin-bottom: 1.5rem; }
.plan-store__eyebrow {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.plan-store__intro h2 {
    margin: 0 0 .45rem;
    font-family: var(--hh-font-display);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.1;
}
.plan-store__lead { margin: 0; color: var(--muted); line-height: 1.55; max-width: 38rem; }
.plan-store__notice { margin: 0 0 1rem; }
.plan-store__section-head { margin-bottom: .75rem; }
.plan-store__section-head h3 {
    margin: 0 0 .25rem;
    font-family: var(--hh-font-display);
    font-size: 1.05rem;
    font-weight: 600;
}
.plan-store__section-head p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.plan-store__section--spaced { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--card-border); }
.plan-store__list { display: grid; gap: .55rem; }
.plan-store__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg);
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--hh-shadow-sm);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.plan-store__item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--hh-shadow-md);
}
.plan-store__item--empresas { border-left: 3px solid var(--primary); }
.plan-store__item--personas { border-left: 3px solid var(--accent); }
.plan-store__item--ambos { border-left: 3px solid #7a6bb0; }
.plan-store__item-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.plan-store__item-main strong {
    font-family: var(--hh-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.25;
}
.plan-store__item-main small { color: var(--muted); font-size: .82rem; }
.plan-store__item-action {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.plan-detail-modal {
    width: min(560px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--hh-radius-lg);
    box-shadow: var(--hh-shadow-md);
}
.plan-detail-modal::backdrop { background: rgba(7, 24, 36, .45); }
.plan-detail-modal__shell {
    position: relative;
    padding: 1.5rem 1.5rem 1.35rem;
}
.plan-detail-modal__close {
    position: absolute;
    top: .65rem;
    right: .75rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.plan-detail-modal__eyebrow {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.plan-detail-modal__shell h3 {
    margin: 0 1.5rem .65rem 0;
    font-family: var(--hh-font-display);
    font-size: 1.55rem;
    line-height: 1.15;
}
.plan-detail-modal__desc {
    margin: 0 0 .85rem;
    color: var(--muted);
    line-height: 1.55;
}
.plan-detail-modal__price {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}
.plan-detail-modal__block h4 {
    margin: 0 0 .45rem;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.plan-detail-modal__block ol {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text);
    line-height: 1.5;
}
.plan-detail-modal__block li + li { margin-top: .35rem; }
.plan-detail-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.25rem;
}
.offer-section { margin-top: .9rem; }
.offer-section--spaced { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--card-border); }
.offer-section__head { max-width: 42rem; margin-bottom: .85rem; }
.offer-section__head h3 {
    margin: 0 0 .35rem;
    font-family: var(--hh-font-display);
    font-size: 1.2rem;
    font-weight: 600;
}
.offer-section__head p { margin: 0; color: var(--muted); line-height: 1.5; font-size: .92rem; }
.offer-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: .9rem;
}
.offer-card {
    display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.25rem;
    background: #fff; border: 1px solid var(--card-border); border-radius: var(--hh-radius-lg);
    box-shadow: var(--hh-shadow-sm);
}
.offer-card--empresas { border-top: 3px solid var(--primary); }
.offer-card--personas { border-top: 3px solid var(--accent); }
.offer-card--ambos { border-top: 3px solid #7a6bb0; }
.offer-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.offer-card__badge {
    display: inline-flex; align-items: center; min-height: 1.6rem; padding: .15rem .55rem;
    border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    white-space: nowrap;
}
.offer-card__badge--empresas { background: rgba(15, 61, 92, .08); color: var(--primary); }
.offer-card__badge--personas { background: rgba(239, 91, 114, .12); color: #c43d57; }
.offer-card__badge--ambos { background: rgba(122, 107, 176, .12); color: #5c4d96; }
.offer-card h3 { margin: 0; font-family: var(--hh-font-display); font-size: 1.25rem; }
.offer-card p { margin: 0; flex: 1; color: var(--muted); line-height: 1.5; font-size: .92rem; }
.offer-card strong { color: var(--accent); font-size: 1.02rem; }
.offer-card .btn { margin-top: .35rem; text-align: center; }
.learning-explore__next:hover { background: var(--primary); color: #fff; }

.learning-scenarios { margin: 0 0 2.4rem; }
.learning-scenarios h2 { font-family: var(--hh-font-display); font-size: 1.55rem; font-weight: 600; }
.learning-scenarios .scenario-list { margin-top: 1rem; }
.learning-scenarios .scenario-row__actions .btn { min-width: 118px; text-align: center; }
.path-lead { margin: .15rem 0 .85rem; color: var(--muted); max-width: 38rem; }
.section-heading__meta { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; }
.learning-crumb { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .55rem; font-size: .92rem; color: var(--muted); }
.learning-crumb a { font-weight: 800; }
.learning-crumb strong { color: var(--text); }
.path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.path-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 188px;
    padding: 1.15rem 1.2rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-lg);
    color: var(--text);
    box-shadow: var(--hh-shadow-sm);
}
.path-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); box-shadow: var(--hh-shadow-md); }
.path-card h3 { margin: .15rem 0 0; font-family: var(--hh-font-display); font-size: 1.35rem; }
.path-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.path-card small { margin-top: auto; color: var(--accent); font-weight: 800; font-size: .78rem; }
.course-compact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.course-compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--hh-radius-md);
}
.course-compact .learning-card-icon--sm { margin: 0; width: 44px; height: 44px; font-size: 1.25rem; }
.course-compact h3 { margin: 0; font-size: 1rem; }
.course-compact p { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }

.team-hero { margin-bottom: 0; }
.team-hero .eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.team-actions {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 0;
}
.team-action-card {
    display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.2rem; background: #fff;
    border: 1px solid var(--card-border); border-radius: var(--hh-radius-lg); color: var(--text); box-shadow: var(--hh-shadow-sm);
}
.team-action-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); box-shadow: var(--hh-shadow-md); }
.team-action-card small { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.team-action-card strong { font-size: 1.12rem; }
.team-action-card span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.team-columns { margin-top: 1.2rem; }
.team-people, .team-activity { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.team-people li, .team-activity li {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .2rem;
    border-bottom: 1px solid var(--card-border);
}
.team-people li { justify-content: flex-start; }
.team-people .topbar-avatar { width: 34px; height: 34px; font-size: .82rem; background: var(--accent); }
.team-people strong, .team-activity strong { display: block; }
.team-people small, .team-activity span, .team-activity small { display: block; color: var(--muted); font-size: .82rem; }
.team-activity em { color: var(--accent); font-style: normal; font-weight: 800; }

@media (max-width: 980px) {
    .team-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .learning-continue-card { grid-template-columns: auto minmax(0, 1fr); }
    .learning-continue-card__aside { grid-column: 1 / -1; align-items: stretch; width: 100%; }
    .learning-continue-card__aside .btn { width: 100%; }
    .team-actions { grid-template-columns: 1fr; }
    .topbar-user__identity { display: none; }
}

/* ---------- Mi equipo: cabecera, motivación y roster ---------- */
.team-hub-head { margin-bottom: 0; }
.team-hub-head .eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }

.team-motivate__progress { margin: 1rem 0 1.3rem; }
.team-motivate__progress-bar { height: .55rem; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin-bottom: .55rem; }
.team-motivate__progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 999px; transition: width .3s ease; }
.team-motivate__block { margin-top: 1.3rem; }
.team-motivate__block h3 { font-size: .95rem; margin: 0 0 .6rem; color: var(--primary); }
.team-motivate__leaderboard, .team-motivate__nudge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.team-motivate__leaderboard li {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .2rem; border-bottom: 1px solid var(--card-border);
}
.team-motivate__medal { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.team-motivate__leaderboard strong, .team-motivate__nudge-list strong { display: block; }
.team-motivate__leaderboard small, .team-motivate__nudge-list small { display: block; color: var(--muted); font-size: .82rem; }
.team-motivate__nudge-list li {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .2rem; border-bottom: 1px solid var(--card-border);
}

.seat-usage {
    background: var(--card-bg, #fff); border: 1px solid var(--card-border); border-radius: 14px;
    padding: .9rem 1.1rem; margin: .8rem 0 1.2rem; max-width: 420px;
}
.seat-usage__label { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: .88rem; color: var(--muted); }
.seat-usage__label strong { font-size: 1rem; color: var(--primary); }
.seat-usage__bar { height: .5rem; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin: .5rem 0 .4rem; }
.seat-usage__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 999px; transition: width .3s ease; }
.seat-usage__hint { margin: 0; font-size: .82rem; color: var(--muted); }
.seat-usage.is-warn .seat-usage__bar span { background: linear-gradient(90deg, #e8a33d, #e8a33d); }
.seat-usage.is-warn .seat-usage__label strong { color: #b5760c; }
.seat-usage.is-full { border-color: rgba(214,69,69,.4); background: rgba(214,69,69,.06); }
.seat-usage.is-full .seat-usage__bar span { background: var(--danger, #d64545); }
.seat-usage.is-full .seat-usage__label strong, .seat-usage.is-full .seat-usage__hint { color: var(--danger, #d64545); }

.team-roster th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.team-roster th[data-sort-key]:hover { color: var(--primary); }
.team-roster th[data-sort-key]::after { content: '↕'; margin-left: .3rem; color: var(--muted); font-size: .78em; }
.team-roster th[data-sort-active="asc"]::after { content: '↑'; color: var(--accent); }
.team-roster th[data-sort-active="desc"]::after { content: '↓'; color: var(--accent); }
.team-roster td { vertical-align: middle; }

.course-welcome { max-width:960px; margin:4vh auto; padding:clamp(2rem,6vw,5rem); overflow:hidden; position:relative; }
.course-welcome::after { content:""; position:absolute; width:300px; height:300px; right:-100px; top:-120px; background:radial-gradient(circle,rgba(31,167,160,.26),transparent 68%); pointer-events:none; }
.course-welcome h1 { max-width:760px; font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; }
.course-welcome-lead { max-width:720px; color:var(--muted); font-size:1.2rem; line-height:1.7; }
.course-welcome-stats { display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0; }
.course-welcome-stats span { padding:.75rem 1rem; background:var(--bg-soft); border-radius:999px; }
.course-welcome-stats strong { color:var(--accent); }
.course-objectives { max-width:760px; margin:2rem 0; padding:1.3rem; background:rgba(31,167,160,.08); border-left:4px solid var(--accent); border-radius:0 var(--hh-radius-md) var(--hh-radius-md) 0; }
.course-progress-head { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin:.6rem 0 1rem; padding:.75rem 1rem; background:#fff; border:1px solid var(--card-border); border-radius:var(--hh-radius-md); }
.course-progress-head > div:first-child { display:flex; flex-direction:column; }
.course-progress-actions{display:flex;align-items:center;gap:.9rem}
.course-progress-meter { display:grid; grid-template-columns:minmax(180px,300px) auto; align-items:center; gap:.7rem; }
.course-progress-meter > span { height:8px; overflow:hidden; background:var(--card-border); border-radius:999px; }
.course-progress-meter i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--hh-coral)); border-radius:inherit; }
.course-player-grid { display:grid; grid-template-columns:250px minmax(460px,1fr) 320px; gap:1rem; align-items:start; }
.course-unit-transition{max-width:780px;margin:5vh auto;padding:clamp(2rem,5vw,4rem);text-align:center;background:linear-gradient(145deg,#fff,#effcfa)}.course-unit-transition h1{font-size:clamp(2rem,4vw,3.3rem);margin:.25rem 0 .8rem}.course-unit-transition>p{max-width:620px;margin:0 auto;color:var(--muted);font-size:1.13rem;line-height:1.6}.course-unit-transition__stats{display:flex;justify-content:center;flex-wrap:wrap;gap:.65rem;margin:1.8rem 0}.course-unit-transition__stats span{padding:.55rem .8rem;border-radius:999px;background:#fff;color:var(--primary);font-weight:700}.course-unit-transition__actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.75rem}
.course-player { font-family:var(--course-brand-body,inherit); }
.course-player h1,.course-player h2,.course-player h3,.course-player h4 { font-family:var(--course-brand-heading,var(--hh-font-display)); }
.course-player .btn-primary { background:var(--course-brand-accent,var(--accent)); }
.course-brand-logo { display:block; width:min(180px,32%); max-height:90px; margin:0 0 1rem auto; object-fit:contain; }
.course-map,.course-tutor { position:sticky; top:82px; max-height:calc(100vh - 100px); overflow:auto; padding:1rem; }
.course-map h3 { margin:1rem 0 .4rem; color:var(--accent); font-size:.72rem; text-transform:uppercase; }
.course-map h3 span { display:block; margin-top:.15rem; color:var(--primary); font-size:.9rem; text-transform:none; }
.course-map h4 { margin:.8rem 0 .35rem; color:var(--muted); font-size:.75rem; }
.course-map a { display:flex; align-items:center; gap:.55rem; margin:.25rem 0; padding:.55rem; color:var(--muted); text-decoration:none; border-radius:8px; font-size:.8rem; }
.course-map-locked { display:flex; align-items:center; gap:.55rem; margin:.25rem 0; padding:.55rem; color:var(--muted); opacity:.48; font-size:.8rem; }
.course-map-locked b { display:grid; place-items:center; flex:0 0 24px; height:24px; background:var(--card-border); border-radius:50%; font-size:.68rem; }
.course-map a:hover,.course-map a.active { color:var(--primary); background:rgba(31,167,160,.1); }
.course-map a b { display:grid; place-items:center; flex:0 0 24px; height:24px; background:var(--card-border); border-radius:50%; font-size:.68rem; }
.course-map a.done b { color:#fff; background:var(--ok); }
.course-scene { min-height:70vh; padding:clamp(1.4rem,4vw,3rem); }
.course-scene h1 { margin:.4rem 0 1.4rem; font-size:clamp(2rem,4vw,3.3rem); }
.course-scene-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.course-scene-title-row h1 { flex:1; }
.course-narration-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; max-width:280px; }
.course-narration-controls label { display:flex; align-items:center; gap:.35rem; margin:0; color:var(--muted); font-size:.75rem; white-space:nowrap; }
.course-narration-controls input { width:auto; }
.course-narration-controls small { width:100%; color:var(--muted); text-align:right; }
.course-scene-explanation { color:var(--primary); font-size:1.12rem; line-height:1.8; }
.course-explain-row { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:.9rem 0 1.2rem; }
.course-explain-row small { color:var(--muted); }
.course-explain-row--resource { margin-top:-1rem; }
.course-explain-button { display:inline-flex; align-items:center; justify-content:center; gap:.42rem; padding:.62rem .9rem; color:var(--primary); background:#fff; border:1px solid rgba(31,167,160,.42); border-radius:999px; box-shadow:0 4px 14px rgba(11,32,48,.06); cursor:pointer; font:inherit; font-size:.82rem; font-weight:800; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.course-explain-button span { color:var(--accent); }
.course-explain-button:hover { transform:translateY(-1px); background:rgba(31,167,160,.08); border-color:var(--accent); }
.course-explain-button:focus-visible { outline:3px solid rgba(31,167,160,.22); outline-offset:2px; }
.course-explain-button:disabled { opacity:.58; cursor:wait; transform:none; }
.course-explain-button--compact { flex:0 0 auto; margin-top:.2rem; }
.course-check-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.course-check-heading h2 { margin-top:0; }
.course-media { margin:2rem 0; overflow:hidden; background:var(--bg-soft); border:1px solid var(--card-border); border-radius:var(--hh-radius-lg); }
.course-media img,.course-media video { display:block; width:100%; }
.course-media figcaption { padding:.7rem 1rem; color:var(--muted); font-size:.8rem; }
.course-interaction { margin:2rem 0; padding:1.3rem; background:linear-gradient(135deg,rgba(31,167,160,.1),rgba(91,124,250,.08)); border:1px solid rgba(31,167,160,.25); border-radius:var(--hh-radius-lg); }
.course-interaction h2 { margin-top:0; }
.interaction-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.interaction-cards button { display:flex; align-items:center; gap:.7rem; padding:1rem; text-align:left; background:#fff; border:2px solid transparent; border-radius:var(--hh-radius-md); cursor:pointer; }
.interaction-cards button.selected { border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,167,160,.12); }
.interaction-cards button span { display:grid; place-items:center; flex:0 0 28px; height:28px; color:#fff; background:var(--accent); border-radius:50%; font-weight:900; }
.interaction-note { margin-bottom:0; color:var(--muted); font-size:.8rem; }
.prompt-builder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.prompt-builder label { margin:0; font-size:.75rem; }
.prompt-builder textarea { margin-top:.3rem; }
.prompt-result { padding:1rem; white-space:pre-wrap; background:#0b1530; color:#fff; border-radius:8px; }
.course-check { margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--card-border); }
.course-option { display:flex; align-items:center; gap:.8rem; margin:.55rem 0; padding:.85rem; border:1px solid var(--card-border); border-radius:var(--hh-radius-sm); cursor:pointer; }
.course-option:has(input:checked) { border-color:var(--accent); background:rgba(31,167,160,.07); }
.course-option input { width:auto; }
.course-check-feedback { margin:.7rem 0; padding:.7rem; border-radius:8px; }
.course-check-feedback:empty { display:none; }
.course-check-feedback.is-ok { color:var(--ok); background:rgba(36,122,90,.08); }
.course-check-feedback.is-error { color:var(--danger); background:rgba(190,60,60,.08); }
.course-scenario-assessment{margin-top:1.5rem;padding:1.4rem;border:1px solid #bde9e6;border-radius:18px;background:linear-gradient(135deg,#effcfb,#f4f7ff)}
.course-scenario-assessment h2{margin:.2rem 0 .45rem}
.course-scenario-assessment__target{display:inline-block;padding:.45rem .75rem;border-radius:999px;background:#fff;color:#173d61;font-weight:700}
.course-scenario-assessment__status{min-height:1.4em;margin:.8rem 0;font-weight:600}
.course-scenario-assessment__status.is-ok{color:var(--ok)}
.course-scenario-assessment__status.is-error{color:var(--danger)}
.course-scenario-assessment__status.is-pending{color:#705400}
.course-scenario-assessment [hidden]{display:none!important}
.course-scenario-review{position:fixed;z-index:10050;inset:0;display:grid;place-items:center;padding:1.25rem;background:rgba(8,25,42,.62);backdrop-filter:blur(5px);animation:course-review-in .18s ease-out}.course-scenario-review__dialog{width:min(100%,510px);padding:2rem;border:1px solid rgba(147,232,223,.58);border-radius:24px;background:linear-gradient(145deg,#fff,#f1fbfb);box-shadow:0 24px 70px rgba(0,0,0,.3);text-align:center}.course-scenario-review__dialog h2{margin:.35rem 0 .6rem;color:var(--primary);font-size:clamp(1.45rem,3vw,2rem)}.course-scenario-review__dialog>p:not(.eyebrow){margin:0 auto;color:var(--muted);line-height:1.55;max-width:38ch}.course-scenario-review__icon{width:68px;height:68px;margin:0 auto .8rem;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--accent),#72dfd7);color:#fff;font-size:2rem;font-weight:800;box-shadow:0 0 0 8px rgba(31,167,160,.11);animation:course-review-pulse 1.3s ease-in-out infinite}.course-scenario-review__icon.is-error{background:var(--danger);animation:none}.course-scenario-review__progress{display:flex;justify-content:center;gap:.5rem;margin:1.5rem 0 .25rem}.course-scenario-review__progress i{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:course-review-dot .9s ease-in-out infinite}.course-scenario-review__progress i:nth-child(2){animation-delay:.15s}.course-scenario-review__progress i:nth-child(3){animation-delay:.3s}.course-scenario-review__dialog .btn{margin-top:1.25rem}@keyframes course-review-in{from{opacity:0}to{opacity:1}}@keyframes course-review-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 14px rgba(31,167,160,.04)}}@keyframes course-review-dot{50%{transform:translateY(-7px);opacity:.45}}
.course-scenario-assessment__experience{margin:1rem 0;overflow:hidden;border:1px solid rgba(31,167,160,.32);border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(11,32,48,.1)}
.course-scenario-live{background:#fff}.course-scenario-live>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid #dce7ee}.course-scenario-live__person{display:flex;gap:.8rem;align-items:center}.course-scenario-live__person>span,.course-scenario-live__person img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#ecf9f8;display:grid;place-items:center;font-size:1.55rem}.course-scenario-live__person small{display:block;color:var(--accent);font-weight:800;letter-spacing:.08em}.course-scenario-live__person strong,.course-scenario-live__person em{display:block}.course-scenario-live__person em{color:var(--muted);font-style:normal;font-size:.86rem}.course-scenario-live__instructions{padding:.6rem 1.15rem;background:#f6fbfb;color:var(--muted)}.course-scenario-live__instructions summary{font-weight:700;color:var(--primary);cursor:pointer}.course-scenario-chat{display:flex;flex-direction:column;gap:.7rem;min-height:300px;max-height:520px;overflow:auto;padding:1.15rem;background:linear-gradient(180deg,#f9fcfd,#fff)}.course-scenario-chat__message{max-width:82%;padding:.75rem .9rem;border-radius:14px;white-space:pre-wrap;line-height:1.45}.course-scenario-chat__message.is-counterpart{align-self:flex-start;background:#102b46;color:#fff;border-bottom-left-radius:3px}.course-scenario-chat__message.is-participant{align-self:flex-end;background:#e6f8f6;color:#12354f;border-bottom-right-radius:3px}.course-scenario-chat__message.is-waiting{align-self:flex-start;color:var(--muted);background:#f0f3f5}.course-scenario-chat__message.is-error{align-self:flex-start;color:#a32d28;background:#fff0ef}.course-scenario-chat__form{padding:1rem 1.15rem;border-top:1px solid #dce7ee}.course-scenario-chat__form textarea{width:100%;resize:vertical}.course-scenario-chat__form>div{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.65rem}.course-scenario-auto{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--primary);white-space:nowrap}.course-scenario-auto input{width:auto}.course-scenario-chat__form small{display:block;min-height:1.2em;margin-top:.5rem;color:var(--muted)}.course-scenario-result{margin:1rem 0;padding:1.2rem;border-radius:16px;border:1px solid #cfe6e5;background:#fff}.course-scenario-result.is-pass{border-color:#9ed8ba;background:#f2fbf6}.course-scenario-result.is-fail{border-color:#f0c5be;background:#fff8f6}.course-scenario-result__score{display:flex;align-items:baseline;gap:.65rem}.course-scenario-result__score strong{font-size:2rem;color:var(--primary)}.course-scenario-result__summary{font-weight:600}.course-scenario-result details{margin-top:.8rem}.course-scenario-result summary{cursor:pointer;font-weight:800;color:var(--primary)}.course-scenario-result__detail{margin-top:.75rem}.course-scenario-result__detail article{margin:.6rem 0;padding:.7rem;border-left:3px solid var(--accent);background:#fff}.course-scenario-result__detail p{margin:.35rem 0}.course-evaluation-summary{margin:1.25rem 0}.course-evaluation-summary h2{margin:.2rem 0}.course-evaluation-summary__list{display:grid;gap:.6rem}.course-evaluation-summary__list article{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid #e2e8eb;border-radius:12px;background:#fff}.course-evaluation-summary__list small{display:block;color:var(--muted);margin-top:.2rem}.course-evaluation-summary__list b{margin-right:.5rem;color:var(--primary)}.course-evaluation-summary__list span{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.82rem;font-weight:700}.course-evaluation-summary__list .is-pass{background:#dcf6e6;color:#176a43}.course-evaluation-summary__list .is-pending{background:#fff0e4;color:#9a4813}.course-evaluation-summary--final{margin:1.4rem 0;text-align:left}
.course-scenario-live{background:#fff}.course-scenario-live>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid #dce7ee}.course-scenario-live__person{display:flex;gap:.8rem;align-items:center}.course-scenario-live__person>span,.course-scenario-live__person img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#ecf9f8;display:grid;place-items:center;font-size:1.55rem}.course-scenario-live__person small{display:block;color:var(--accent);font-weight:800;letter-spacing:.08em}.course-scenario-live__person strong,.course-scenario-live__person em{display:block}.course-scenario-live__person em{color:var(--muted);font-style:normal;font-size:.86rem}.course-scenario-live__instructions{padding:.6rem 1.15rem;background:#f6fbfb;color:var(--muted)}.course-scenario-live__instructions summary{font-weight:700;color:var(--primary);cursor:pointer}.course-scenario-chat{display:flex;flex-direction:column;gap:.7rem;min-height:300px;max-height:520px;overflow:auto;padding:1.15rem;background:linear-gradient(180deg,#f9fcfd,#fff)}.course-scenario-chat__message{max-width:82%;padding:.75rem .9rem;border-radius:14px;white-space:pre-wrap;line-height:1.45}.course-scenario-chat__message.is-counterpart{align-self:flex-start;background:#102b46;color:#fff;border-bottom-left-radius:3px}.course-scenario-chat__message.is-participant{align-self:flex-end;background:#e6f8f6;color:#12354f;border-bottom-right-radius:3px}.course-scenario-chat__message.is-waiting{align-self:flex-start;color:var(--muted);background:#f0f3f5}.course-scenario-chat__message.is-error{align-self:flex-start;color:#a32d28;background:#fff0ef}.course-scenario-visual{align-self:flex-start;width:min(100%,620px);padding:.85rem 1rem;border:1px solid #a9e1dc;border-radius:14px;background:linear-gradient(135deg,#ebfbf9,#f1f5ff);box-shadow:0 5px 14px rgba(16,43,70,.08)}.course-scenario-visual>small{display:block;font-weight:800;letter-spacing:.09em;color:#168d86}.course-scenario-visual>strong{display:block;margin:.2rem 0 .65rem;color:#173d61}.course-scenario-visual__steps{display:flex;flex-wrap:wrap;gap:.45rem}.course-scenario-visual__steps span{padding:.38rem .7rem;border-radius:999px;background:#fff;color:#526473;font-weight:700}.course-scenario-visual__steps .is-active{background:#173d61;color:#fff;box-shadow:0 0 0 3px #58d6ca}.course-scenario-visual__assets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}.course-scenario-visual__assets span{padding:.32rem .55rem;border-radius:8px;background:#fff;color:#173d61;font-weight:700}.course-scenario-chat__form{padding:1rem 1.15rem;border-top:1px solid #dce7ee}.course-scenario-chat__form textarea{width:100%;resize:vertical}.course-scenario-chat__form>div{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.65rem}.course-scenario-auto{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--primary);white-space:nowrap}.course-scenario-auto input{width:auto}.course-scenario-live.is-recording .course-scenario-chat__form{background:#fff5f3}.course-scenario-live.is-recording [data-scenario-mic]{border-color:#da3d34;background:#fff;color:#b72b24;box-shadow:0 0 0 4px rgba(218,61,52,.12);font-weight:800}.course-scenario-live.is-recording [data-scenario-mic] span{display:inline-block;animation:course-mic-pulse 1s infinite}.course-scenario-chat__form small{display:block;min-height:1.2em;margin-top:.5rem;color:var(--muted)}@keyframes course-mic-pulse{50%{transform:scale(1.25)}}.course-scenario-result{margin:1rem 0;padding:1.2rem;border-radius:16px;border:1px solid #cfe6e5;background:#fff}.course-scenario-result.is-pass{border-color:#9ed8ba;background:#f2fbf6}.course-scenario-result.is-fail{border-color:#f0c5be;background:#fff8f6}.course-scenario-result__score{display:flex;align-items:baseline;gap:.65rem}.course-scenario-result__score strong{font-size:2rem;color:var(--primary)}.course-scenario-result__summary{font-weight:600}.course-scenario-result details{margin-top:.8rem}.course-scenario-result summary{cursor:pointer;font-weight:800;color:var(--primary)}.course-scenario-result__detail{margin-top:.75rem}.course-scenario-result__detail article{margin:.6rem 0;padding:.7rem;border-left:3px solid var(--accent);background:#fff}.course-scenario-result__detail p{margin:.35rem 0}.course-evaluation-summary{margin:1.25rem 0}.course-evaluation-summary h2{margin:.2rem 0}.course-evaluation-summary__list{display:grid;gap:.6rem}.course-evaluation-summary__list article{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid #e2e8eb;border-radius:12px;background:#fff}.course-evaluation-summary__list small{display:block;color:var(--muted);margin-top:.2rem}.course-evaluation-summary__list b{margin-right:.5rem;color:var(--primary)}.course-evaluation-summary__list span{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.82rem;font-weight:700}.course-evaluation-summary__list .is-pass{background:#dcf6e6;color:#176a43}.course-evaluation-summary__list .is-pending{background:#fff0e4;color:#9a4813}.course-evaluation-summary--final{margin:1.4rem 0;text-align:left}
.embedded-experience{background:var(--bg,#f7f5f2)}
.container--embedded{width:100%;max-width:none;min-height:100vh;margin:0;padding:1rem}
.play-layout--embedded{max-width:none;margin:0}
.play-layout--embedded .play-area{height:calc(100vh - 2rem)}
@media(max-width:760px){.course-scenario-live>header,.course-scenario-chat__form>div,.course-evaluation-summary__list article{align-items:flex-start;flex-direction:column}.course-scenario-chat{min-height:250px}.container--embedded{padding:.55rem}.play-layout--embedded .play-area{height:calc(100vh - 1.1rem)}}
.course-report{max-width:1120px;margin:1.5rem auto 4rem;color:var(--primary)}.course-report__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.course-report__top>a{font-weight:800;color:var(--primary)}.course-report__hero{position:relative;overflow:hidden;padding:clamp(2rem,5vw,4.2rem);border-radius:26px;background:linear-gradient(135deg,#102b46 0%,#173d61 60%,#1ca9a0 155%);color:#fff;box-shadow:0 18px 42px rgba(16,43,70,.2)}.course-report__hero::after{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-160px;border-radius:50%;background:rgba(116,233,219,.22)}.course-report__hero>*{position:relative;z-index:1}.course-report__hero .eyebrow{color:#74e9db}.course-report__hero h1{max-width:780px;margin:.3rem 0 .85rem;font-size:clamp(2.1rem,5vw,4.1rem);line-height:1.05}.course-report__hero>p:not(.eyebrow){max-width:700px;margin:0;font-size:1.13rem;line-height:1.55;color:#dcecf3}.course-report__metrics{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 1.25rem}.course-report__metrics div{min-width:155px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(5,21,37,.2);backdrop-filter:blur(8px)}.course-report__metrics strong,.course-report__metrics span{display:block}.course-report__metrics strong{font-size:1.5rem}.course-report__metrics span{margin-top:.15rem;color:#dcecf3;font-size:.86rem}.course-report__meter,.course-report-unit__meter{height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.24)}.course-report__meter i,.course-report-unit__meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69e0d6,#ff8b6d)}.course-report__next{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.25rem 0;padding:1.25rem 1.5rem;border:1px solid #bde9e6;border-radius:18px;background:linear-gradient(135deg,#f1fcfb,#fff)}.course-report__next h2{margin:.15rem 0}.course-report__next p:last-child{margin:.25rem 0 0;color:var(--muted)}.course-report-insights{margin:1.25rem 0;padding:clamp(1.25rem,3vw,2rem);border:1px solid #c9e9e5;border-radius:22px;background:linear-gradient(135deg,#effcfa,#f5f7ff)}.course-report-insights>header{display:flex;justify-content:space-between;gap:1rem;align-items:start}.course-report-insights>header h2{margin:.2rem 0 .4rem}.course-report-insights>header p:last-child{margin:0;max-width:760px;color:var(--muted);line-height:1.5}.course-report-insights>header>span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.35rem}.course-report-insights__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.25rem 0}.course-report-insights__grid article{padding:1.1rem;border-radius:15px;background:#fff}.course-report-insights__grid h3{margin:0 0 .6rem}.course-report-insights__grid ul{margin:0;padding-left:1.2rem}.course-report-insights__grid li{margin:.4rem 0;line-height:1.45}.course-report-insights__grid p{margin:0;color:var(--muted);line-height:1.5}.course-report-insights__grid .is-strength{border-left:4px solid #25845e}.course-report-insights__grid .is-improvement{border-left:4px solid #ff805f}.course-report-insights>small{color:var(--muted)}.course-report__body{margin-top:1.5rem;padding:clamp(1.2rem,3vw,2.2rem);border:1px solid var(--card-border);border-radius:22px;background:#fff}.course-report__heading{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.25rem}.course-report__heading h2{margin:.2rem 0}.course-report__heading small{color:var(--muted)}.course-report-unit{margin-top:1rem;padding:1.25rem;border:1px solid #e0e8ed;border-radius:18px;background:#fbfdfd}.course-report-unit.is-complete{border-color:#a4e1c1;background:#f5fcf8}.course-report-unit>header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.course-report-unit>header span,.course-report-modules small{display:block;color:var(--accent);font-weight:800;letter-spacing:.09em;font-size:.74rem}.course-report-unit h2{margin:.16rem 0}.course-report-unit>header>b{padding:.45rem .7rem;border-radius:999px;background:#fff;color:var(--primary);white-space:nowrap}.course-report-unit__meter{height:7px;margin:1rem 0;background:#e6edf0}.course-report-unit__meter i{background:var(--accent)}.course-report-modules{display:grid;gap:.65rem}.course-report-modules>article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;padding:1rem;border-radius:13px;background:#fff;border:1px solid #edf1f3}.course-report-module__icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#eef3f5;color:#71808a;font-weight:900}.course-report-modules>article.is-complete .course-report-module__icon{background:#25845e;color:#fff}.course-report-modules h3{margin:.15rem 0;color:var(--primary)}.course-report-modules p{margin:.1rem 0;color:var(--muted);font-size:.9rem}.course-report-module__assessment{margin-top:.45rem!important;color:#173d61!important}.course-report-module__assessment strong{color:#25845e}.course-report-module__state{font-weight:800;color:#7a8790}.course-report-modules>article.is-complete .course-report-module__state{color:#25845e}.course-report__footer{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}@media print{.topbar,.footer,.no-print{display:none!important}.container{width:100%;max-width:none;margin:0;padding:0}.course-report{margin:0;max-width:none}.course-report__hero{border-radius:0;box-shadow:none}.course-report__body{border:0;padding:1rem 0}.course-report-unit{break-inside:avoid}.course-report__next,.course-report-insights{break-inside:avoid}.course-report-unit,.course-report-modules>article{box-shadow:none}}
.course-report-unit__insight{margin-top:1rem;padding:1rem;border-radius:14px;background:linear-gradient(135deg,#effcfa,#fff);border:1px solid #c9e9e5}.course-report-unit__insight h3{margin:.2rem 0}.course-report-unit__insight>p:not(.eyebrow){margin:.3rem 0 .8rem;color:var(--muted)}.course-report-unit__insight>div{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.course-report-unit__insight article{padding:.8rem;border-radius:10px;background:#fff}.course-report-unit__insight article.is-strength{border-left:3px solid #25845e}.course-report-unit__insight article.is-improvement{border-left:3px solid #ff805f}.course-report-unit__insight ul{margin:.45rem 0 0;padding-left:1.1rem}.course-report-unit__insight li{margin:.3rem 0;line-height:1.4}.course-report-unit__insight span{display:block;margin-top:.45rem;color:var(--muted);line-height:1.4}
.course-report__participant{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .7rem;margin-top:1.2rem;padding:.75rem .9rem;border:1px solid rgba(255,255,255,.25);border-radius:13px;background:rgba(5,21,37,.2);width:max-content;max-width:100%}.course-report__participant span{color:#9aece4;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:.7rem}.course-report__participant strong{font-size:1rem}.course-report__participant small{color:#dcecf3}.course-report__participant b{padding:.32rem .55rem;border-radius:999px;font-size:.76rem}.course-report__participant b.is-pass{background:#d7f5e3;color:#176a43}.course-report__participant b.is-pending{background:#fff0e4;color:#9a4813}.course-report-module__state.is-pass{color:#176a43}.course-report-module__state.is-pending{color:#9a4813}.course-report-modules p small{font-size:.78rem;color:#627584}
/* Las asociaciones antiguas quedan ocultas: la simulación se configura dentro de cada escena. */
.course-episode-assessment,.course-scene-assessment{display:none}
.scene-scenario-assessment-editor{margin:1rem 0;padding:1rem 1.1rem;border:1px solid #bde9e6;border-radius:16px;background:linear-gradient(135deg,#f1fcfb,#f5f8ff)}
.scene-scenario-assessment-editor header{display:flex;align-items:center;justify-content:space-between}
.scene-scenario-assessment-editor header small{display:block;color:var(--accent);font-weight:800;letter-spacing:.1em}
.scene-scenario-assessment-editor header strong{display:block;margin-top:.2rem;color:var(--primary);font-size:1.08rem}
.scene-scenario-assessment-editor>p{margin:.45rem 0 .85rem;color:var(--muted)}
.scene-scenario-assessment-editor__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.scene-scenario-assessment-editor.is-disabled input[name="scenario_passing_score"]{opacity:.55}
@media(max-width:760px){.scene-scenario-assessment-editor__fields{grid-template-columns:1fr}}
.unit-closure-card{margin:1.1rem 0 .4rem;padding:1.05rem 1.15rem;border:1px solid #bde9e6;border-radius:18px;background:linear-gradient(135deg,#f1fcfb,#f7f8ff)}
.unit-closure-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.unit-closure-card>header small{display:block;color:var(--accent);font-weight:800;letter-spacing:.1em}
.unit-closure-card>header strong{display:block;margin-top:.15rem;color:var(--primary);font-size:1.08rem}
.unit-closure-card>p{margin:.45rem 0 .85rem;color:var(--muted);line-height:1.5}
.unit-closure-card__state{flex:none;padding:.28rem .7rem;border-radius:999px;background:#eef3f5;color:#627584;font-size:.78rem;font-weight:800}
.unit-closure-card__state.is-on{background:#d7f5e3;color:#176a43}
.unit-closure-summary{margin:.2rem 0 .8rem;color:var(--primary);line-height:1.5}
.unit-closure-warning{padding:.7rem .85rem;border-radius:12px;background:#fff6e8;color:#9a4813;font-size:.9rem}
.unit-closure-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:.4rem}
.unit-closure-fields label{margin:0}
.unit-closure-label{margin:1rem 0 .4rem;font-weight:800;color:var(--primary)}
.unit-closure-topics{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.unit-closure-topics li{padding:.75rem .9rem;border:1px solid #e0e8ed;border-radius:12px;background:#fff}
.unit-closure-topics label{display:grid;grid-template-columns:1.15rem minmax(0,1fr);gap:.75rem;align-items:start;margin:0;font-size:.95rem;color:var(--primary);font-weight:700}
.unit-closure-topics input[type="checkbox"]{width:1.15rem;height:1.15rem;margin:.15rem 0 0;padding:0;flex:none;accent-color:var(--accent);border-radius:4px}
.unit-closure-topics strong{display:block;color:var(--primary);line-height:1.35}
.unit-closure-topics small{display:block;margin-top:.25rem;color:var(--muted);font-weight:500;line-height:1.45}
.unit-closure-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}
.unit-closure-loading{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.6rem 1rem;text-align:center}
.unit-closure-loading p{margin:0;color:var(--primary);font-weight:700}
.unit-closure-loading small{color:var(--muted)}
.unit-closure-spinner{width:2.1rem;height:2.1rem;border:3px solid #d7efed;border-top-color:var(--accent);border-radius:50%;animation:unit-closure-spin .8s linear infinite}
@keyframes unit-closure-spin{to{transform:rotate(360deg)}}
.course-player-grid.is-assessment{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
.course-player-grid.is-assessment .course-tutor{display:none}
.course-scene.is-conversation{display:flex;flex-direction:column;min-height:calc(100vh - 130px);padding:clamp(1rem,2.5vw,1.6rem);gap:.55rem}
.course-scene.is-conversation > .eyebrow{margin:0}
.course-scene.is-conversation .course-scene-title-row{margin:0}
.course-scene.is-conversation h1{margin:.15rem 0 .2rem;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2}
.course-scene.is-conversation .course-scenario-assessment{flex:1;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.course-scene.is-conversation .course-scenario-assessment__target{margin:0}
.course-scene.is-conversation .course-scenario-assessment__status{margin:.35rem 0}
.course-scene.is-conversation .course-scenario-assessment__experience{flex:1;display:flex;flex-direction:column;min-height:420px;margin:0;box-shadow:none}
.course-scene.is-conversation .course-scenario-live{flex:1;display:flex;flex-direction:column;min-height:0}
.course-scene.is-conversation .course-scenario-chat{flex:1;min-height:280px;max-height:none}
@media(max-width:760px){.unit-closure-fields{grid-template-columns:1fr}.course-player-grid.is-assessment{grid-template-columns:1fr}}
.scenario-owner-banner{margin:0 0 1rem;padding:.8rem .95rem;border-radius:12px;background:#eef6f6;border:1px solid #cfe6e3;display:flex;flex-direction:column;gap:.2rem}
.scenario-owner-banner strong{color:var(--primary);font-size:.95rem}
.scenario-owner-banner span{color:var(--muted);font-size:.88rem;line-height:1.45}
.scenario-owner-banner.is-foreign{background:#fff6e8;border-color:#f0d2a8}
.scenario-owner-banner.is-foreign strong{color:#9a4813}
#scenarioBriefModal h2{margin-bottom:.35rem}
#scenarioBriefLead{margin-bottom:1rem}
.scenario-brief-meta{margin:.15rem 0 1rem;color:var(--accent);font-weight:800;font-size:.86rem;letter-spacing:.04em}
.scenario-brief-advanced{margin:.85rem 0 0;text-align:left}
.scenario-brief-advanced .btn{padding:0;color:var(--muted);text-decoration:underline}
.voice-response { margin:1rem 0; padding:1.2rem; background:linear-gradient(145deg,#f6fbfb,#f3f5ff); border:1px solid rgba(31,167,160,.28); border-radius:var(--hh-radius-lg); }
.voice-response__prompt { display:flex; align-items:center; gap:.8rem; }
.voice-response__prompt > div { display:flex; flex-direction:column; }
.voice-response__prompt small { color:var(--muted); line-height:1.45; }
.voice-response__icon { display:grid; place-items:center; width:44px; height:44px; color:#fff; background:linear-gradient(135deg,var(--accent),#5b7cfa); border-radius:50%; font-size:1.2rem; }
.voice-response__criteria { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0; padding:0; list-style:none; }
.voice-response__criteria li { display:flex; align-items:center; gap:.35rem; padding:.3rem .35rem .3rem .7rem; background:#fff; border:1px solid var(--card-border); border-radius:999px; color:var(--primary); font-size:.75rem; font-weight:700; }
.course-explain-button--criterion { padding:.3rem .52rem; border-color:transparent; box-shadow:none; font-size:.68rem; }
.voice-response__mic { display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; min-height:86px; margin:1rem 0 .5rem; padding:1rem; color:#fff; background:linear-gradient(135deg,var(--primary),#245f6f); border:0; border-radius:var(--hh-radius-lg); cursor:pointer; }
.voice-response__mic > span { font-size:1.8rem; }
.voice-response__mic > strong,.voice-response__mic > small { display:block; }
.voice-response__mic > small { color:rgba(255,255,255,.72); }
.voice-response__mic.is-listening { background:linear-gradient(135deg,#d9485f,#ff7557); animation:voicePulse 1.4s ease-in-out infinite; }
.voice-response__mic:disabled { opacity:.5; cursor:not-allowed; }
.voice-response__status { color:var(--muted); font-size:.8rem; text-align:center; }
.voice-response label { margin-top:1rem; }
.course-check-feedback { white-space:pre-wrap; line-height:1.55; }
@keyframes voicePulse { 50% { box-shadow:0 0 0 10px rgba(217,72,95,.12); transform:scale(1.01); } }
.course-tutor { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.course-tutor.is-engaged { box-shadow:0 0 0 3px rgba(31,167,160,.14),var(--shadow-sm); }
.course-tutor-head { display:flex; align-items:center; gap:.7rem; padding:1rem; border-bottom:1px solid var(--card-border); }
.course-tutor-head > span { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:linear-gradient(135deg,var(--accent),#5b7cfa); border-radius:50%; }
.course-tutor-head div { display:flex; flex-direction:column; }
.course-tutor-head small { color:var(--muted); }
.course-tutor-sound { margin-left:auto; padding:.35rem; background:transparent; border:0; border-radius:50%; cursor:pointer; font-size:1.15rem; }
.course-tutor-sound:hover { background:var(--bg-soft); }
.course-tutor-feed { flex:1; min-height:260px; overflow:auto; padding:1rem; background:var(--bg-soft); }
.course-tutor-message { margin:.5rem 0; padding:.75rem; white-space:pre-wrap; line-height:1.5; border-radius:12px; font-size:.85rem; }
.course-tutor-message.ai { margin-right:1rem; background:#fff; border:1px solid var(--card-border); border-bottom-left-radius:3px; }
.course-tutor-message.user { margin-left:1rem; color:#fff; background:var(--primary); border-bottom-right-radius:3px; }
.course-tutor-message.waiting { color:var(--muted); }
.course-tutor-replay { display:block; width:100%; margin-top:.75rem; padding:.58rem .7rem; color:var(--primary); background:rgba(31,167,160,.09); border:1px solid rgba(31,167,160,.3); border-radius:9px; cursor:pointer; font:inherit; font-size:.73rem; font-weight:850; text-align:center; }
.course-tutor-replay:hover { color:#fff; background:var(--accent); }
.course-tutor form { padding:1rem; }
.course-tutor form textarea { resize:none; }
.course-tutor-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.course-tutor-actions .btn { width:100%; }
.course-tutor-mic.is-listening { color:#fff; background:#d9485f; border-color:#d9485f; animation:voicePulse 1.4s ease-in-out infinite; }
#courseTutorVoiceStatus { display:block; margin-top:.45rem; line-height:1.35; }

/* Control persistente: aparece con cualquier locución del motor de voz. */
.voice-universal-controls { position:fixed; z-index:1200; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:.65rem; width:max-content; max-width:calc(100vw - 24px); padding:.65rem .75rem; color:#fff; background:rgba(9,24,42,.94); border:1px solid rgba(255,255,255,.16); border-radius:999px; box-shadow:0 14px 44px rgba(4,15,28,.28); backdrop-filter:blur(14px); transform:translateX(-50%); }
.voice-universal-controls[hidden] { display:none; }
.voice-universal-controls__pulse { width:9px; height:9px; flex:0 0 9px; background:#4dd5c9; border-radius:50%; box-shadow:0 0 0 0 rgba(77,213,201,.5); animation:voiceControlPulse 1.5s infinite; }
.voice-universal-controls > span:nth-child(2) { font-size:.78rem; }
.voice-universal-controls button { padding:.45rem .7rem; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px; cursor:pointer; font:inherit; font-size:.75rem; font-weight:800; }
.voice-universal-controls button:hover { background:rgba(255,255,255,.18); }
@keyframes voiceControlPulse { 70% { box-shadow:0 0 0 8px rgba(77,213,201,0); } 100% { box-shadow:0 0 0 0 rgba(77,213,201,0); } }

@media(max-width:1180px){.course-player-grid{grid-template-columns:210px 1fr}.course-tutor{position:relative;top:auto;grid-column:1/-1;max-height:none}.course-tutor-feed{max-height:320px}.course-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.course-admin-layout,.course-admin-panels,.course-builder-grid,.scene-guided-editor{grid-template-columns:1fr}.course-player-grid{grid-template-columns:1fr}.course-map{position:relative;top:auto;max-height:240px}.course-enroll-form{grid-template-columns:1fr}.course-progress-head,.course-progress-actions,.course-report__next,.course-report__heading{align-items:stretch;flex-direction:column}.course-progress-actions{gap:.65rem}.course-catalog-grid{grid-template-columns:1fr}.course-scene-title-row{flex-direction:column}.course-narration-controls{justify-content:flex-start;max-width:none;margin-bottom:1rem}.course-narration-controls small{text-align:left}.course-report-modules>article{grid-template-columns:auto 1fr}.course-report-module__state{grid-column:2}.course-report__hero{border-radius:18px}.course-report-insights__grid,.course-report-unit__insight>div{grid-template-columns:1fr}}
@media(max-width:620px){.course-progress-meter{grid-template-columns:1fr auto}.interaction-cards,.prompt-builder{grid-template-columns:1fr}.course-welcome-stats{align-items:stretch;flex-direction:column}.course-run-timeline>div{grid-template-columns:1fr}.course-run-timeline em{text-align:left}.course-check-heading{flex-direction:column}.course-explain-button--compact{align-self:flex-start}.voice-response__criteria li{width:100%;justify-content:space-between}.voice-universal-controls>span:nth-child(2){display:none}}
@media (max-width: 720px) {
    .results-matrix tbody th, .results-matrix thead th:first-child { position:static; }
}

.report-server-fallback { display:grid; gap:.55rem; }
.report-server-score { display:flex; align-items:baseline; gap:.35rem; }
.report-server-score strong { font-family:var(--hh-font-display); font-size:2.4rem; line-height:1; color:var(--accent); }
.report-server-score span { color:var(--muted); font-weight:700; }

.results-org-form label { margin:0; min-width:220px; }
.results-board .form-narrow { min-width:220px; }
.results-matrix-wrap { width:100%; overflow-x:auto; }
.results-matrix { min-width:720px; border-collapse:separate; border-spacing:0; }
.results-matrix th, .results-matrix td { vertical-align:top; }
.results-matrix thead th { position:sticky; top:0; z-index:2; background:var(--card); }
.results-matrix tbody th, .results-matrix thead th:first-child { position:sticky; left:0; z-index:3; min-width:180px; background:var(--card); text-align:left; }
.results-matrix thead th:first-child { z-index:4; }
.results-matrix thead th small, .results-matrix tbody th small, .results-matrix td small { display:block; color:var(--muted); font-weight:500; }
.results-matrix td { min-width:140px; }
.results-matrix td.is-complete { background:rgba(36,122,90,.08); }
.results-matrix td.is-progress { background:rgba(31,167,160,.08); }
.results-matrix td.is-pending { background:rgba(169,105,24,.08); }
.results-matrix td.is-empty { color:var(--muted); }
.results-matrix td.score-high strong { color:var(--ok); }
.results-matrix td.score-mid strong { color:var(--accent); }
.results-matrix td.score-low strong { color:var(--warn); }
.results-matrix td.score-weak strong { color:var(--danger); }

/* ---------- Resultados: tarjetas de estado y estados vacíos ---------- */
.stat-card--ok .stat-num { color: var(--ok); }
.stat-card--accent .stat-num { color: var(--accent); }
.stat-card--warn .stat-num { color: var(--warn); }
.stat-card--danger .stat-num { color: var(--danger); }
.stat-card--muted .stat-num { color: var(--muted); }

.results-section-empty {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--card-border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: var(--muted);
}
.results-section-empty__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.results-section-empty p { margin: 0; line-height: 1.5; }
.results-section-empty a { font-weight: 700; color: var(--primary); }

.score-pill {
    display: inline-flex;
    align-items: center;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    white-space: nowrap;
}
.score-pill.score-high { background: rgba(36, 122, 90, .14); color: var(--ok); }
.score-pill.score-mid { background: rgba(31, 167, 160, .14); color: var(--accent); }
.score-pill.score-low { background: rgba(169, 105, 24, .14); color: var(--warn); }
.score-pill.score-weak { background: rgba(182, 70, 59, .12); color: var(--danger); }
.score-pill.score-none { background: var(--bg-soft); color: var(--muted); font-weight: 600; }

.results-people-table td { vertical-align: middle; }
.results-people-table .user-cell { min-width: 11rem; }
.results-people-table__attempts { font-weight: 700; }
.results-people-table__date strong { display: block; color: var(--text); font-size: .88rem; font-weight: 700; }
.results-people-table__date small { color: var(--muted); font-size: .78rem; }

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .88rem;
}
.count-pill--ok { background: rgba(36, 122, 90, .14); color: var(--ok); }
.count-pill--accent { background: rgba(31, 167, 160, .14); color: var(--accent); }
.count-pill--muted { background: var(--bg-soft); color: var(--muted); }

.missing-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
}
.missing-list li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--bg-soft);
    color: var(--text);
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .86rem;
    line-height: 1.3;
}
.missing-list li.is-progress { background: rgba(31, 167, 160, .14); color: var(--accent); font-weight: 700; }
.missing-list li small { color: inherit; opacity: .75; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }

.entitlement-stats { margin-bottom:1.4rem; }
.entitlement-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .85rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}
.entitlement-empty__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(38, 108, 145, .1);
    font-size: 1.5rem;
}
.entitlement-empty h2 {
    margin: 0;
    font-family: var(--hh-font-display);
    font-size: 1.55rem;
    font-weight: 600;
}
.entitlement-empty p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 28rem;
}
.services-catalog-section + .services-catalog-section { margin-top: 1.25rem; }
.services-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.services-section-head h2 {
    margin: .15rem 0 .25rem;
    font-family: var(--hh-font-display);
    font-size: 1.35rem;
    font-weight: 600;
}
.services-section-head .muted { margin: 0; font-size: .88rem; }
.entitlement-contract-list { display:grid; gap:1rem; }
.entitlement-contract { padding:1.1rem 1.2rem; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--bg-soft); }
.entitlement-contract header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.7rem; }
.entitlement-badges { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.entitlement-contract header small { color:var(--muted); font-weight:700; letter-spacing:.04em; }
.entitlement-contract header h3 { margin:.15rem 0 0; }
.entitlement-contract.is-active { border-color:rgba(36,122,90,.35); background:rgba(36,122,90,.06); }
.entitlement-contract.is-pending { border-color:rgba(169,105,24,.35); background:rgba(169,105,24,.07); }
.entitlement-contract.is-expired { border-color:rgba(182,70,59,.28); background:rgba(182,70,59,.05); }
.entitlement-service-list { list-style:none; display:grid; gap:.4rem; margin:0 0 .9rem; }
.entitlement-service-list li { display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.entitlement-service-list span { color:var(--muted); }
.entitlement-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin:0; }
.entitlement-meta dt { color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.entitlement-meta dd { margin:.15rem 0 0; font-weight:700; }
.entitlement-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.entitlement-grid article { padding:1rem; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--bg-soft); }
.entitlement-grid h3 { margin:.1rem 0 .45rem; }
.entitlement-item-list { list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.4rem; }
.entitlement-item-list small { display:block; color:var(--muted); }

.contract-flow { margin: 0 0 2.5rem; }
.contract-flow__nav { margin-bottom: 1rem; }
.contract-flow__nav a { font-weight: 700; color: var(--primary); text-decoration: none; }
.contract-flow__nav a:hover { color: var(--accent); }
.contract-flow__eyebrow {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}
.contract-flow__lead {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 40rem;
}
.contract-flow-hero {
    --plan-accent: var(--accent);
    --plan-soft: rgba(31, 167, 160, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(15, 61, 92, .08);
    border-top: 4px solid var(--plan-accent);
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--hh-shadow-sm);
}
.contract-flow-hero h1 {
    margin: 0;
    font-family: var(--hh-font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    font-weight: 600;
    color: var(--primary);
    max-width: 28rem;
}
.contract-flow-hero__icon {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 18px;
    background: var(--plan-soft) !important;
}
.contract-flow-hero__price {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
}
.contract-flow-hero__note {
    margin: 0;
    max-width: 34rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--muted);
}
.contract-flow-mode {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.contract-flow-mode--online { background: rgba(31, 167, 160, .14); color: #16857f; }
.contract-flow-mode--quote { background: rgba(38, 108, 145, .1); color: #266c91; }
.contract-flow-layout {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
    gap: 1.25rem;
    align-items: start;
}
.contract-flow-aside {
    padding: 1.2rem 1.25rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--card-border);
}
.contract-flow-aside h2 {
    margin: 0 0 .75rem;
    font-family: var(--hh-font-display);
    font-size: 1.2rem;
}
.contract-flow-steps {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--text);
    line-height: 1.55;
}
.contract-flow-steps li + li { margin-top: .45rem; }
.contract-flow-trust {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}
.contract-flow-form { padding: 1.35rem 1.4rem; }
.contract-flow-form__head { margin-bottom: 1rem; }
.contract-flow-form__step {
    display: inline-block;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}
.contract-flow-form__head h2 {
    margin: 0 0 .35rem;
    font-family: var(--hh-font-display);
    font-size: 1.45rem;
}
.contract-flow-form__head p { margin: 0; color: var(--muted); font-size: .9rem; }
.contract-flow-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.contract-flow-fields label {
    display: grid;
    gap: .35rem;
    font-size: .86rem;
    font-weight: 600;
}
.contract-flow-fields input,
.contract-flow-fields select,
.contract-flow-fields textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    font: inherit;
    background: #fff;
}
.contract-flow-fields__full { grid-column: 1 / -1; }
.contract-flow-consent {
    display: flex !important;
    align-items: flex-start;
    gap: .55rem;
    font-weight: 400 !important;
    line-height: 1.45;
}
.contract-flow-consent input { width: auto; margin-top: .15rem; }
.contract-flow-honeypot { position: absolute; left: -9999px; opacity: 0; }
.contract-flow-status { min-height: 1.2rem; margin: .75rem 0 0; font-size: .88rem; }
.contract-flow-status.is-error { color: var(--danger); }
.contract-flow-submit { margin-top: .85rem; }
.contract-flow-form__privacy {
    margin: .75rem 0 0;
    color: var(--muted);
    font-size: .82rem;
}
.contract-flow-empty,
.contract-flow-success {
    max-width: 34rem;
    margin: 2rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--card-border);
}
.contract-flow-success__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: rgba(46, 125, 87, .14);
    color: var(--ok);
    font-size: 1.6rem;
    font-weight: 800;
}
.contract-flow-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin-top: 1.25rem;
}
@media (max-width: 900px) {
    .contract-flow-layout { grid-template-columns: 1fr; }
    .contract-flow-fields { grid-template-columns: 1fr; }
}

/* Página "¿Quieres iniciar un curso?" ------------------------------------ */
.course-pitch { margin: 0 0 2.5rem; max-width: 920px; }
.course-pitch-hero {
    padding: 2rem 2.1rem;
    margin-bottom: 2.2rem;
    border-radius: var(--radius-lg, 20px);
    background: linear-gradient(145deg, rgba(31, 167, 160, .1), rgba(255, 122, 89, .08));
    border: 1px solid var(--card-border);
    text-align: center;
}
.course-pitch-hero__eyebrow {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: rgba(31, 167, 160, .16);
    color: #16857f;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
.course-pitch-hero h1 { margin: 0 0 .7rem; font-size: 1.7rem; }
.course-pitch-hero__lead { max-width: 620px; margin: 0 auto 1.4rem; color: var(--muted); line-height: 1.55; }
.course-pitch-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 1rem; }
.course-pitch-hero__note { margin: 0; font-size: .85rem; color: var(--muted); }
.course-pitch-steps { margin-bottom: 2.4rem; }
.course-pitch-steps h2, .course-pitch-examples h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.course-pitch-steps__list {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.course-pitch-steps__list li { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.1rem 1.15rem; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.course-pitch-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff; font-weight: 800; font-size: .95rem;
}
.course-pitch-steps__list strong { display: block; margin-bottom: .25rem; font-size: .95rem; }
.course-pitch-steps__list p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.course-pitch-examples__lead { margin: 0 0 1.2rem; color: var(--muted); }
.course-pitch-examples__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.course-pitch-card { padding: 1.2rem 1.25rem; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.course-pitch-card strong { display: block; margin: .15rem 0 .35rem; font-size: .95rem; }
.course-pitch-card p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.course-pitch-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
    margin-top: 2.4rem; padding: 1.4rem 1.6rem;
    background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: var(--radius);
}
.course-pitch-cta strong { display: block; margin-bottom: .2rem; }
.course-pitch-cta p { margin: 0; color: var(--muted); font-size: .88rem; }
@media (max-width: 760px) {
    .course-pitch-steps__list { grid-template-columns: 1fr 1fr; }
    .course-pitch-examples__grid { grid-template-columns: 1fr 1fr; }
    .course-pitch-cta { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 520px) {
    .course-pitch-hero { padding: 1.5rem 1.3rem; }
    .course-pitch-steps__list { grid-template-columns: 1fr; }
    .course-pitch-examples__grid { grid-template-columns: 1fr; }
}

@media print {
    .topbar, .footer, .no-print, .private-nav-toggle { display: none !important; }
    .print-only { display: block !important; }
    body { background: #fff; color: #111; }
    .container, .container--wide { max-width: none; width: auto; margin: 0; padding: 0; }
    .card { break-inside: avoid; box-shadow: none; border-color: #ccc; }
    .results-matrix { min-width: 0 !important; font-size: 11px; }
    .results-matrix tbody th, .results-matrix thead th:first-child { position: static; }
    .btn, .page-head-actions, .form-narrow { display: none !important; }
    a { color: inherit; text-decoration: none; }
    .results-print-meta { margin: .4rem 0 0; font-size: .9rem; }
}

@media(prefers-reduced-motion:reduce){.voice-universal-controls__pulse{animation:none!important;transition:none!important}}