:root {
      --bg: #f5f8f6;
      --surface: #ffffff;
      --panel: #ffffff;
      --surface-soft: #edf8f2;
      --ink: #13201b;
      --muted: #5f7169;
      --line: #d5e4dc;
      --green: #2D7A5F;
      --green-2: #1F6B52;
      --teal: #2B6F73;
      --blue: #4079c9;
      --violet: #6C5AA8;
      --rose: #B5657F;
      --gold: #C4813B;
      --red: #B85757;
      --shadow: 0 18px 42px rgba(22, 48, 38, .10);
      --focus: 0 0 0 3px rgba(24, 160, 111, .24);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        linear-gradient(140deg, rgba(24, 160, 111, .14), rgba(64, 121, 201, .06) 38%, transparent 62%),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size: 16px;
      letter-spacing: 0;
    }

    body.high-contrast {
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-soft: #f3f3f3;
      --ink: #000000;
      --muted: #232323;
      --line: #777777;
      --shadow: none;
    }

    button, input, select { font: inherit; letter-spacing: 0; }
    button { cursor: pointer; }
    h1, h2, h3, p { letter-spacing: 0; }
    h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3.7rem); line-height: .98; }
    h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.15; }
    h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
    p { line-height: 1.56; }
    a { color: var(--teal); font-weight: 850; }

    .layout {
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100dvh;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      background: rgba(255, 255, 255, .92);
      border-right: 1px solid var(--line);
      backdrop-filter: blur(14px);
      z-index: 10;
    }

    .brand {
      display: flex;
      gap: 11px;
      align-items: center;
      font-weight: 950;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--green), var(--teal));
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
    }

    .brand small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 850;
    }

    .nav {
      display: grid;
      gap: 7px;
    }

    .nav button {
      min-height: 46px;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 9px;
      align-items: center;
      border: 0;
      border-radius: 8px;
      padding: 7px 10px;
      background: transparent;
      color: var(--muted);
      font-weight: 900;
      text-align: left;
    }

    .nav i {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #edf4f0;
      color: var(--ink);
      font-size: .78rem;
      font-style: normal;
      font-weight: 950;
    }

    .nav button:hover,
    .nav button:focus-visible,
    .nav button.active {
      outline: 0;
      background: #e4f5ed;
      color: var(--ink);
    }

    .nav button.active i {
      color: #fff;
      background: var(--green);
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
    }

    .side-card {
      margin-top: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfefd;
      padding: 12px;
      color: var(--muted);
      font-size: .86rem;
    }

    .main {
      min-width: 0;
      padding: 24px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      margin-bottom: 20px;
    }

    .eyebrow {
      margin: 0 0 6px;
      color: var(--green-2);
      font-size: .77rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .top-actions {
      min-width: min(100%, 560px);
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .cloud-sync-status {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
      background: color-mix(in srgb, var(--green) 10%, var(--surface));
      color: var(--green-2);
      font-size: .78rem;
      font-weight: 900;
      white-space: nowrap;
    }
    .cloud-sync-status::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
    }
    .cloud-sync-status.is-loading::before,
    .cloud-sync-status.is-saving::before {
      animation: pulseDot 1s ease-in-out infinite;
    }
    .cloud-sync-status.is-error {
      border-color: color-mix(in srgb, var(--red) 36%, var(--line));
      background: color-mix(in srgb, var(--red) 10%, var(--surface));
      color: var(--red);
    }

    .search {
      flex: 1;
      min-height: 44px;
      min-width: 170px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .search:focus-within { border-color: var(--green); box-shadow: var(--focus); }

    .search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
    }

    .btn, .btn-secondary, .icon-btn, .chip {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      text-decoration: none;
      font-weight: 950;
      white-space: nowrap;
      transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
    }

    .btn {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
    }

    .btn:hover, .btn:focus-visible { outline: 0; background: var(--green-2); }
    .btn-secondary:hover, .btn-secondary:focus-visible, .icon-btn:hover, .icon-btn:focus-visible { outline: 0; border-color: var(--green); box-shadow: var(--focus); }

    .icon-btn {
      width: 44px;
      padding: 0;
    }

    .chip {
      min-height: 32px;
      padding: 0 10px;
      color: var(--muted);
      font-size: .82rem;
      box-shadow: none;
    }

    .chip.active {
      color: #fff;
      background: var(--green);
      border-color: var(--green);
    }

    .view { display: none; }
    .view.active { display: block; }

    .hero {
      min-height: 356px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 16px;
    }

    .hero-main {
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(24, 160, 111, .12), rgba(64, 121, 201, .08)),
        #fff;
      box-shadow: var(--shadow);
      padding: clamp(20px, 4vw, 38px);
      display: grid;
      align-content: center;
    }

    .hero-main p {
      max-width: 720px;
      color: var(--muted);
      margin: 16px 0 0;
    }

    .daily-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 18px;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .stat {
      min-height: 118px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 15px;
      display: grid;
      gap: 8px;
      align-content: space-between;
    }

    .stat small {
      color: var(--muted);
      font-weight: 900;
    }

    .stat strong {
      font-size: 1.95rem;
      line-height: 1;
    }

    .panel {
      border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: 0 12px 32px rgba(23, 42, 34, .08), var(--shadow-soft);
      padding: 18px;
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 12px;
      margin-bottom: 14px;
    }

    .panel-head p {
      margin: 5px 0 0;
      color: var(--muted);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
      gap: 16px;
      align-items: start;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .subject-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .subject-card, .block-card, .material-card, .resource-card, .question-card, .attempt-card, .step-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      padding: 14px;
    }

    .subject-card {
      min-height: 190px;
      display: grid;
      gap: 10px;
      text-align: left;
      border-top: 5px solid var(--subject-color, var(--green));
      transition: transform .16s, box-shadow .16s, border-color .16s;
    }

    .subject-card:hover, .subject-card:focus-visible, .subject-card.active {
      outline: 0;
      box-shadow: var(--shadow);
      border-color: var(--subject-color, var(--green));
    }

    .subject-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--subject-color, var(--green));
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
      font-weight: 950;
    }

    .muted { color: var(--muted); }
    .tiny { color: var(--muted); font-size: .84rem; }
    .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

    .field {
      display: grid;
      gap: 6px;
    }

    .field label,
    .field span {
      color: var(--muted);
      font-size: .83rem;
      font-weight: 950;
    }

    .field select, .field input {
      width: 100%;
      min-height: 44px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink);
      outline: 0;
    }

    .field select:focus, .field input:focus { border-color: var(--green); box-shadow: var(--focus); }
    .quiz-bank-field { min-width: 0; }
    .quiz-bank-note { color: var(--muted); font-size: .68rem; font-weight: 800; line-height: 1.25; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin: 14px 0;
    }

    .block-path {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .block-card {
      min-height: 140px;
      text-align: left;
      display: grid;
      gap: 10px;
      transition: border-color .16s, box-shadow .16s, transform .16s;
    }

    .block-card:hover, .block-card:focus-visible, .block-card.active {
      outline: 0;
      border-color: var(--subject-color, var(--green));
      box-shadow: var(--focus);
      transform: translateY(-1px);
    }

    .node {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eaf6f0;
      color: var(--green-2);
      font-weight: 950;
    }

    .route-list {
      display: grid;
      gap: 10px;
    }

    .step-card {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 12px;
      align-items: center;
    }

    .quiz-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 16px;
      align-items: start;
    }

    .quiz-question {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: clamp(16px, 3vw, 24px);
    }

    .progress {
      height: 12px;
      border-radius: 999px;
      background: #e6f0eb;
      overflow: hidden;
    }

    .progress span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green), var(--teal));
      transition: width .18s;
    }

    .options {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .option {
      min-height: 58px;
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 12px;
      align-items: center;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      padding: 10px 12px;
      text-align: left;
      font-weight: 800;
    }

    .option .letter {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef6f1;
      font-weight: 950;
    }

    .option:hover, .option:focus-visible {
      outline: 0;
      border-color: var(--green);
      box-shadow: var(--focus);
    }

    .option.correct { border-color: var(--green); background: #effaf4; }
    .option.wrong { border-color: var(--red); background: #fff1f1; }
    .option.picked { border-color: var(--blue); background: #eef5ff; }

    .feedback {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-soft);
      padding: 13px;
    }

    .score-ring {
      width: 164px;
      height: 164px;
      border-radius: 50%;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at center, #fff 0 58%, transparent 59%),
        conic-gradient(var(--green) var(--score, 0%), #e4eee9 0);
      border: 1px solid var(--line);
    }

    .score-ring strong { font-size: 2rem; }

    .materials-layout {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .material-list {
      display: grid;
      gap: 10px;
    }

    .material-card {
      text-align: left;
      display: grid;
      gap: 8px;
    }

    .material-card.active,
    .material-card:hover,
    .material-card:focus-visible {
      outline: 0;
      border-color: var(--green);
      box-shadow: var(--focus);
    }

    .doc-preview {
      min-height: 360px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(24, 160, 111, .10), rgba(64, 121, 201, .08)),
        #fbfefd;
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      padding: clamp(18px, 4vw, 34px);
    }

    .doc-sheet {
      width: 170px;
      min-height: 220px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 16px;
      display: grid;
      align-content: space-between;
      justify-self: center;
    }

    .doc-sheet strong {
      font-size: 2rem;
      color: var(--green-2);
    }

    .doc-lines {
      display: grid;
      gap: 8px;
    }

    .doc-lines span {
      height: 9px;
      border-radius: 999px;
      background: #dcebe4;
    }

    .doc-lines span:nth-child(2) { width: 78%; }
    .doc-lines span:nth-child(3) { width: 62%; }

    .pdf-status {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(250, 250, 248, .78);
      color: var(--muted);
      padding: 12px 14px;
      font-size: .9rem;
      line-height: 1.45;
    }
    .pdf-status.good {
      border-color: rgba(45, 122, 95, .22);
      background: #EEF8F3;
      color: var(--green-2);
    }
    .pdf-status.bad {
      border-color: rgba(164, 59, 59, .18);
      background: #FFF2F1;
      color: #944040;
    }

    .profile-hero {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }
    .profile-hero .avatar {
      width: 68px;
      height: 68px;
      font-size: 1.35rem;
    }
    .profile-editor {
      display: grid;
      gap: 14px;
    }
    .profile-editor-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }
    .calendar-head {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
      margin-top: 14px;
      color: var(--muted);
      font-size: .75rem;
      font-weight: 850;
      text-align: center;
      text-transform: uppercase;
    }
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }
    .calendar-day {
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      display: grid;
      place-items: center;
      color: #717873;
      font-weight: 820;
      position: relative;
    }
    .calendar-day.empty {
      border-color: transparent;
      background: transparent;
    }
    .calendar-day.studied {
      border-color: rgba(45, 122, 95, .24);
      background: linear-gradient(135deg, rgba(45, 122, 95, .12), rgba(91, 190, 216, .12));
      color: var(--green-2);
    }
    .calendar-day.today {
      box-shadow: inset 0 0 0 2px rgba(91, 190, 216, .38);
    }
    .calendar-fire {
      display: block;
      font-size: 1.14rem;
      line-height: 1;
      filter: drop-shadow(0 3px 7px rgba(196, 129, 59, .28));
    }
    .calendar-number {
      position: absolute;
      right: 7px;
      bottom: 5px;
      color: var(--muted);
      font-size: .62rem;
      font-weight: 950;
    }
    .calendar-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      color: var(--muted);
      font-size: .86rem;
    }
    .legend-fire { margin-right: 2px; }

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .resource-card {
      min-height: 190px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .video-frame {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #e7f0eb;
    }

    .empty {
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: #fbfefd;
      color: var(--muted);
      padding: 18px;
    }

    .table-wrap {
      width: 100%;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px;
    }

    th, td {
      padding: 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      font-size: .8rem;
      text-transform: uppercase;
    }

    tr:last-child td { border-bottom: 0; }

    .status {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 950;
      background: #edf3f0;
      color: var(--muted);
      white-space: nowrap;
    }

    .status.good { background: #e4f7ee; color: var(--green-2); }
    .status.warn { background: #fff5dd; color: #8a5a11; }
    .status.bad { background: #fde9e9; color: #a43b3b; }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translate(-50%, 70px);
      opacity: 0;
      z-index: 40;
      pointer-events: none;
      max-width: min(92vw, 680px);
      padding: 12px 16px;
      border-radius: 999px;
      background: #13201b;
      color: #fff;
      box-shadow: var(--shadow);
      transition: transform .18s, opacity .18s;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    @media (max-width: 1180px) {
      .hero, .grid-2, .quiz-shell, .materials-layout { grid-template-columns: 1fr; }
      .stat-grid, .subject-grid, .block-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .resource-grid, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 780px) {
      .layout { display: block; padding-bottom: 94px; }
      .sidebar {
        position: fixed;
        inset: auto 0 0 0;
        height: auto;
        padding: 7px;
        border-right: 0;
        border-top: 1px solid var(--line);
      }
      .brand, .side-card { display: none; }
      .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
      .nav button {
        min-height: 58px;
        grid-template-columns: 1fr;
        gap: 2px;
        justify-items: center;
        text-align: center;
        padding: 5px 2px;
        font-size: .71rem;
      }
      .nav i { width: 30px; height: 30px; }
      .main { padding: 15px; }
      .topbar { display: grid; align-items: stretch; }
      .top-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
      .top-actions .search { flex: 1; min-width: 0; }
      .top-actions .btn { grid-column: 1 / -1; }
      .cloud-sync-status { grid-column: 1 / -1; justify-content: center; }
      .stat-grid, .subject-grid, .block-path, .form-grid, .resource-grid, .grid-3 { grid-template-columns: 1fr; }
      .hero-main, .daily-card, .panel { padding: 15px; }
      .doc-preview { grid-template-columns: 1fr; min-height: 320px; }
      .panel-head { display: grid; align-items: stretch; }
      .stat { min-height: 96px; }
    }

    /* ─── Mejoras y animaciones ──────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideQ {
      from { opacity: 0; transform: translateX(22px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%     { transform: translateX(-9px); }
      40%     { transform: translateX(8px); }
      60%     { transform: translateX(-6px); }
      80%     { transform: translateX(5px); }
    }
    @keyframes popCorrect {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.04); }
      65%  { transform: scale(0.97); }
      100% { transform: scale(1); }
    }
    @keyframes progressShine {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }
    @keyframes brandGlow {
      0%,100% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 0 0 0 rgba(24,160,111,.0); }
      50%     { box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 0 14px 3px rgba(24,160,111,.30); }
    }
    @keyframes dotPop {
      from { transform: scale(0); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    @keyframes toastIn {
      from { opacity: 0; transform: translate(-50%, 18px) scale(.94); }
      to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1); opacity: .65; }
      50% { transform: scale(1.25); opacity: 1; }
    }
    @keyframes scoreCount {
      from { opacity: 0; transform: scale(.7); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Brand pulsing glow */
    .brand-mark { animation: brandGlow 3.5s ease-in-out infinite; }

    /* Nav transitions */
    .nav button { transition: background .15s, color .15s; }
    .nav button.active i {
      transition: background .15s, color .15s, box-shadow .15s;
    }

    /* Sidebar active dot */
    .nav-dot {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: dotPop .2s cubic-bezier(.34,1.56,.64,1) forwards;
    }
    .nav button { position: relative; }

    /* Stat cards fade-in con retraso */
    .stat { animation: fadeUp .32s ease-out both; }
    .stat:nth-child(1) { animation-delay: .00s; }
    .stat:nth-child(2) { animation-delay: .05s; }
    .stat:nth-child(3) { animation-delay: .10s; }
    .stat:nth-child(4) { animation-delay: .15s; }

    /* Subject cards hover */
    .subject-card {
      transition: transform .18s ease-out, box-shadow .18s, border-color .18s;
    }
    .subject-card:hover, .subject-card:focus-visible, .subject-card.active {
      transform: translateY(-3px);
    }

    /* Shining progress bar */
    .progress span {
      background: linear-gradient(
        90deg,
        var(--green) 0%,
        var(--teal) 45%,
        var(--green) 100%
      );
      background-size: 200% auto;
      animation: progressShine 2.5s linear infinite;
      transition: width .22s ease-out;
    }

    /* Option transitions and animations */
    .option {
      transition: border-color .14s, background .14s, transform .1s, box-shadow .14s;
    }
    .option:hover:not(:disabled), .option:focus-visible:not(:disabled) {
      transform: translateX(4px);
      box-shadow: 0 2px 8px rgba(24,160,111,.12);
    }
    .option.correct { animation: popCorrect .38s ease; }
    .option.wrong   { animation: shake .38s ease; }

    /* Feedback colored borders */
    .feedback {
      border-left: 3px solid var(--line);
      transition: border-color .2s;
    }
    .feedback.fb-ok  { border-left-color: var(--green); background: rgba(24,160,111,.05); }
    .feedback.fb-bad { border-left-color: var(--red);   background: rgba(198,76,76,.05); }

    /* Quiz question slide in */
    .quiz-question { animation: slideQ .28s ease-out both; }

    /* SVG score ring */
    .score-ring-wrap {
      width: 164px;
      height: 164px;
      position: relative;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
    }
    .score-ring-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    .score-ring-track { fill: none; stroke: #e6f0eb; stroke-width: 10; }
    .score-ring-fill-svg {
      fill: none;
      stroke: url(#ringGrad);
      stroke-width: 10;
      stroke-linecap: round;
      stroke-dasharray: 452;
      stroke-dashoffset: 452;
      transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
    }
    .score-ring-inner {
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .score-ring-inner strong {
      display: block;
      font-size: 2.1rem;
      line-height: 1;
      animation: scoreCount .5s cubic-bezier(.34,1.56,.64,1) .4s both;
    }
    .score-ring-inner span {
      font-size: .82rem;
      color: var(--muted);
    }

    /* Question card result borders */
    .question-card { transition: box-shadow .15s; }
    .question-card.correct-result { border-left: 3px solid var(--green); }
    .question-card.wrong-result   { border-left: 3px solid var(--red); }

    /* Keyboard hint */
    .kbd-row {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 8px;
    }
    .kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 22px;
      padding: 0 5px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--surface);
      color: var(--ink);
      font-size: .7rem;
      font-weight: 800;
      font-family: ui-monospace, monospace;
      box-shadow: 0 1px 0 var(--line);
    }
    .kbd-sep { color: var(--muted); font-size: .75rem; }

    /* Improved toast */
    .toast {
      bottom: 24px;
      border-radius: 999px;
      padding: 12px 20px;
      font-size: .9rem;
      font-weight: 600;
    }
    .toast.show { animation: toastIn .26s cubic-bezier(.34,1.56,.64,1) forwards; }
    .toast.toast-good { background: var(--green-2); }
    .toast.toast-bad  { background: var(--red); }

    /* FacMed Trainer redesign layer */
    :root {
      --bg: #FAFAF8;
      --surface: #ffffff;
      --panel: #ffffff;
      --surface-soft: #F4F6F3;
      --ink: #1A1A1A;
      --muted: #6D746F;
      --line: #E2E5E0;
      --green: #2D7A5F;
      --green-2: #1F6B52;
      --green-soft: #E8F2ED;
      --teal: #2B6F73;
      --blue: #4E6F9E;
      --violet: #6C5AA8;
      --rose: #B5657F;
      --gold: #C4813B;
      --red: #B85757;
      --shadow: 0 10px 28px rgba(28, 38, 34, .07);
      --focus: 0 0 0 3px rgba(45, 122, 95, .18);
      --radius: 14px;
    }

    html { background: var(--bg); }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 19;
      pointer-events: none;
      opacity: 0;
      background: rgba(26, 26, 26, .24);
      transition: opacity .18s ease;
    }
    body.sidebar-open::before,
    body.profile-open::before {
      opacity: 1;
      pointer-events: auto;
    }

    h1, .display-title {
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-weight: 700;
      letter-spacing: 0;
    }

    .layout {
      grid-template-columns: 272px minmax(0, 1fr);
      background: var(--bg);
    }

    .sidebar {
      padding: 22px 18px;
      gap: 20px;
      background: var(--surface);
      border-right: 1px solid var(--line);
      backdrop-filter: none;
      box-shadow: none;
    }

    .brand {
      gap: 12px;
      color: var(--ink);
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: none;
      font-size: .78rem;
      letter-spacing: .04em;
      animation: none;
    }

    .brand small {
      color: var(--muted);
      font-weight: 650;
    }

    .nav { gap: 4px; }
    .nav button {
      min-height: 42px;
      grid-template-columns: 28px 1fr;
      border-radius: 999px;
      padding: 6px 12px;
      color: #68706B;
      font-weight: 720;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }
    .nav i {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: transparent;
      color: currentColor;
      font-size: 0;
    }
    .nav i svg { width: 17px; height: 17px; }
    .nav button:hover,
    .nav button:focus-visible {
      background: #F2F5F1;
      color: var(--ink);
      box-shadow: none;
    }
    .nav button.active {
      background: var(--green-soft);
      color: var(--green-2);
    }
    .nav button.active i {
      color: var(--green-2);
      background: transparent;
      box-shadow: none;
    }
    .nav-dot { display: none; }

    .sidebar-profile {
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 2px 0;
      border-top: 1px solid var(--line);
    }
    .avatar,
    .profile-avatar,
    .sb-avatar {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--green);
      color: #fff;
      font-weight: 850;
      letter-spacing: .02em;
      flex: 0 0 auto;
    }
    .sidebar-profile strong { display: block; font-size: .92rem; }
    .sidebar-profile span { display: block; margin-top: 1px; }
    .sidebar-note {
      margin: 0;
      color: #8A918C;
      font-size: .74rem;
      line-height: 1.45;
    }

    .main {
      padding: 30px clamp(22px, 4vw, 46px) 42px;
    }

    .topbar {
      align-items: center;
      margin-bottom: 24px;
    }
    .topbar h1 {
      font-size: clamp(2rem, 4vw, 4.1rem);
      line-height: .96;
      color: var(--ink);
    }
    .eyebrow {
      color: var(--green-2);
      font-weight: 800;
      letter-spacing: .08em;
    }
    .menu-btn { display: none; }

    .search {
      border-radius: 999px;
      background: var(--surface);
      box-shadow: 0 1px 0 rgba(28, 38, 34, .03);
    }
    .search span { color: var(--muted); font-size: .86rem; }
    .search svg,
    .icon-btn svg,
    .menu-btn svg {
      width: 20px;
      height: 20px;
      display: block;
      flex: 0 0 auto;
    }
    .search svg {
      width: 18px;
      height: 18px;
    }

    .btn, .btn-secondary, .icon-btn, .chip {
      min-height: 42px;
      border-radius: 999px;
      font-weight: 760;
      box-shadow: none;
    }
    .btn {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }
    .btn:hover,
    .btn:focus-visible {
      background: var(--green-2);
      border-color: var(--green-2);
      box-shadow: var(--focus);
    }
    .btn-secondary {
      background: var(--surface);
      color: var(--ink);
    }
    .btn-small {
      min-height: 34px;
      padding: 0 11px;
      font-size: .84rem;
    }
    .text-link {
      min-height: 38px;
      border: 0;
      background: transparent;
      color: var(--green-2);
      font-weight: 800;
      padding: 0 4px;
      text-decoration: none;
    }

    .panel,
    .daily-card,
    .hero-main,
    .stat,
    .subject-card,
    .block-card,
    .material-card,
    .resource-card,
    .question-card,
    .attempt-card,
    .step-card {
      border-color: var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .panel,
    .daily-card,
    .hero-main,
    .stat {
      background: var(--surface);
    }
    .stat {
      opacity: 1;
      animation: none;
    }
    .panel { padding: clamp(16px, 2.2vw, 22px); }

    .home-stack { display: grid; gap: 18px; }
    .home-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .hello {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .hello h2 {
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(1.7rem, 3.2vw, 2.8rem);
      line-height: 1;
    }
    .streak-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      background: #FFF7E8;
      color: #8A5B18;
      font-weight: 800;
      white-space: nowrap;
    }
    .continue-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: clamp(22px, 4vw, 34px);
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(45, 122, 95, .08), rgba(255, 255, 255, 0) 58%),
        #fff;
      box-shadow: var(--shadow);
    }
    .continue-card h2 {
      margin-top: 4px;
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(1.7rem, 3vw, 2.7rem);
    }
    .continue-card p { margin: 10px 0 0; color: var(--muted); }
    .continue-action { min-height: 54px; padding: 0 22px; font-size: 1rem; }

    .weak-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .weak-card {
      display: grid;
      gap: 12px;
      min-height: 160px;
      align-content: space-between;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
    }
    .weak-card strong {
      line-height: 1.22;
      overflow-wrap: anywhere;
    }
    .weak-count { color: var(--red); font-size: .86rem; font-weight: 820; }
    .empty-soft {
      border: 1px dashed var(--line);
      border-radius: 14px;
      padding: 22px;
      background: #FCFCFA;
      color: var(--muted);
    }

    .stat-grid.compact-stats .stat,
    .stat-grid .stat {
      min-height: 98px;
    }
    .stat strong { font-size: 1.72rem; }

    .subject-card {
      min-height: 220px;
      border-top: 0;
      border-left: 4px solid var(--subject-color, var(--green));
      gap: 14px;
      padding: 17px;
    }
    .grid-2 .subject-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .subject-card:hover,
    .subject-card:focus-visible,
    .subject-card.active {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }
    .subject-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--subject-color, var(--green)) 14%, white);
      color: var(--subject-color, var(--green));
      box-shadow: none;
    }
    .mini-progress {
      display: grid;
      gap: 7px;
      margin-top: 4px;
    }
    .mini-progress-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 760;
    }
    .mini-bar {
      height: 8px;
      border-radius: 999px;
      background: #EEF1ED;
      overflow: hidden;
    }
    .mini-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--subject-color, var(--green));
    }
    .product-footer {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color: #8D948F;
      font-size: .84rem;
      padding: 6px 2px 0;
    }

    .quiz-question {
      border-radius: 16px;
      opacity: 1;
      animation: none;
      transition: opacity .2s ease;
    }
    @keyframes questionFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .progress { background: #EEF1ED; }
    .progress span {
      background: var(--green);
      animation: none;
      transition: width .2s ease;
    }
    .option {
      border-width: 1px;
      border-radius: 14px;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }
    .option:hover:not(:disabled),
    .option:focus-visible:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: var(--focus);
    }
    .option.correct {
      border-color: var(--green);
      background: #EDF7F2;
      animation: answerPulse .3s ease;
    }
    .option.wrong {
      border-color: var(--red);
      background: #FFF2F1;
      animation: answerPulse .3s ease;
    }
    @keyframes answerPulse {
      0% { transform: scale(1); }
      45% { transform: scale(1.012); }
      100% { transform: scale(1); }
    }

    .result-hero {
      text-align: center;
      display: grid;
      gap: 14px;
      justify-items: center;
      padding: clamp(22px, 4vw, 34px);
    }
    .result-percent {
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(4rem, 11vw, 7rem);
      line-height: .9;
      color: var(--ink);
    }
    .xp-counter {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      min-height: 40px;
      color: var(--green-2);
      font-weight: 850;
    }
    .xp-counter strong { font-size: 2rem; }

    .profile-modal {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      place-items: center;
      padding: 20px;
    }
    .profile-modal.active { display: grid; }
    .profile-card {
      width: min(100%, 430px);
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: 0 22px 60px rgba(28, 38, 34, .16);
      padding: 24px;
    }
    .profile-card h2 {
      margin-top: 14px;
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: 2rem;
    }
    .profile-form { display: grid; gap: 12px; margin-top: 18px; }
    .profile-form input {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 13px;
      outline: 0;
    }
    .profile-form input:focus {
      border-color: var(--green);
      box-shadow: var(--focus);
    }
    .profile-actions { display: flex; gap: 8px; align-items: center; }
    .profile-actions .btn { flex: 1; }

    .mobile-nav { display: none; }

    @media (max-width: 1180px) {
      .weak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 1024px) {
      .layout {
        display: block;
        padding-bottom: 0;
      }
      .main { padding: 22px; }
      .menu-btn {
        display: inline-flex;
        width: 44px;
        flex: 0 0 auto;
      }
      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(84vw, 310px);
        height: 100vh;
        height: 100dvh;
        transform: translateX(-104%);
        transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 140; /* above mobile-nav (35) and most UI for clean drawer */
        border-top: 0;
        border-right: 1px solid var(--line);
        /* v3.2.8: scroll interno + safe-area para que NO se corte abajo en
           iPhone (el contenido superaba 100dvh y quedaba bajo el home bar). */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-top: calc(18px + env(safe-area-inset-top));
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
      }
      body.sidebar-open .sidebar { transform: translateX(0); }
      /* Premium mobile drawer: glass + shadow + smooth slide */
      .sidebar {
        box-shadow: 16px 0 56px rgba(16, 28, 24, .20);
        border-right: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
      }
      @supports (backdrop-filter: blur(12px)) {
        .sidebar { backdrop-filter: blur(16px) saturate(1.15); }
      }
      .brand { display: flex; }
      .sidebar .nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .sidebar .nav button {
        min-height: 42px;
        grid-template-columns: 28px 1fr;
        justify-items: stretch;
        text-align: left;
        padding: 6px 12px;
        font-size: .95rem;
      }
      .sidebar .nav i { width: 26px; height: 26px; }
      .sidebar-profile { display: flex; }

      /* Dedicated mobile sidebar overlay with blur + dim (premium app feel) */
      .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 135;
        background: rgba(16, 24, 20, .38);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
      body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }
      /* Close X button visible only in mobile drawer */
      .sidebar-close {
        display: none;
        position: absolute;
        top: calc(14px + env(safe-area-inset-top));
        right: 12px;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 0;
        background: color-mix(in srgb, var(--surface) 70%, transparent);
        color: var(--muted);
        font-size: 22px;
        line-height: 1;
        font-weight: 400;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      @media (max-width: 760px) {
        .sidebar-close { display: flex; }
      }
      .sidebar-close:active { background: var(--green-soft); color: var(--green-2); }
    }

    @media (max-width: 640px) {
      .layout { padding-bottom: 76px; }
      .main { padding: 16px 14px 22px; }
      .topbar {
        display: grid;
        gap: 14px;
      }
      .topbar > div:first-child {
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: center;
        gap: 10px;
      }
      .topbar > div:first-child .eyebrow,
      .topbar > div:first-child h1 {
        grid-column: 2;
      }
      .menu-btn {
        grid-row: 1 / span 2;
        grid-column: 1;
      }
      .topbar h1 { font-size: 2.25rem; }
      .top-actions {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .top-actions .search { flex: 1; min-width: 0; }
      .top-actions .btn { display: none; }
      .home-header,
      .continue-card,
      .product-footer {
        display: grid;
        grid-template-columns: 1fr;
      }
      .continue-action {
        width: 100%;
      }
      .continue-card h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.7rem);
        font-weight: 600;
      }
      .profile-hero,
      .profile-editor-row {
        grid-template-columns: 1fr;
      }
      .profile-hero .avatar {
        width: 58px;
        height: 58px;
      }
      .calendar-day {
        min-height: 38px;
        border-radius: 10px;
      }
      .weak-grid,
      .stat-grid,
      .subject-grid,
      .block-path,
      .form-grid,
      .resource-grid,
      .grid-3 {
        grid-template-columns: 1fr;
      }
      .panel-head {
        display: grid;
        align-items: start;
      }
      .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, .97);
      }
      .mobile-nav button {
        min-height: 54px;
        border: 0;
        border-radius: 12px;
        outline: 0;
        background: transparent;
        color: var(--muted);
        display: grid;
        place-items: center;
        gap: 2px;
        font-size: .68rem;
        font-weight: 760;
      }
      .mobile-nav button.active,
      .mobile-nav button:hover {
        background: var(--green-soft);
        color: var(--green-2);
      }
      .mobile-nav button:focus-visible {
        box-shadow: var(--focus);
      }
      .mobile-nav svg { width: 18px; height: 18px; }
      .mobile-nav button:hover { transform: none; }
    }

    /* FacMed Trainer V1.5 polish: elegant color + satisfying motion */
    :root {
      --bg: #FCFAF6;
      --surface: #FFFFFF;
      --panel: #FFFFFF;
      --surface-soft: #F4F8F6;
      --ink: #171716;
      --muted: #6F756F;
      --line: #E5E2D9;
      --green: #287D67;
      --green-2: #17614F;
      --green-soft: #E9F5F0;
      --aqua: #5BBED8;
      --aqua-soft: #EAF8FC;
      --violet: #7669B8;
      --rose: #C36E88;
      --gold: #C58A4A;
      --red: #B85B5B;
      --shadow: 0 18px 52px rgba(31, 42, 38, .08);
      --shadow-soft: 0 8px 24px rgba(31, 42, 38, .06);
      --focus: 0 0 0 4px rgba(91, 190, 216, .24);
    }

    body {
      background:
        radial-gradient(circle at 16% -8%, rgba(91, 190, 216, .24), transparent 30%),
        radial-gradient(circle at 94% 2%, rgba(40, 125, 103, .14), transparent 32%),
        linear-gradient(180deg, #FFFEFA 0%, var(--bg) 42%, #F7FBFA 100%);
    }

    .sidebar {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .90)),
        var(--surface);
    }

    .brand-mark {
      position: relative;
      overflow: visible;
      background: linear-gradient(135deg, #EAF8FC, #E9F5F0);
      color: var(--green-2);
      border: 1px solid rgba(40, 125, 103, .18);
      box-shadow: 0 10px 26px rgba(40, 125, 103, .12);
      animation: logoBreathe 4.8s ease-in-out infinite;
    }
    .brand-mark svg {
      width: 27px;
      height: 27px;
      display: block;
    }
    .brand-mark path {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: rayDraw 1.4s cubic-bezier(.22, 1, .36, 1) .15s forwards;
    }

    .avatar.logo-avatar,
    .profile-avatar.logo-avatar {
      background: linear-gradient(135deg, #EAF8FC, #E9F5F0);
      color: var(--green-2);
      border: 1px solid rgba(40, 125, 103, .18);
    }
    .avatar.logo-avatar svg,
    .profile-avatar.logo-avatar svg {
      width: 28px;
      height: 28px;
      display: block;
    }

    .nav button,
    .btn,
    .btn-secondary,
    .icon-btn,
    .subject-card,
    .weak-card,
    .continue-card,
    .panel,
    .option {
      transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
    }

    .nav button.active,
    .mobile-nav button.active {
      background: linear-gradient(135deg, rgba(91, 190, 216, .16), rgba(40, 125, 103, .12));
      color: var(--green-2);
    }

    .nav button:hover,
    .mobile-nav button:hover {
      transform: translateX(2px);
      background: rgba(91, 190, 216, .10);
    }

    .btn {
      background: linear-gradient(135deg, #2A8D73 0%, #17614F 62%, #4FA68E 100%);
      border-color: rgba(23, 97, 79, .14);
      box-shadow: 0 12px 28px rgba(40, 125, 103, .18);
    }
    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-1px);
      background: linear-gradient(135deg, #2C957A 0%, #17614F 72%, #5BBED8 100%);
      box-shadow: 0 16px 34px rgba(40, 125, 103, .24), var(--focus);
    }

    .btn-secondary,
    .icon-btn,
    .chip {
      background: rgba(255, 255, 255, .82);
      border-color: var(--line);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible,
    .icon-btn:hover,
    .icon-btn:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(91, 190, 216, .46);
      box-shadow: var(--focus);
    }

    .search {
      background: rgba(255, 255, 255, .86);
      border-color: rgba(229, 226, 217, .92);
      box-shadow: var(--shadow-soft);
    }

    .panel,
    .continue-card,
    .quiz-question,
    .daily-card,
    .stat,
    .question-card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)),
        var(--surface);
      border-color: rgba(229, 226, 217, .96);
      box-shadow: var(--shadow);
    }

    .continue-card {
      background:
        linear-gradient(135deg, rgba(91, 190, 216, .13), rgba(40, 125, 103, .06) 48%, rgba(255, 255, 255, .90)),
        var(--surface);
    }

    .streak-pill {
      background: linear-gradient(135deg, #FFF4DE, #FFF9EC);
      color: #835718;
      box-shadow: 0 8px 18px rgba(197, 138, 74, .10);
    }

    .subject-card:hover,
    .subject-card:focus-visible,
    .weak-card:hover,
    .continue-card:hover,
    .option:hover:not(:disabled),
    .option:focus-visible:not(:disabled) {
      transform: translateY(-3px);
      box-shadow: 0 18px 46px rgba(31, 42, 38, .11);
    }

    .subject-icon,
    .node,
    .option .letter {
      background: color-mix(in srgb, var(--subject-color, var(--green)) 13%, white);
    }

    .progress,
    .mini-bar {
      background: #EDF1EC;
    }
    .progress span,
    .mini-bar span {
      background: linear-gradient(90deg, var(--green), var(--aqua));
    }

    .toast.toast-good {
      background: linear-gradient(135deg, var(--green-2), #287D67);
    }

    @keyframes rayDraw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes logoBreathe {
      0%, 100% { transform: translateY(0); box-shadow: 0 10px 26px rgba(40, 125, 103, .12); }
      50% { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(91, 190, 216, .18); }
    }

    /* ── Hero del inicio ─── */
    .hero-banner {
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(45, 122, 95, .14), rgba(43, 111, 115, .05) 60%, transparent),
        var(--surface);
      padding: 26px 28px;
    }
    .hero-title {
      margin: 8px 0 0;
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(1.6rem, 2.6vw, 2.5rem);
      line-height: 1.08;
      max-width: 22ch;
    }
    .hero-sub {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 1rem;
      max-width: 62ch;
    }

    /* ── Estado vacío reutilizable ─── */
    .empty-state {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 8px;
      padding: 30px 22px;
      border: 1px dashed var(--line);
      border-radius: 12px;
      background: #fbfefd;
    }
    .empty-state strong { font-size: 1.04rem; }
    .empty-state p { margin: 0; max-width: 42ch; }
    .empty-state .btn { margin-top: 6px; }
    .empty-state-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--surface-soft);
      color: var(--green);
      margin-bottom: 2px;
    }
    .empty-state-icon svg { width: 26px; height: 26px; }
    .empty-state-icon-warn { background: #fdecec; color: var(--red); }

    /* ── Tarjetas de perfiles ─── */
    .profile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .profile-card-item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      border: 1px solid var(--line);
      border-top: 4px solid var(--subject-color, var(--green));
      border-radius: 12px;
      background: var(--surface);
      padding: 16px;
      transition: box-shadow 150ms ease, border-color 150ms ease;
    }
    .profile-card-item:hover { box-shadow: var(--shadow); }
    .profile-card-top { display: flex; gap: 12px; align-items: flex-start; }
    .profile-card-doc {
      flex: none;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--subject-color, var(--green));
    }
    .profile-card-doc svg { width: 22px; height: 22px; }
    .profile-card-head strong { display: block; font-size: 1rem; }
    .profile-card-head p { margin: 3px 0 0; }
    .profile-card-chips { margin-top: 0; }
    .profile-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
    .profile-card-actions .btn,
    .profile-card-actions .btn-secondary { flex: 1; min-width: 132px; }

    /* ── Visor de PDF en modal ─── */
    body.pdf-open { overflow: hidden; }
    .pdf-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(16, 32, 26, .55);
      backdrop-filter: blur(3px);
    }
    .pdf-modal.active { display: grid; }
    .pdf-dialog {
      width: min(100%, 1100px);
      height: min(90vh, 100%);
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-radius: 18px;
      box-shadow: 0 30px 80px rgba(10, 28, 20, .35);
      overflow: hidden;
    }
    .pdf-modal-head {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
    }
    .pdf-modal-heading { flex: 1; min-width: 0; }
    .pdf-modal-heading h2 { font-size: 1.15rem; }
    .pdf-modal-heading p { margin: 2px 0 0; }
    .pdf-close { flex: none; }
    .pdf-modal-body {
      flex: 1;
      min-height: 0;
      position: relative;
      background: #eef3f1;
    }
    .pdf-frame {
      width: 100%;
      height: 100%;
      border: 0;
      opacity: 0;
      transition: opacity 200ms ease;
    }
    .pdf-frame.ready { opacity: 1; }
    .pdf-modal-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
      padding: 14px 18px;
      border-top: 1px solid var(--line);
    }
    .pdf-skeleton {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 32px clamp(24px, 12%, 140px);
    }
    .pdf-skeleton span {
      display: block;
      border-radius: 8px;
      background: linear-gradient(90deg, #e3ebe7 25%, #f1f6f3 50%, #e3ebe7 75%);
      background-size: 200% 100%;
      animation: pdf-shimmer 1.2s ease-in-out infinite;
    }
    .pdf-skeleton span:nth-child(1) { height: 46px; }
    .pdf-skeleton span:nth-child(2) { flex: 1; }
    .pdf-skeleton span:nth-child(3) { height: 24px; width: 70%; }
    .pdf-skeleton span:nth-child(4) { height: 24px; width: 45%; }
    @keyframes pdf-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .pdf-error, .pdf-mobile {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: center;
      justify-items: center;
      text-align: center;
      gap: 10px;
      padding: 32px;
    }
    .pdf-error strong, .pdf-mobile strong { font-size: 1.1rem; }
    .pdf-error p, .pdf-mobile p { margin: 0; max-width: 38ch; }
    .pdf-mobile-open { margin-top: 6px; min-width: 200px; }

    .sidebar-note-sub {
      display: block;
      margin-top: 3px;
      font-size: .76rem;
      color: var(--muted);
      opacity: .9;
    }

    @media (prefers-reduced-motion: reduce) {
      .pdf-skeleton span, .pdf-frame { animation: none; transition: none; }
    }

    @media (max-width: 760px) {
      .pdf-modal { padding: 0; }
      .pdf-dialog { width: 100%; height: 100%; border-radius: 0; }
      .pdf-modal-foot .btn, .pdf-modal-foot .btn-secondary { flex: 1; }
      .hero-banner { padding: 20px; }
      .profile-grid { grid-template-columns: 1fr; }
    }

    /* ---- Bloque 5: pantalla de cuenta (auth stub) ---- */
    .auth-shell {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      padding: 24px 0 calc(96px + env(safe-area-inset-bottom));
      position: relative;
      z-index: 4;
    }
    .auth-card {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px 26px;
    }
    .auth-brand { display: flex; justify-content: center; margin-bottom: 14px; }
    .auth-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--green-soft);
      color: var(--green-2);
      font-weight: 800;
      letter-spacing: .04em;
      font-size: 1.1rem;
    }
    .auth-logo.logo-icon {
      border-radius: 999px;
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(135deg, var(--green-soft), color-mix(in srgb, var(--green) 16%, var(--surface)));
      border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
      box-shadow: 0 14px 30px rgba(21, 121, 91, .16);
    }
    .auth-logo.logo-icon svg {
      width: 31px;
      height: 31px;
      display: block;
    }
    .auth-logo.logo-icon svg path {
      stroke: currentColor;
    }
    .auth-title { margin: 0 0 4px; font-size: 1.4rem; text-align: center; }
    .auth-card > .muted { text-align: center; margin: 0 0 18px; }
    .auth-form { display: flex; flex-direction: column; gap: 14px; }
    .auth-form .auth-field { display: flex; flex-direction: column; gap: 6px; }
    .auth-form .auth-field span { font-size: .9rem; font-weight: 600; }
    .password-box {
      display: flex;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg);
      overflow: hidden;
    }
    .password-box:focus-within {
      border-color: var(--green);
      box-shadow: var(--focus);
    }
    .auth-form input {
      width: 100%;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg);
      color: var(--ink);
      font: inherit;
    }
    .password-box input {
      border: 0;
      border-radius: 0;
      min-width: 0;
      box-shadow: none;
    }
    .password-box input:focus-visible {
      box-shadow: none;
      border-color: transparent;
    }
    .password-toggle {
      border: 0;
      border-left: 1px solid var(--line);
      background: color-mix(in srgb, var(--green) 8%, var(--surface));
      color: var(--green-2);
      padding: 0 12px;
      font: inherit;
      font-size: .82rem;
      font-weight: 900;
      cursor: pointer;
    }
    .auth-form input:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--green); }
    .auth-form input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184, 87, 87, .15); }
    .password-box input[aria-invalid="true"] {
      box-shadow: none;
      border-color: transparent;
    }
    .auth-alert {
      margin: 14px 0;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--red) 34%, var(--line));
      background: color-mix(in srgb, var(--red) 10%, var(--panel));
      color: var(--red);
      font-size: .88rem;
      font-weight: 850;
      text-align: left;
    }
    .auth-alert.is-info,
    .auth-alert.is-good {
      border-color: color-mix(in srgb, var(--green) 34%, var(--line));
      background: color-mix(in srgb, var(--green) 10%, var(--panel));
      color: var(--green-2);
    }
    .auth-hint {
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.35;
    }
    .auth-requirements {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: -4px;
    }
    .auth-requirements span {
      border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line));
      background: color-mix(in srgb, var(--green) 10%, var(--panel));
      color: var(--ink);
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 800;
      padding: 6px 9px;
    }
    .auth-form .btn { margin-top: 4px; min-height: 44px; }
    .auth-switch { text-align: center; margin: 12px 0 0; font-size: .9rem; }
    .auth-back { text-align: center; margin: 18px 0 0; }
    .auth-spinner {
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, .45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: auth-spin .7s linear infinite;
    }
    @keyframes auth-spin { to { transform: rotate(360deg); } }
    @keyframes field-shake {
      10%, 90% { transform: translateX(-1px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60% { transform: translateX(4px); }
    }
    .field-shake { animation: field-shake .4s cubic-bezier(.36, .07, .19, .97) both; }

    body.auth-locked .sidebar,
    body.auth-locked .topbar {
      filter: blur(2px);
      opacity: .58;
      transition: filter .18s ease, opacity .18s ease;
    }
    body.auth-locked .mobile-nav {
      display: none !important;
    }
    body.auth-locked .auth-card {
      position: relative;
      z-index: 6;
      border-color: color-mix(in srgb, var(--green) 28%, var(--line));
      box-shadow:
        0 24px 70px rgba(0, 0, 0, .24),
        0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent);
    }
    body.auth-locked::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--green) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--bg) 38%, transparent);
      backdrop-filter: blur(1.5px);
    }

    .account-handle {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 12px 0 14px;
      padding: 11px 12px;
      border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line));
      border-radius: 14px;
      background: color-mix(in srgb, var(--green) 7%, var(--surface));
    }
    .account-handle span,
    .account-handle small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }
    .account-handle strong {
      color: var(--ink);
      font-size: .94rem;
    }

    /* Banner "modo invitado" en el perfil */
    .guest-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .guest-banner .chip { background: var(--green-soft); color: var(--green-2); }
    .guest-title { margin: 8px 0 4px; font-size: 1.1rem; }
    .guest-banner .btn { white-space: nowrap; }

    @media (prefers-reduced-motion: reduce) {
      .auth-spinner { animation-duration: 1.4s; }
      .field-shake { animation: none; }
    }

    @media (max-width: 760px) {
      .auth-card { padding: 24px 18px; }
      body.auth-locked .auth-shell {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
      }
      .guest-banner .btn { width: 100%; }
    }

    /* ---- Bloque 6: tarjeta del quiz del día ---- */
    .daily-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: clamp(20px, 3.4vw, 28px);
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(108, 90, 168, .12), rgba(255, 255, 255, 0) 60%),
        var(--surface);
      box-shadow: var(--shadow);
    }
    .daily-card h2 {
      margin: 4px 0 0;
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    }
    .daily-card .muted { margin: 8px 0 0; }
    .daily-action { min-height: 48px; padding: 0 24px; white-space: nowrap; }
    .daily-card.is-done {
      background:
        linear-gradient(135deg, rgba(45, 122, 95, .14), rgba(255, 255, 255, 0) 60%),
        var(--surface);
    }
    .daily-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      font-size: 1.4rem;
      font-weight: 800;
      flex: none;
    }

    @media (max-width: 760px) {
      .daily-card { grid-template-columns: 1fr; }
      .daily-action { width: 100%; }
      .daily-card.is-done { grid-template-columns: 1fr auto; }
    }

    /* ---- Bloque 7: dominancia por bloque ---- */
    .block-mastery { display: grid; gap: 6px; margin-top: 10px; }
    .block-mastery-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: .8rem;
      font-weight: 760;
      color: var(--muted);
    }
    .chip-mastered {
      background: var(--green);
      color: #fff;
      font-size: .68rem;
      vertical-align: middle;
    }
    .step-card.is-dominated {
      border-color: var(--green);
      background: linear-gradient(135deg, rgba(45, 122, 95, .08), rgba(255, 255, 255, 0) 60%), var(--surface);
    }
    .step-card.is-dominated .node {
      background: var(--green);
      color: #fff;
    }

    .mastery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .mastery-subject {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      background: var(--surface);
      display: grid;
      gap: 9px;
    }
    .mastery-subject-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .mastery-block { display: grid; gap: 5px; }
    .mastery-block-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
    }
    .mastery-block.is-dominated .mastery-block-row { color: var(--green-2); }
    .mastery-block.is-dominated .mini-bar span { background: var(--green); }

    /* ---- Bloque 8: Modo Beast (contrarreloj) ---- */
    .chip-beast {
      background: linear-gradient(135deg, #C4813B, #B85757);
      color: #fff;
      border: none;
    }
    .beast-hint {
      margin: 10px 0 0;
      padding: 9px 12px;
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--muted);
    }
    .beast-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }
    .beast-bar-track {
      flex: 1;
      height: 10px;
      border-radius: 999px;
      background: #EEF1ED;
      overflow: hidden;
    }
    #beast-timer-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2D7A5F, #C4813B);
      transition: width .12s linear;
    }
    .beast-bar.is-low #beast-timer-fill {
      background: linear-gradient(90deg, #C4813B, #B85757);
    }
    .beast-secs {
      font-weight: 900;
      font-size: .92rem;
      min-width: 56px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .beast-bar.is-low .beast-secs { color: var(--red); }
    .beast-bar.is-low .beast-secs { animation: beast-pulse .7s ease-in-out infinite; }
    @keyframes beast-pulse {
      50% { transform: scale(1.12); }
    }
    .beast-result-note {
      margin: 4px 0 0;
      font-weight: 800;
      color: var(--gold);
    }
    .beast-feedback {
      border-width: 2px;
      background:
        linear-gradient(135deg, rgba(196, 129, 59, .14), rgba(184, 87, 87, .08)),
        var(--surface-soft);
    }
    .beast-feedback-kicker {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      margin-bottom: 6px;
      border-radius: 999px;
      padding: 4px 9px;
      background: rgba(196, 129, 59, .14);
      color: var(--gold);
      font-size: .72rem;
      font-weight: 950;
      text-transform: uppercase;
    }
    .beast-feedback strong {
      display: block;
      font-size: clamp(1.02rem, 2.4vw, 1.42rem);
      line-height: 1.14;
      overflow-wrap: anywhere;
    }
    .beast-result-line {
      margin: 8px 0 0;
      border-left: 3px solid var(--gold);
      padding-left: 10px;
      color: var(--gold);
      font-weight: 900;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    @media (prefers-reduced-motion: reduce) {
      #beast-timer-fill { transition: none; }
      .beast-bar.is-low .beast-secs { animation: none; }
    }

    /* ---- Bloque 9: hábitos y retos ---- */
    .challenge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .challenge-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
    }
    .challenge-card.is-complete {
      border-color: var(--green);
      background: linear-gradient(135deg, rgba(45, 122, 95, .1), rgba(255, 255, 255, 0) 60%), var(--surface);
    }
    .challenge-emoji {
      font-size: 1.5rem;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: var(--surface-soft);
      flex: none;
    }
    .challenge-card.is-complete .challenge-emoji { background: var(--green-soft); }
    .challenge-body { display: grid; gap: 5px; }
    .challenge-body strong { font-size: .98rem; }
    .challenge-body p { margin: 0; }
    .challenge-body .mini-bar { margin-top: 3px; }
    .challenge-count {
      font-weight: 900;
      font-size: .82rem;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .challenge-card.is-complete .challenge-count { color: var(--green-2); }

    @media (max-width: 760px) {
      .challenge-grid { grid-template-columns: 1fr; }
    }

    .habit-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 180px;
      gap: 18px;
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 8%, rgba(91, 190, 216, .18), transparent 28%),
        linear-gradient(135deg, rgba(40, 125, 103, .12), rgba(255, 255, 255, .86)),
        var(--surface);
    }
    .habit-hero h2 {
      margin-top: 10px;
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: clamp(2rem, 4vw, 3.35rem);
      line-height: 1;
      max-width: 13ch;
    }
    .habit-hero p { max-width: 68ch; }
    .habit-ring {
      width: 158px;
      height: 158px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      align-content: center;
      justify-self: end;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
        conic-gradient(var(--green) var(--habit-score, 0%), var(--surface-soft) 0);
      box-shadow: var(--shadow-soft);
    }
    .habit-ring strong { font-size: 2.15rem; line-height: 1; }
    .habit-ring span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .habit-ring em {
      margin-top: 2px;
      color: var(--green-2);
      font-size: .78rem;
      font-style: normal;
      font-weight: 950;
    }
    .habit-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 16px 0;
    }
    .habit-tabs button {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--muted);
      padding: 0 15px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
    }
    .habit-tabs button.active,
    .habit-tabs button:hover,
    .habit-tabs button:focus-visible {
      outline: 0;
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--green), var(--teal));
      transform: translateY(-1px);
    }
    .habit-layout { align-items: start; }
    .habit-empty-panel .empty-state { min-height: 320px; }
    .habit-preset-mini {
      display: grid;
      gap: 10px;
    }
    .habit-mini-preset {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--ink);
      padding: 10px;
      text-align: left;
    }
    .habit-mini-preset span,
    .habit-card-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--habit-color, var(--green)) 14%, white);
      color: var(--green-2);
      font-weight: 950;
      flex: none;
    }
    .habit-mini-preset small {
      color: var(--muted);
      font-weight: 850;
      white-space: nowrap;
    }
    .habit-today-list {
      display: grid;
      gap: 12px;
    }
    .habit-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-left: 5px solid var(--habit-color, var(--green));
      border-radius: 14px;
      background: var(--surface);
      padding: 13px;
      box-shadow: var(--shadow-soft);
    }
    .habit-card.is-done {
      border-color: color-mix(in srgb, var(--habit-color, var(--green)) 52%, var(--line));
      border-left-color: var(--habit-color, var(--green));
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--habit-color, var(--green)) 10%, transparent), transparent 62%),
        var(--surface);
    }
    .habit-card.is-failed { border-left-color: var(--red); }
    .habit-card-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: start;
    }
    .habit-card-title span {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 900;
      white-space: nowrap;
    }
    .habit-card-main {
      min-width: 0;
      display: grid;
      gap: 6px;
    }
    .habit-card-main p { margin: 0; }
    .habit-card-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
      min-width: 154px;
    }
    .habit-step {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--surface-soft);
      color: var(--ink);
      font-weight: 950;
    }
    .habit-step:hover,
    .habit-step:focus-visible {
      outline: 0;
      border-color: var(--green);
      box-shadow: var(--focus);
    }
    .habit-fail { color: var(--red); }
    .habit-month-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 7px;
    }
    .habit-day {
      min-height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: .8rem;
      font-weight: 900;
    }
    .habit-day.empty { opacity: 0; }
    .habit-day.level-1 { background: rgba(91, 190, 216, .18); color: var(--teal); }
    .habit-day.level-2 { background: rgba(91, 190, 216, .28); color: var(--teal); }
    .habit-day.level-3 { background: rgba(40, 125, 103, .24); color: var(--green-2); }
    .habit-day.level-4 { background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; }
    .habit-filters {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 10px;
      margin: 14px 0;
    }
    .habit-search { width: 100%; }
    .habit-filters select {
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 14px;
      background: var(--surface);
      color: var(--ink);
      font-weight: 850;
    }
    .habit-limit-note {
      margin: 0 0 12px;
      border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
      border-radius: 12px;
      background: color-mix(in srgb, var(--gold) 10%, var(--surface));
      color: var(--gold);
      padding: 11px 13px;
      font-weight: 850;
      line-height: 1.4;
    }
    .habit-preset-card button:disabled,
    .habit-mini-preset:disabled,
    .btn-secondary:disabled {
      cursor: not-allowed;
      opacity: .58;
      transform: none;
      box-shadow: none;
    }
    .habit-library-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
    }
    .habit-preset-card {
      display: grid;
      gap: 10px;
      align-content: start;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
      padding: 14px;
      box-shadow: var(--shadow-soft);
    }
    .habit-preset-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .habit-preset-card p { margin: 0; }
    .habit-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .habit-meta span {
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface-soft);
      padding: 5px 8px;
      font-size: .72rem;
      font-weight: 900;
    }
    .habit-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .habit-stat-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 54px;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      padding: 12px;
      margin-top: 10px;
    }
    .habit-stat-row > span:last-child {
      color: var(--green-2);
      font-weight: 950;
      text-align: right;
    }
    .category-row {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr) 46px;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      color: var(--muted);
      font-weight: 900;
    }
    .coming-soon-panel {
      display: grid;
      gap: 18px;
    }
    .coming-soon-hero {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }
    .coming-soon-icon {
      width: 74px;
      height: 74px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--green), var(--teal));
      box-shadow: var(--shadow-soft);
    }
    .coming-soon-icon svg { width: 32px; height: 32px; }
    .soon-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .soon-subject {
      border: 1px solid var(--line);
      border-top: 4px solid var(--subject-color, var(--green));
      border-radius: 12px;
      background: var(--surface);
      padding: 13px;
      display: grid;
      gap: 3px;
    }
    .soon-subject strong { color: var(--subject-color, var(--green)); }
    .soon-subject small { color: var(--muted); font-weight: 850; }

    @media (max-width: 920px) {
      .habit-card { grid-template-columns: auto minmax(0, 1fr); }
      .habit-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
      .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .habit-hero { grid-template-columns: 1fr; }
      .habit-ring { justify-self: start; width: 132px; height: 132px; }
      .habit-filters,
      .habit-form-grid,
      .category-row { grid-template-columns: 1fr; }
      .habit-library-grid,
      .soon-grid { grid-template-columns: 1fr; }
      .coming-soon-hero { grid-template-columns: 1fr; }
      .habit-card-title { display: grid; }
      .habit-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
      .habit-tabs button { width: 100%; min-width: 0; }
      .beast-feedback strong { font-size: 1.05rem; }
      .beast-feedback-kicker { white-space: normal; }
      .calendar-day { min-height: 36px; border-radius: 10px; }
      .calendar-fire { font-size: 1rem; }
      .calendar-number { right: 5px; bottom: 3px; }
    }

    /* ---- Bloque 10: animaciones globales ---- */
    @keyframes viewEnter {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .view-enter { animation: viewEnter .3s ease both; }

    @keyframes cardRise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* Entrada escalonada de tarjetas al cambiar de vista. */
    .view-enter .home-stack > *,
    .view-enter .subject-grid > *,
    .view-enter .challenge-grid > *,
    .view-enter .mastery-grid > * {
      animation: cardRise .42s cubic-bezier(.22, 1, .36, 1) both;
    }
    .view-enter .home-stack > *:nth-child(1),
    .view-enter .subject-grid > *:nth-child(1),
    .view-enter .challenge-grid > *:nth-child(1),
    .view-enter .mastery-grid > *:nth-child(1) { animation-delay: .03s; }
    .view-enter .home-stack > *:nth-child(2),
    .view-enter .subject-grid > *:nth-child(2),
    .view-enter .challenge-grid > *:nth-child(2),
    .view-enter .mastery-grid > *:nth-child(2) { animation-delay: .09s; }
    .view-enter .home-stack > *:nth-child(3),
    .view-enter .subject-grid > *:nth-child(3),
    .view-enter .challenge-grid > *:nth-child(3),
    .view-enter .mastery-grid > *:nth-child(3) { animation-delay: .15s; }
    .view-enter .home-stack > *:nth-child(4),
    .view-enter .subject-grid > *:nth-child(4),
    .view-enter .challenge-grid > *:nth-child(4),
    .view-enter .mastery-grid > *:nth-child(4) { animation-delay: .21s; }
    .view-enter .home-stack > *:nth-child(n+5),
    .view-enter .subject-grid > *:nth-child(n+5),
    .view-enter .challenge-grid > *:nth-child(n+5),
    .view-enter .mastery-grid > *:nth-child(n+5) { animation-delay: .27s; }

    /* Feedback de presión consistente en elementos interactivos. */
    .btn, .btn-secondary, .icon-btn, .chip, .option,
    .subject-card, .step-card, .challenge-card {
      transition: transform .14s ease, box-shadow .14s ease,
                  background-color .14s ease, border-color .14s ease;
    }
    .btn:active, .btn-secondary:active, .icon-btn:active,
    .option:not([disabled]):active, .text-link:active {
      transform: scale(.97);
    }
    .subject-card:active, .step-card:active { transform: scale(.99); }

    /* Reduced-motion: corta toda animación/transición de forma global. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ====== Bloque 11: tema oscuro ====== */
    html[data-theme="dark"] {
      --bg: #0F1311;
      --surface: #181D1A;
      --panel: #181D1A;
      --surface-soft: #232925;
      --ink: #E7EAE5;
      --muted: #9AA39C;
      --line: #2F352F;
      --green: #4FA987;
      --green-2: #74D3AC;
      --green-soft: #1E2C25;
      --aqua: #6CC8DF;
      --aqua-soft: #16292F;
      --violet: #9F90E6;
      --rose: #DC8DA4;
      --gold: #DCA460;
      --red: #E58A8A;
      --blue: #7BA2D6;
      --teal: #5FB3B7;
      --shadow: 0 18px 52px rgba(0, 0, 0, .55);
      --shadow-soft: 0 8px 24px rgba(0, 0, 0, .45);
      --focus: 0 0 0 4px rgba(108, 200, 223, .35);
      color-scheme: dark;
    }

    html[data-theme="dark"] body {
      background:
        radial-gradient(circle at 16% -8%, rgba(108, 200, 223, .08), transparent 30%),
        radial-gradient(circle at 94% 2%, rgba(79, 169, 135, .10), transparent 32%),
        var(--bg);
    }
    html[data-theme="dark"] .sidebar { background: var(--surface); }
    html[data-theme="dark"] .brand-mark,
    html[data-theme="dark"] .avatar.logo-avatar,
    html[data-theme="dark"] .profile-avatar.logo-avatar {
      background: linear-gradient(135deg, #1C3239, #1E2C25);
      border-color: rgba(108, 200, 223, .22);
    }

    /* Texto secundario hardcodeado */
    html[data-theme="dark"] .nav button,
    html[data-theme="dark"] .sidebar-note,
    html[data-theme="dark"] .calendar-legend { color: var(--muted); }

    /* Barras y pistas */
    html[data-theme="dark"] .progress,
    html[data-theme="dark"] .mini-bar,
    html[data-theme="dark"] .beast-bar-track { background: #2C322C; }
    html[data-theme="dark"] .score-ring-track { stroke: #2C322C; }

    /* Superficies suaves hardcodeadas */
    html[data-theme="dark"] .node { background: var(--green-soft); }
    html[data-theme="dark"] .nav button:hover,
    html[data-theme="dark"] .nav button:focus-visible { background: var(--surface-soft); }
    html[data-theme="dark"] .continue-card,
    html[data-theme="dark"] .calendar-day,
    html[data-theme="dark"] .empty-state { background: var(--surface-soft); }

    /* Opciones del quiz */
    html[data-theme="dark"] .option { background: var(--surface-soft); }
    html[data-theme="dark"] .option.correct { background: rgba(79, 169, 135, .22); }
    html[data-theme="dark"] .option.wrong { background: rgba(229, 138, 138, .22); }
    html[data-theme="dark"] .option.picked { background: rgba(123, 162, 214, .24); }

    /* Chips de estado */
    html[data-theme="dark"] .status.good { background: rgba(79, 169, 135, .22); color: var(--green-2); }
    html[data-theme="dark"] .status.warn { background: rgba(220, 164, 96, .22); color: var(--gold); }
    html[data-theme="dark"] .status.bad { background: rgba(229, 138, 138, .22); color: var(--red); }
    html[data-theme="dark"] .pdf-status.good { background: rgba(79, 169, 135, .18); }
    html[data-theme="dark"] .pdf-status.bad { background: rgba(229, 138, 138, .18); color: var(--red); }
    html[data-theme="dark"] .empty-state-icon-warn { background: rgba(229, 138, 138, .18); }

    /* Píldora de racha */
    html[data-theme="dark"] .streak-pill {
      background: linear-gradient(135deg, #2E2716, #322B18);
      color: var(--gold);
    }

    /* Skeleton del visor de PDF */
    html[data-theme="dark"] .pdf-skeleton span,
    html[data-theme="dark"] .pdf-frame {
      background: linear-gradient(90deg, #202622 25%, #2A312C 50%, #202622 75%);
    }

    /* Botones translúcidos blancos -> superficie del tema */
    html[data-theme="dark"] .btn-secondary,
    html[data-theme="dark"] .icon-btn,
    html[data-theme="dark"] .chip { background: var(--surface-soft); }
    html[data-theme="dark"] .sidebar {
      background: linear-gradient(180deg, rgba(24, 29, 26, .96), rgba(24, 29, 26, .9)), var(--surface);
    }

    /* Dark-mode hardening: evita paneles claros con texto claro encima. */
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .continue-card,
    html[data-theme="dark"] .quiz-question,
    html[data-theme="dark"] .daily-card,
    html[data-theme="dark"] .stat,
    html[data-theme="dark"] .question-card,
    html[data-theme="dark"] .subject-card,
    html[data-theme="dark"] .block-card,
    html[data-theme="dark"] .material-card,
    html[data-theme="dark"] .resource-card,
    html[data-theme="dark"] .attempt-card,
    html[data-theme="dark"] .step-card,
    html[data-theme="dark"] .profile-card-item,
    html[data-theme="dark"] .habit-card,
    html[data-theme="dark"] .habit-preset-card,
    html[data-theme="dark"] .habit-stat-row,
    html[data-theme="dark"] .soon-subject,
    html[data-theme="dark"] .habit-mini-preset {
      background:
        linear-gradient(180deg, rgba(29, 35, 31, .96), rgba(22, 27, 24, .94)),
        var(--surface);
      border-color: var(--line);
      color: var(--ink);
    }

    html[data-theme="dark"] .quiz-question h2,
    html[data-theme="dark"] .panel h2,
    html[data-theme="dark"] .panel h3,
    html[data-theme="dark"] .stat strong,
    html[data-theme="dark"] .habit-card strong,
    html[data-theme="dark"] .habit-preset-card h3,
    html[data-theme="dark"] .option {
      color: var(--ink);
    }

    html[data-theme="dark"] .option {
      border-color: #3A423B;
      background: #202722;
    }
    html[data-theme="dark"] .option .letter,
    html[data-theme="dark"] .habit-card-icon,
    html[data-theme="dark"] .habit-mini-preset span,
    html[data-theme="dark"] .empty-state-icon {
      background: #25332D;
      color: var(--green-2);
    }

    html[data-theme="dark"] .search,
    html[data-theme="dark"] .field select,
    html[data-theme="dark"] .field input,
    html[data-theme="dark"] .habit-filters select,
    html[data-theme="dark"] .profile-form input {
      background: #1B211D;
      border-color: #343C35;
      color: var(--ink);
      box-shadow: none;
    }
    html[data-theme="dark"] .search input,
    html[data-theme="dark"] .search input::placeholder {
      color: var(--muted);
    }
    html[data-theme="dark"] .search input { color: var(--ink); }

    html[data-theme="dark"] .btn-secondary,
    html[data-theme="dark"] .icon-btn,
    html[data-theme="dark"] .chip,
    html[data-theme="dark"] .habit-tabs button,
    html[data-theme="dark"] .habit-step,
    html[data-theme="dark"] .habit-meta span {
      background: #202722;
      border-color: #364139;
      color: var(--ink);
    }
    html[data-theme="dark"] .chip.active,
    html[data-theme="dark"] .habit-tabs button.active {
      background: linear-gradient(135deg, var(--green), var(--teal));
      color: #07110D;
      border-color: transparent;
    }
    html[data-theme="dark"] .habit-ring {
      background:
        radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
        conic-gradient(var(--green) var(--habit-score, 0%), #29312C 0);
    }
    html[data-theme="dark"] .habit-day {
      background: #202722;
      border-color: #364139;
    }
    html[data-theme="dark"] .habit-day.level-1 { background: rgba(108, 200, 223, .16); color: var(--aqua); }
    html[data-theme="dark"] .habit-day.level-2 { background: rgba(108, 200, 223, .24); color: var(--aqua); }
    html[data-theme="dark"] .habit-day.level-3 { background: rgba(79, 169, 135, .26); color: var(--green-2); }
    html[data-theme="dark"] .habit-day.level-4 { background: linear-gradient(135deg, var(--green), var(--teal)); color: #07110D; }
    html[data-theme="dark"] .mobile-nav {
      background: rgba(15, 19, 17, .94);
      border-color: var(--line);
      box-shadow: 0 -14px 34px rgba(0, 0, 0, .42);
      backdrop-filter: blur(16px);
    }
    html[data-theme="dark"] .mobile-nav button {
      color: var(--muted);
    }
    html[data-theme="dark"] .mobile-nav button.active,
    html[data-theme="dark"] .mobile-nav button:hover,
    html[data-theme="dark"] .mobile-nav button:focus-visible {
      background: rgba(79, 169, 135, .20);
      color: var(--green-2);
    }
    html[data-theme="dark"] body.auth-locked .auth-card {
      background: color-mix(in srgb, var(--surface) 88%, var(--green) 12%);
      border-color: color-mix(in srgb, var(--green) 38%, var(--line));
      box-shadow:
        0 26px 80px rgba(0, 0, 0, .52),
        0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent);
    }
    html[data-theme="dark"] .table-wrap,
    html[data-theme="dark"] table {
      background: #181D1A;
      border-color: var(--line);
      color: var(--ink);
    }
    html[data-theme="dark"] th {
      background: #202722;
      color: var(--muted);
    }
    html[data-theme="dark"] td {
      border-color: var(--line);
      color: var(--ink);
    }
    html[data-theme="dark"] .kbd {
      background: #101512;
      border-color: #364139;
      color: var(--ink);
      box-shadow: 0 1px 0 #364139;
    }
    html[data-theme="dark"] .beast-feedback {
      border-color: rgba(220, 164, 96, .35);
      background:
        linear-gradient(135deg, rgba(220, 164, 96, .12), rgba(79, 169, 135, .12)),
        #181D1A;
      color: var(--ink);
    }

    /* ====== Repaso espaciado (SRS) ====== */
    .srs-strip {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      text-align: left;
      padding: 14px 18px;
      border: 1px solid rgba(118, 105, 184, .35);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(118, 105, 184, .12), rgba(91, 190, 216, .07) 60%),
        var(--surface);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      font: inherit;
      color: var(--ink);
    }
    .srs-strip:hover, .srs-strip:focus-visible {
      outline: 0;
      border-color: var(--violet);
      box-shadow: var(--focus);
    }
    .srs-strip-icon { font-size: 1.5rem; flex: none; }
    .srs-strip-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
    .srs-strip-text strong { font-size: 1rem; }
    .srs-strip-text > span { color: var(--muted); font-size: .85rem; }
    .srs-strip-cta { font-weight: 800; color: var(--violet); white-space: nowrap; }

    .srs-hero.has-due { border-color: rgba(118, 105, 184, .45); }
    .chip-due { background: var(--violet); color: #fff; border-color: transparent; }
    .srs-ladder {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }
    .srs-step {
      display: grid;
      gap: 2px;
      justify-items: center;
      padding: 10px 4px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--muted);
    }
    .srs-step strong { font-size: 1.05rem; color: var(--ink); }
    .srs-step span { font-size: .72rem; font-weight: 800; text-transform: uppercase; }
    .srs-step.has-cards {
      border-color: rgba(118, 105, 184, .4);
      background: linear-gradient(180deg, rgba(118, 105, 184, .10), transparent), var(--surface-soft);
    }
    html[data-theme="dark"] .srs-strip {
      background:
        linear-gradient(135deg, rgba(159, 144, 230, .14), rgba(108, 200, 223, .06) 60%),
        var(--surface);
    }

    @media (max-width: 760px) {
      .srs-strip { flex-wrap: wrap; }
      .srs-strip-cta { margin-left: auto; }
      .srs-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ====== Simulacro: reloj global y calificación ====== */
    .chip-exam {
      background: var(--ink);
      color: var(--bg);
      border-color: transparent;
      font-variant-numeric: tabular-nums;
    }
    .chip-exam.is-low {
      background: var(--red);
      color: #fff;
      animation: beast-pulse .8s ease-in-out infinite;
    }
    .exam-grade {
      display: grid;
      justify-items: center;
      gap: 4px;
      margin: 6px auto 2px;
      padding: 14px 26px;
      border-radius: 16px;
      border: 2px solid var(--green);
      background: linear-gradient(180deg, rgba(45, 122, 95, .10), transparent), var(--surface);
    }
    .exam-grade.is-fail {
      border-color: var(--red);
      background: linear-gradient(180deg, rgba(184, 87, 87, .10), transparent), var(--surface);
    }
    .exam-grade-num {
      font-family: "Fraunces", Inter, ui-serif, Georgia, serif;
      font-size: 2.6rem;
      font-weight: 700;
      line-height: 1;
    }
    .exam-grade-badge {
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .12em;
      padding: 3px 12px;
      border-radius: 999px;
      background: var(--green);
      color: #fff;
    }
    .exam-grade.is-fail .exam-grade-badge { background: var(--red); }
    @media (prefers-reduced-motion: reduce) {
      .chip-exam.is-low { animation: none; }
    }

    /* ====== Niveles y celebraciones ====== */
    .confetti-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
    }
    .level-progress {
      display: grid;
      gap: 4px;
      margin-top: 8px;
      max-width: 280px;
    }
    .level-progress .mini-bar span { background: linear-gradient(90deg, var(--green), var(--violet)); }
    .level-progress-result {
      margin: 6px auto 0;
      justify-items: center;
      width: min(280px, 100%);
    }

    /* ====== Heatmap anual + sparkline de XP ====== */
    .heatmap-scroll {
      overflow-x: auto;
      padding-bottom: 6px;
      -webkit-overflow-scrolling: touch;
    }
    .hm-month {
      font: 700 9px Inter, sans-serif;
      fill: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .hm-cell { fill: #EDF1EC; }
    .hm-l1 { fill: #BFE3D2; }
    .hm-l2 { fill: #7CC4A4; }
    .hm-l3 { fill: #3F9374; }
    .hm-l4 { fill: #1F6B52; }
    html[data-theme="dark"] .hm-cell { fill: #232925; }
    html[data-theme="dark"] .hm-l1 { fill: #1E3A2E; }
    html[data-theme="dark"] .hm-l2 { fill: #2A5C47; }
    html[data-theme="dark"] .hm-l3 { fill: #3D8A6A; }
    html[data-theme="dark"] .hm-l4 { fill: #74D3AC; }
    .heatmap-legend {
      display: flex;
      align-items: center;
      gap: 5px;
      justify-content: flex-end;
      margin-top: 6px;
      color: var(--muted);
    }
    .heatmap-legend i {
      width: 12px;
      height: 12px;
      border-radius: 2.5px;
      display: inline-block;
    }
    .heatmap-legend .hm-l0 { background: #EDF1EC; }
    .heatmap-legend .hm-l1 { background: #BFE3D2; }
    .heatmap-legend .hm-l2 { background: #7CC4A4; }
    .heatmap-legend .hm-l3 { background: #3F9374; }
    .heatmap-legend .hm-l4 { background: #1F6B52; }
    html[data-theme="dark"] .heatmap-legend .hm-l0 { background: #232925; }
    html[data-theme="dark"] .heatmap-legend .hm-l1 { background: #1E3A2E; }
    html[data-theme="dark"] .heatmap-legend .hm-l2 { background: #2A5C47; }
    html[data-theme="dark"] .heatmap-legend .hm-l3 { background: #3D8A6A; }
    html[data-theme="dark"] .heatmap-legend .hm-l4 { background: #74D3AC; }

    .xp-spark {
      width: 100%;
      height: 110px;
      display: block;
      margin-top: 6px;
    }
    .xp-spark-line {
      fill: none;
      stroke: var(--green);
      stroke-width: 2.5;
      stroke-linejoin: round;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }
    .xp-spark-area {
      fill: rgba(45, 122, 95, .14);
      stroke: none;
    }
    html[data-theme="dark"] .xp-spark-line { stroke: var(--green-2); }
    html[data-theme="dark"] .xp-spark-area { fill: rgba(116, 211, 172, .12); }

    /* ====== Paleta de comandos (Ctrl+K) ====== */
    .cmdk {
      position: fixed;
      inset: 0;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: clamp(40px, 14vh, 140px) 16px 16px;
      background: rgba(15, 19, 17, .45);
      backdrop-filter: blur(3px);
      z-index: 1200;
    }
    .cmdk.active { display: flex; }
    .cmdk-card {
      width: min(560px, 100%);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: viewEnter .18s ease both;
    }
    #cmdk-input {
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 1.05rem;
      padding: 16px 18px;
    }
    #cmdk-input:focus { outline: none; }
    .cmdk-list {
      max-height: 320px;
      overflow-y: auto;
      padding: 8px;
      display: grid;
      gap: 2px;
    }
    .cmdk-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: left;
      padding: 11px 12px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      cursor: pointer;
    }
    .cmdk-item .tiny { color: var(--muted); }
    .cmdk-item:hover, .cmdk-item.is-active {
      background: var(--surface-soft);
    }
    .cmdk-item.is-active {
      box-shadow: inset 2.5px 0 0 var(--green);
    }
    .cmdk-hint {
      margin: 0;
      padding: 10px 16px;
      border-top: 1px solid var(--line);
      color: var(--muted);
    }
    @media (max-width: 760px) {
      .cmdk-btn { display: none; }   /* en móvil la paleta es por teclado externo */
    }

    /* ====== Respaldo de progreso (perfil) ====== */
    .backup-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding: 14px;
      border: 1px dashed var(--line);
      border-radius: 12px;
      background: var(--surface-soft);
    }
    .backup-row p { margin: 2px 0 0; }

    /* ====== Panel de Supabase (perfil) ====== */
    .supabase-panel {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid rgba(91, 190, 216, .4);
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(91, 190, 216, .08), rgba(45, 122, 95, .05) 60%),
        var(--surface);
    }
    .supabase-panel .supabase-status { margin: 0; color: var(--muted); }
    .supabase-form { grid-template-columns: 1fr 1fr; }
    .supabase-form input { font-size: .88rem; }
    @media (max-width: 760px) {
      .supabase-form { grid-template-columns: 1fr; }
    }

    /* ====== Buscador global (dropdown bajo la barra) ====== */
    .gsearch-holder { position: relative; }
    .gsearch-results {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      min-width: min(480px, 92vw);
      max-height: min(430px, 60vh);
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 6px;
      z-index: 1100;
    }
    .gsearch-results.active { display: block; animation: viewEnter .15s ease both; }
    .gsearch-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 9px 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      cursor: pointer;
    }
    .gsearch-item:hover, .gsearch-item.is-active { background: var(--surface-soft); }
    .gsearch-item.is-active { box-shadow: inset 2.5px 0 0 var(--green); }
    .gsearch-type {
      flex: none;
      font-size: .64rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green-2);
      min-width: 64px;
      text-align: center;
    }
    .gsearch-body { display: grid; gap: 1px; min-width: 0; }
    .gsearch-body strong {
      font-size: .92rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .gsearch-body .tiny { color: var(--muted); }
    .gsearch-note { padding: 14px; color: var(--muted); font-size: .9rem; }
    @media (max-width: 760px) {
      .gsearch-results { position: fixed; left: 12px; right: 12px; top: 130px; min-width: 0; }
    }

    /* ====== Configuración ====== */
    .config-theme-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .config-theme-option {
      display: grid;
      gap: 6px;
      justify-items: center;
      padding: 16px 8px;
      border: 2px solid var(--line);
      border-radius: 14px;
      background: var(--surface-soft);
      color: var(--ink);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .config-theme-option .config-theme-icon svg { width: 26px; height: 26px; display: block; }
    .config-theme-option.is-active {
      border-color: var(--green);
      background: linear-gradient(180deg, rgba(45, 122, 95, .10), transparent), var(--surface-soft);
      box-shadow: var(--focus);
    }
    .config-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-soft);
    }
    .config-row p { margin: 2px 0 0; }
    .switch {
      flex: none;
      width: 52px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface);
      position: relative;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease;
    }
    .switch-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--muted);
      transition: transform .18s ease, background .18s ease;
    }
    .switch.is-on { background: var(--green); border-color: var(--green); }
    .switch.is-on .switch-knob { transform: translateX(22px); background: #fff; }
    .config-tabs-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .config-tab-slot select {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
    }
    @media (max-width: 760px) {
      .config-tabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .config-theme-option { padding: 12px 6px; font-size: .9rem; }
    }

    /* ====== Campo @usuario (registro) ====== */
    .username-box {
      display: flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg);
      overflow: hidden;
    }
    .username-box:focus-within { box-shadow: var(--focus); border-color: var(--green); }
    .username-at {
      padding: 0 4px 0 13px;
      font-weight: 900;
      font-size: 1.05rem;
      color: var(--green-2);
    }
    .username-box input {
      flex: 1;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding-left: 2px !important;
    }
    .username-box input:focus-visible { outline: none; }
    .auth-hint.is-ok { color: var(--green-2); font-weight: 700; }
    .auth-hint.is-bad { color: var(--red); font-weight: 700; }

    /* ====== Botón "Continuar con Google" y divisor ====== */
    .btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 46px;
      margin-bottom: 4px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    }
    .btn-google:hover, .btn-google:focus-visible {
      outline: 0;
      border-color: var(--green);
      box-shadow: var(--focus);
    }
    .btn-google:active { transform: scale(.98); }
    .btn-google[disabled] { opacity: .6; cursor: wait; }
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 0;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .auth-divider::before, .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    /* ====== Cuenta (FacMed Cloud), legal y zona de peligro ====== */
    .account-card {
      display: grid;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface-soft);
      overflow: hidden;
      padding: 4px 14px;
    }
    .account-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }
    .account-row:last-of-type { border-bottom: 0; }
    .account-card .row { padding-bottom: 12px; }
    .legal-links { display: grid; gap: 8px; }
    .legal-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--ink);
      text-decoration: none;
      transition: border-color .2s ease, transform .15s ease;
    }
    .legal-link:hover { border-color: var(--green); transform: translateX(2px); }
    .legal-link > span:first-child { font-size: 1.2rem; }
    .legal-link div { flex: 1; min-width: 0; }
    .legal-link p { margin: 1px 0 0; }
    .legal-arrow { color: var(--muted); font-weight: 800; }
    .danger-panel { border-style: dashed; }
    .danger-reveal { color: var(--muted); font-size: .85rem; }
    .danger-box strong { color: var(--red); }
    .danger-box p { margin: 6px 0 0; }
    .danger-input {
      width: 100%;
      margin-top: 10px;
      padding: 11px 13px;
      border: 1.5px solid var(--red);
      border-radius: 10px;
      background: var(--bg);
      color: var(--ink);
      font: inherit;
      letter-spacing: .08em;
    }
    .btn-danger {
      min-height: 42px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      transition: opacity .2s ease, transform .15s ease;
    }
    .btn-danger:hover { opacity: .9; }
    .btn-danger:active { transform: scale(.97); }
    .btn-danger[disabled] { opacity: .35; cursor: not-allowed; }
    .config-version {
      margin: 20px 0 4px;
      text-align: center;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .admin-entry { border-color: rgba(196, 129, 59, .45); }

    /* El chip de sync respeta hidden (antes quedaba un punto fantasma) */
    .cloud-sync-status[hidden] { display: none !important; }
    .cloud-sync-status {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .cloud-sync-status { max-width: 130px; font-size: .72rem; }
    }

    /* ====== Meta diaria (anillo de XP) ====== */
    .daily-goal {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px 8px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }
    .daily-goal svg { display: block; }
    .daily-goal-ring-track { stroke: var(--line); }
    .daily-goal-ring-fill {
      stroke: var(--green);
      transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
    }
    .daily-goal.is-done .daily-goal-ring-fill { stroke: var(--gold); }
    .daily-goal-text { display: grid; line-height: 1.15; }
    .daily-goal-text strong { font-size: .92rem; }
    .daily-goal-text span { font-size: .72rem; color: var(--muted); font-weight: 700; }
    .daily-goal-emoji { font-size: .95rem; }

    /* ====== Combo de aciertos en el quiz ====== */
    .combo-chip {
      background: linear-gradient(135deg, var(--gold), var(--rose));
      color: #fff;
      border-color: transparent;
      font-weight: 900;
      animation: popCorrect .35s ease;
    }

    /* ============================================================
       LIQUID GLASS iOS — barra inferior (mejor alcanzado, misma paleta)
       ============================================================ */
    @media (max-width: 760px) {
      .mobile-nav {
        left: 10px;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        border-radius: 26px;
        padding: 4px 5px;
        gap: 2px;
        /* iOS-style frosted liquid glass — translúcido + alto blur + vibrancy */
        background: color-mix(in srgb, var(--surface) 72%, transparent);
        border: 1px solid color-mix(in srgb, #fff 62%, var(--line) 30%);
        -webkit-backdrop-filter: blur(26px) saturate(1.85);
        backdrop-filter: blur(26px) saturate(1.85);
        box-shadow:
          0 20px 48px rgba(19, 32, 27, .22),
          0 4px 12px rgba(19, 32, 27, .10),
          inset 0 1.5px 0 rgba(255, 255, 255, .72),
          inset 0 -0.5px 0 rgba(0, 0, 0, .04);
        transition: transform .34s cubic-bezier(.22, 1, .36, 1),
                    opacity .28s ease,
                    padding .28s cubic-bezier(.22, 1, .36, 1),
                    left .28s ease, right .28s ease, border-radius .28s ease;
        will-change: transform;
      }
      .mobile-nav.nav-hidden {
        transform: translateY(calc(110% + 20px + env(safe-area-inset-bottom)));
        opacity: 0;
      }
      /* Compacto al scrollear (Instagram/iOS feel) — más pill, más glass */
      .mobile-nav.nav-compact {
        left: 18%;
        right: 18%;
        padding: 3px 4px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 78%, transparent);
      }
      .mobile-nav.nav-compact button { min-height: 44px; border-radius: 999px; }
      .mobile-nav.nav-compact button span {
        max-height: 0; opacity: 0; margin: 0;
        transition: max-height .26s ease, opacity .18s ease;
        overflow: hidden;
      }
      .mobile-nav button span {
        max-height: 18px; opacity: 1;
        transition: max-height .26s ease, opacity .22s ease;
        font-weight: 650;
      }
      .mobile-nav button {
        position: relative;
        min-height: 50px;
        border-radius: 20px;
        background: transparent;
        transition: color .22s ease, transform .1s cubic-bezier(.34, 1.4, .64, 1), min-height .26s ease;
        -webkit-tap-highlight-color: transparent;
      }
      /* Active "liquid" selection — soft expanding frosted pill with green tint */
      .mobile-nav button::before {
        content: "";
        position: absolute;
        inset: 3px 2px;
        border-radius: 999px;
        background: linear-gradient(135deg,
          color-mix(in srgb, var(--green) 18%, var(--green-soft)),
          color-mix(in srgb, var(--green-soft) 92%, transparent));
        opacity: 0;
        transform: scale(0.82);
        filter: blur(0.4px);
        transition: opacity .24s cubic-bezier(.34, 1.4, .64, 1),
                    transform .32s cubic-bezier(.22, 1.1, .3, 1);
        z-index: -1;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
      }
      .mobile-nav button.active::before {
        opacity: 1;
        transform: scale(1);
      }
      .mobile-nav button.active {
        color: var(--green-2);
        font-weight: 720;
      }
      .mobile-nav button.active svg {
        transform: translateY(-1.5px) scale(1.12);
      }
      .mobile-nav button svg {
        transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
        width: 19px; height: 19px;
      }
      .mobile-nav button:active {
        transform: scale(0.94);
      }
      /* iOS-like thin top hairline separator for depth */
      .mobile-nav::after {
        content: "";
        position: absolute;
        top: -1px; left: 18%; right: 18%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent);
        pointer-events: none;
        border-radius: 999px;
      }
      .mobile-nav button:active { transform: scale(.9); }
      .mobile-nav button:hover { background: transparent; }
      /* la barra flota: el contenido necesita espacio extra abajo */
      .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
    }
    html[data-theme="dark"] .mobile-nav {
      border-color: rgba(255, 255, 255, .14);
      background: color-mix(in srgb, #121714 78%, transparent);
      box-shadow:
        0 20px 50px rgba(0, 0, 0, .55),
        0 3px 10px rgba(0, 0, 0, .25),
        inset 0 1.5px 0 rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(26px) saturate(1.6);
      backdrop-filter: blur(26px) saturate(1.6);
    }
    html[data-theme="dark"] .mobile-nav::after {
      background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
    }
    html[data-theme="dark"] .mobile-nav button::before {
      background: linear-gradient(135deg, rgba(79, 169, 135, .26), rgba(46, 92, 74, .55));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }
    html[data-theme="dark"] .mobile-nav button.active { color: #a3d9c3; }
    @media (prefers-reduced-motion: reduce) {
      .mobile-nav, .mobile-nav button, .mobile-nav button::before, .mobile-nav button svg { transition: none !important; }
      .mobile-nav.nav-hidden { transform: none; opacity: 1; }
    }
    /* navegadores sin blur: fondo sólido para que siga legible */
    @supports not (backdrop-filter: blur(1px)) {
      .mobile-nav { background: rgba(252, 250, 246, .96); }
      html[data-theme="dark"] .mobile-nav { background: rgba(20, 25, 22, .96); }
    }

    /* ============================================================
       Pantalla de carga premium (skeleton al arrancar)
       ============================================================ */
    .app-loader {
      min-height: min(68vh, 620px);
      display: grid;
      place-items: center;
      padding: clamp(22px, 5vw, 44px);
    }
    .app-loader-card {
      width: min(100%, 460px);
      display: grid;
      justify-items: center;
      gap: 12px;
      text-align: center;
      padding: clamp(24px, 5vw, 36px);
      border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
      border-radius: 28px;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--green) 13%, transparent), transparent 52%),
        color-mix(in srgb, var(--surface) 92%, var(--green) 8%);
      box-shadow: 0 24px 70px rgba(23, 42, 34, .14);
    }
    .app-loader-logo {
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: var(--green-2);
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(135deg, var(--green-soft), color-mix(in srgb, var(--green) 16%, var(--surface)));
      border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
      box-shadow: 0 14px 34px rgba(21, 121, 91, .18);
    }
    .app-loader-logo svg {
      width: 34px;
      height: 34px;
    }
    .app-loader-card h2 {
      margin: 0;
      font-size: clamp(1.55rem, 4vw, 2.25rem);
      letter-spacing: 0;
    }
    .app-loader-card .muted {
      margin: 0;
      max-width: 34ch;
    }
    .loader-orbit {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      min-height: 12px;
      align-items: center;
      justify-content: center;
    }
    .loader-orbit span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      animation: loader-bounce 1s ease-in-out infinite;
      opacity: .42;
    }
    .loader-orbit span:nth-child(2) { animation-delay: .16s; }
    .loader-orbit span:nth-child(3) { animation-delay: .32s; }
    @keyframes loader-bounce {
      0%, 80%, 100% { transform: translateY(0); opacity: .38; }
      40% { transform: translateY(-6px); opacity: 1; }
    }
    html[data-theme="dark"] .app-loader-card {
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 54%),
        color-mix(in srgb, var(--surface) 88%, var(--green) 12%);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
    }
    .boot-skeleton { display: grid; gap: 14px; }
    .boot-skeleton .sk {
      border-radius: 16px;
      background: linear-gradient(100deg, var(--surface-soft) 35%, rgba(255, 255, 255, .55) 50%, var(--surface-soft) 65%);
      background-size: 240% 100%;
      animation: sk-shimmer 1.3s ease-in-out infinite;
    }
    html[data-theme="dark"] .boot-skeleton .sk {
      background: linear-gradient(100deg, #1C211E 35%, #262C28 50%, #1C211E 65%);
      background-size: 240% 100%;
    }
    @keyframes sk-shimmer {
      0% { background-position: 110% 0; }
      100% { background-position: -110% 0; }
    }
    .sk-hero { height: 120px; }
    .sk-row { height: 72px; }
    .sk-half { height: 72px; }
    .sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (prefers-reduced-motion: reduce) {
      .boot-skeleton .sk { animation: none; }
    }

    /* ============================================================
       Indicador de nube: píldora flotante discreta (no mueve nada)
       ============================================================ */
    .cloud-sync-status {
      position: fixed;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      z-index: 900;
      pointer-events: none;
      min-height: 30px;
      padding: 0 11px;
      font-size: .72rem;
      max-width: min(60vw, 260px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-shadow: 0 6px 18px rgba(23, 42, 34, .16);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: syncPillIn .25s cubic-bezier(.22, 1, .36, 1) both;
    }
    @keyframes syncPillIn {
      from { opacity: 0; transform: translateY(8px) scale(.95); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (max-width: 760px) {
      /* arriba de la barra flotante, centrado y mini */
      .cloud-sync-status {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(86px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 32px);
        min-height: 28px;
        font-size: .68rem;
      }
      @keyframes syncPillIn {
        from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
      }
    }
    body.auth-locked .cloud-sync-status {
      bottom: calc(16px + env(safe-area-inset-bottom));
    }
    html[data-theme="dark"] .cloud-sync-status {
      box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    }
    @media (prefers-reduced-motion: reduce) {
      .cloud-sync-status { animation: none; }
    }

    /* ============================================================
       v2.3.0 — Flow State + fixes de capas
       ============================================================ */
    /* El menú lateral abierto en móvil oculta la barra flotante
       (antes se encimaban las capas). */
    @media (max-width: 760px) {
      body.sidebar-open .mobile-nav {
        transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
        opacity: 0;
        pointer-events: none;
      }
    }

    /* Intensidad visual progresiva por racha de aciertos (sutil). */
    .quiz-question { transition: box-shadow .4s ease, border-color .4s ease; }
    .quiz-question.combo-t1 {
      border-color: rgba(196, 129, 59, .35);
      box-shadow: 0 0 0 1px rgba(196, 129, 59, .18), 0 10px 30px rgba(196, 129, 59, .10);
    }
    .quiz-question.combo-t2 {
      border-color: rgba(196, 129, 59, .55);
      box-shadow: 0 0 0 1.5px rgba(196, 129, 59, .3), 0 12px 36px rgba(196, 129, 59, .16);
    }
    .quiz-question.combo-t3 {
      border-color: rgba(181, 101, 127, .6);
      box-shadow: 0 0 0 2px rgba(196, 129, 59, .35), 0 14px 44px rgba(181, 101, 127, .22);
    }
    @media (prefers-reduced-motion: reduce) {
      .quiz-question { transition: none; }
    }

    /* Iconos SVG de materias (sustituyen a las siglas). */
    .subject-icon svg {
      width: 26px;
      height: 26px;
      display: block;
      color: var(--subject-color, var(--green-2));
    }

    /* Link de reporte en la retroalimentación. */
    .report-line { margin: 8px 0 0; }
    .report-line .text-link { color: var(--muted); font-size: .8rem; }
    .report-line .text-link:hover { color: var(--gold); }

    /* ============================================================
       v2.4.0 — FUEGO de rachas, nivel hero, micro-sync, glass login
       ============================================================ */
    /* Tarjeta de nivel en Progreso */
    .level-card {
      background:
        linear-gradient(135deg, rgba(45, 122, 95, .10), rgba(118, 105, 184, .08) 70%),
        var(--surface);
    }
    .level-card-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
    .level-emoji {
      font-size: 2.4rem;
      width: 72px; height: 72px; flex: none;
      display: grid; place-items: center;
      border-radius: 20px;
      background: var(--green-soft);
      box-shadow: inset 0 0 0 2px rgba(45, 122, 95, .25);
    }
    .level-card h2 { margin: 2px 0 4px; }
    .level-bar { height: 12px; }
    .level-bar span {
      background: linear-gradient(90deg, var(--green), var(--gold), var(--rose));
      background-size: 200% 100%;
      animation: levelShimmer 3s linear infinite;
    }
    @keyframes levelShimmer { to { background-position: -200% 0; } }

    /* ---- FUEGO progresivo por racha ---- */
    /* t1 (x3): la pantalla "se prende" — resplandor cálido */
    .quiz-question.combo-t1 {
      border-color: rgba(196, 129, 59, .4);
      box-shadow: 0 0 22px rgba(196, 129, 59, .22), inset 0 0 18px rgba(196, 129, 59, .05);
    }
    /* t2 (x4): llamas sutiles en el borde superior */
    .quiz-question.combo-t2 {
      border-color: rgba(217, 119, 6, .55);
      box-shadow: 0 0 30px rgba(217, 119, 6, .3), inset 0 0 24px rgba(217, 119, 6, .07);
      position: relative;
    }
    .quiz-question.combo-t2::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(90deg, #C4813B, #E25822, #FFB347, #E25822, #C4813B);
      background-size: 300% 100%;
      animation: fireSlide 2.2s linear infinite;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      opacity: .6;
    }
    /* t3 (x5+): EN LLAMAS — borde de fuego animado + brasas subiendo */
    .quiz-question.combo-t3 {
      border-color: transparent;
      box-shadow: 0 0 44px rgba(226, 88, 34, .4), inset 0 0 30px rgba(226, 88, 34, .08);
      position: relative;
    }
    .quiz-question.combo-t3::before {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      padding: 3px;
      background: linear-gradient(90deg, #E25822, #FFB347, #FF5E13, #FFD166, #E25822);
      background-size: 250% 100%;
      animation: fireSlide 1.1s linear infinite;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }
    .quiz-question.combo-t3::after {
      content: "🔥";
      position: absolute;
      top: -14px;
      right: 18px;
      font-size: 1.4rem;
      animation: emberFloat 1s ease-in-out infinite alternate;
      filter: drop-shadow(0 2px 8px rgba(226, 88, 34, .55));
    }
    @keyframes fireSlide { to { background-position: -250% 0; } }
    @keyframes emberFloat {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(-5px) scale(1.15); }
    }
    .combo-chip { position: relative; }
    .quiz-question.combo-t2 .combo-chip,
    .quiz-question.combo-t3 .combo-chip {
      animation: comboPulse .8s ease-in-out infinite alternate;
    }
    @keyframes comboPulse {
      from { transform: scale(1); box-shadow: 0 0 0 rgba(226,88,34,.0); }
      to   { transform: scale(1.07); box-shadow: 0 0 16px rgba(226,88,34,.5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .quiz-question.combo-t2::before, .quiz-question.combo-t3::before,
      .quiz-question.combo-t3::after, .combo-chip, .level-bar span { animation: none !important; }
    }

    /* ---- Indicador de nube: micro-ícono en móvil (jamás texto largo) ---- */
    @media (max-width: 760px) {
      .cloud-sync-status {
        left: auto;
        right: 14px;
        transform: none;
        bottom: calc(96px + env(safe-area-inset-bottom));
        width: 34px;
        height: 34px;
        min-height: 34px;
        max-width: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        font-size: 0;            /* oculta el texto: solo el punto de estado */
      }
      .cloud-sync-status::before { margin-right: 0; width: 10px; height: 10px; }
      @keyframes syncPillIn {
        from { opacity: 0; transform: translateY(8px) scale(.9); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
    }

    /* ---- Glass perfecto ANTES de iniciar sesión ---- */
    body.auth-locked .mobile-nav { display: none !important; }
    .auth-card {
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      backdrop-filter: blur(18px) saturate(1.5);
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    @supports not (backdrop-filter: blur(1px)) {
      .auth-card { background: var(--surface); }
    }

    /* ---- Modal de consenso (reporte de preguntas) ---- */
    .report-modal {
      position: fixed; inset: 0; z-index: 1300;
      display: flex; align-items: center; justify-content: center;
      padding: 18px;
      background: rgba(15, 19, 17, .5);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .report-card {
      width: min(520px, 100%);
      max-height: 86vh; overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 22px;
      animation: viewEnter .2s ease both;
    }
    .report-q { color: var(--muted); margin: 6px 0 0; }
    .report-options { display: grid; gap: 8px; }
    .report-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      border: 1.5px solid var(--line); border-radius: 12px;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease;
    }
    .report-option:has(input:checked) {
      border-color: var(--green);
      background: var(--green-soft);
    }
    .report-option input { accent-color: var(--green); }
    .report-option .letter { font-weight: 900; color: var(--green-2); }
    .report-option-text { flex: 1; font-size: .9rem; }
    .report-option .tiny-chip { font-size: .62rem; padding: 2px 8px; min-height: 0; }
    .report-card textarea {
      width: 100%; padding: 10px 12px;
      border: 1px solid var(--line); border-radius: 10px;
      background: var(--bg); color: var(--ink);
      font: inherit; resize: vertical;
    }

    /* ============================================================
       v2.5.0 — Tutor FacMed (IA), insignias de materia, glass spring
       ============================================================ */
    /* ---- Botón y tarjeta del Tutor FacMed ---- */
    .tutor-slot { margin-top: 12px; }
    .tutor-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      border: 1px solid transparent;
      border-radius: 999px;
      background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(120deg, var(--green), var(--violet), var(--aqua, #5BBED8)) border-box;
      color: var(--ink);
      font: inherit; font-weight: 800; cursor: pointer;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .tutor-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(108, 90, 168, .22); }
    .tutor-btn:active { transform: scale(.97); }
    .tutor-spark { animation: sparkle 2.2s ease-in-out infinite; }
    @keyframes sparkle { 0%,100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .6; transform: scale(1.2) rotate(18deg); } }

    .tutor-card {
      margin-top: 12px;
      border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line));
      border-radius: 16px;
      padding: 16px 18px;
      background:
        linear-gradient(135deg, rgba(108, 90, 168, .08), rgba(91, 190, 216, .05) 70%),
        var(--surface);
      box-shadow: var(--shadow-soft);
      animation: tutorIn .3s cubic-bezier(.22, 1, .36, 1) both;
    }
    @keyframes tutorIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .tutor-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
    .tutor-avatar {
      width: 30px; height: 30px; flex: none;
      display: grid; place-items: center;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--violet), var(--green));
      color: #fff; font-weight: 900;
    }
    .tutor-card-head strong { font-size: .98rem; }
    .tutor-chip { background: var(--violet); color: #fff; font-size: .62rem; min-height: 0; padding: 2px 8px; }
    .tutor-body p { margin: 0 0 8px; line-height: 1.6; }
    .tutor-body p:last-child { margin-bottom: 0; }
    .tutor-foot { margin: 10px 0 0; font-size: .74rem; color: var(--muted); font-style: italic; }
    .tutor-loading { color: var(--muted); display: flex; align-items: center; gap: 8px; }
    .tutor-error { color: var(--muted); }
    .tutor-dots { display: inline-flex; gap: 3px; }
    .tutor-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); animation: tutorDot 1s ease-in-out infinite; }
    .tutor-dots i:nth-child(2) { animation-delay: .15s; }
    .tutor-dots i:nth-child(3) { animation-delay: .3s; }
    @keyframes tutorDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) {
      .tutor-spark, .tutor-card, .tutor-dots i { animation: none !important; }
    }

    /* ---- Insignias premium de materia (sobre .subject-icon existente) ---- */
    .subject-icon {
      position: relative;
      background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--subject-color, var(--green)) 22%, transparent), transparent 70%),
        linear-gradient(145deg, color-mix(in srgb, var(--subject-color, var(--green)) 16%, var(--surface)), var(--surface));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 0 0 1px color-mix(in srgb, var(--subject-color, var(--green)) 28%, transparent),
        0 6px 16px color-mix(in srgb, var(--subject-color, var(--green)) 14%, transparent);
      overflow: hidden;
    }
    .subject-icon::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 45%);
      pointer-events: none;
    }
    .subject-icon svg { position: relative; z-index: 1; color: var(--subject-color, var(--green-2)); }
    html[data-theme="dark"] .subject-icon::after { background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 45%); }

    /* ---- Indicador activo único (v3.2.8): UNA sola cápsula ----
       Se eliminó el glider posicionado por JS (causaba "doble burbuja" al
       encoger la barra). El indicador es la pseudo-pill ::before del botón
       activo: atada al botón, siempre alineada, sin lag. */
    @media (max-width: 760px) {
      .mobile-nav { position: fixed; }
      .mobile-nav .nav-glider { display: none; }
      .mobile-nav button { position: relative; z-index: 1; }
      .mobile-nav button::before { display: block; } /* reactiva la pill por botón */
    }

    /* ============================================================
       v3.0.0 — ARENA FACMED (trivia competitiva en tiempo real)
       ============================================================ */
    .arena-strip {
      border-color: rgba(196, 129, 59, .4);
      background:
        linear-gradient(135deg, rgba(196, 129, 59, .14), rgba(181, 101, 127, .08) 60%),
        var(--surface);
    }
    .arena-strip .srs-strip-cta { color: var(--gold); }
    .arena-hero { position: relative; overflow: hidden; text-align: center; padding: 30px 22px; }
    .arena-hero h2 { font-size: 1.6rem; margin-bottom: 6px; }
    .arena-glow {
      position: absolute; inset: -40% -20% auto;
      height: 70%;
      background: radial-gradient(ellipse at center, rgba(196, 129, 59, .16), transparent 65%);
      pointer-events: none;
    }
    .arena-actions { display: grid; gap: 12px; max-width: 360px; margin: 18px auto 10px; }
    .arena-join { display: flex; gap: 8px; }
    .arena-join input {
      flex: 1; min-width: 0;
      padding: 12px 14px;
      border: 2px solid var(--line); border-radius: 12px;
      background: var(--bg); color: var(--ink);
      font: inherit; font-weight: 900; font-size: 1.15rem;
      letter-spacing: .35em; text-align: center; text-transform: uppercase;
    }
    .arena-join input:focus-visible { outline: 0; border-color: var(--gold); box-shadow: var(--focus); }
    .arena-code {
      display: inline-block;
      padding: 2px 14px;
      border-radius: 12px;
      background: var(--green-soft);
      color: var(--green-2);
      letter-spacing: .3em;
      font-family: "Fraunces", serif;
    }
    .arena-roster {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
      min-height: 40px; margin-top: 14px;
    }
    .arena-player {
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      font-weight: 800; font-size: .9rem;
      animation: popCorrect .3s ease;
    }
    .arena-player.is-me { border-color: var(--green); color: var(--green-2); }
    .arena-wait { margin-top: 12px; color: var(--muted); animation: pulseDot 1.4s ease-in-out infinite; }
    .arena-scores { display: grid; gap: 6px; margin-top: 10px; }
    .arena-score-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      border: 1px solid var(--line); border-radius: 12px;
      background: var(--surface-soft);
    }
    .arena-score-row.is-me { border-color: var(--green); }
    .arena-rank { font-weight: 900; color: var(--muted); width: 22px; }
    .arena-score-name { flex: 1; font-weight: 700; }
    /* Podio glorioso */
    .podium {
      display: flex; align-items: flex-end; justify-content: center; gap: 14px;
      margin-top: 22px; min-height: 190px;
    }
    .podium-col { display: grid; justify-items: center; gap: 6px; width: 110px; }
    .podium-medal { font-size: 2rem; animation: emberFloat 1.2s ease-in-out infinite alternate; }
    .podium-pts { font-size: .8rem; color: var(--muted); font-weight: 800; }
    .podium-bar {
      width: 100%;
      border-radius: 12px 12px 0 0;
      background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 50%, var(--surface)));
      animation: podiumRise .8s cubic-bezier(.22, 1, .36, 1) both;
    }
    .podium-1 { order: 2; } .podium-1 .podium-bar { height: 120px; }
    .podium-2 { order: 1; } .podium-2 .podium-bar { height: 84px; background: linear-gradient(180deg, #B9C0C9, #8E979F); }
    .podium-3 { order: 3; } .podium-3 .podium-bar { height: 60px; background: linear-gradient(180deg, #C98F66, #A06B45); }
    @keyframes podiumRise { from { height: 0; opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .podium-medal, .podium-bar, .arena-player, .arena-wait { animation: none !important; }
    }

    /* Botón compartir hábitos (share card de historias) */
    .habit-share-btn {
      margin-left: auto;
      padding: 8px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      font: inherit; font-weight: 800; font-size: .85rem;
      cursor: pointer;
      transition: border-color .2s ease, transform .15s ease;
    }
    .habit-share-btn:hover { border-color: var(--green); transform: translateY(-1px); }

    /* ═══════════════ v3.1.0 — FacMed Social ═══════════════ */
    /* Campanita del topbar */
    .social-bell { position: relative; }
    .social-badge {
      position: absolute; top: 2px; right: 2px;
      min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: 99px; background: #D9534F; color: #fff;
      font-size: .62rem; font-weight: 800; line-height: 16px;
      text-align: center; pointer-events: none;
    }

    .soc-hero { position: relative; overflow: hidden; }
    .soc-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .soc-week-pill {
      display: flex; flex-direction: column; align-items: center;
      padding: 10px 18px; border-radius: 16px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--green) 16%, var(--panel)), color-mix(in srgb, var(--gold) 10%, var(--panel)));
      border: 1px solid var(--line);
    }
    .soc-week-pill strong { font-size: 1.3rem; line-height: 1.1; }
    .soc-week-pill span { font-size: .68rem; color: var(--muted); }

    /* tabs en fila con scroll horizontal (no se amontonan en móvil) */
    .soc-tabs { display: flex; gap: 6px; margin-top: 14px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .soc-tabs::-webkit-scrollbar { display: none; }
    .soc-tabs button {
      position: relative; flex: 0 0 auto; white-space: nowrap;
      border: 1px solid var(--line); background: var(--panel);
      color: var(--ink); border-radius: 99px; padding: 8px 14px;
      font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer;
      transition: background .2s ease, border-color .2s ease;
    }
    .soc-tabs button.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 26%, transparent); }
    .soc-subtabs { margin-top: 0; margin-bottom: 12px; }
    .soc-dot {
      position: absolute; top: -5px; right: -4px;
      min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
      background: #D9534F; color: #fff; font-size: .62rem; font-weight: 800; line-height: 17px;
    }

    .soc-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 10px 4px; border-bottom: 1px dashed var(--line);
    }
    .soc-row:last-child { border-bottom: 0; }
    .soc-row-name { font-weight: 700; display: flex; flex-direction: column; }
    .soc-row-name em { font-style: normal; color: var(--muted); font-weight: 500; }
    .soc-friend-pts { font-weight: 800; color: var(--green); white-space: nowrap; }
    .soc-search-results:not(:empty) { margin-top: 10px; }
    .soc-privacy { margin-top: 12px; opacity: .85; }

    /* Retos */
    .soc-challenge { margin-top: 14px; }
    .soc-challenge.is-done { opacity: .92; }
    .soc-ch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .soc-ch-state { margin-left: auto; }
    .soc-chip-duel { background: color-mix(in srgb, var(--gold) 18%, var(--panel)); }
    .soc-chip-coop { background: color-mix(in srgb, var(--green) 18%, var(--panel)); }
    .soc-members { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .soc-member {
      display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line);
    }
    .soc-member.is-me { border-color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
    .soc-member.is-pending { opacity: .65; }
    .soc-member-name { font-weight: 700; font-size: .9rem; }
    .soc-member-pts { color: var(--green); }
    .soc-days { display: flex; gap: 4px; }
    .soc-day { width: 12px; height: 12px; border-radius: 4px; background: var(--line); }
    .soc-day-ok { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent); }
    .soc-day-low { background: var(--gold); }
    .soc-day-zero { background: color-mix(in srgb, #D9534F 38%, var(--line)); }
    .soc-day-future { opacity: .35; }
    .soc-ch-actions { margin-top: 12px; flex-wrap: wrap; }

    /* Asistente de reto */
    .soc-w-label { margin: 16px 0 8px; font-size: .85rem; color: var(--muted); }
    .soc-opts { display: flex; gap: 8px; flex-wrap: wrap; }
    .soc-opt {
      flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px; align-items: center;
      padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--line);
      background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
      transition: border-color .2s ease, transform .15s ease;
    }
    .soc-opt small { font-weight: 500; color: var(--muted); font-size: .72rem; }
    .soc-opt.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
    .soc-opt:active { transform: scale(.97); }
    .soc-friend-picks { display: flex; gap: 8px; flex-wrap: wrap; }
    .soc-pick {
      border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
      border-radius: 99px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer;
    }
    .soc-pick.active { border-color: var(--green); background: var(--green); color: #fff; }

    /* Ranking */
    .soc-rank-row { padding: 12px 6px; }
    .soc-rank-row.is-me { background: color-mix(in srgb, var(--green) 8%, transparent); border-radius: 10px; }
    .soc-rank-pos { width: 34px; text-align: center; font-weight: 800; }

    /* Chat */
    .soc-chat { display: flex; flex-direction: column; min-height: 60vh; }
    .soc-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .soc-chat-head strong { flex: 1; text-align: center; }
    .soc-chat-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 2px; max-height: 52vh; }
    .soc-msg {
      max-width: 78%; align-self: flex-start;
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 16px 16px 16px 4px; padding: 8px 12px;
    }
    .soc-msg.is-mine {
      align-self: flex-end; border-radius: 16px 16px 4px 16px;
      background: color-mix(in srgb, var(--green) 14%, var(--panel));
      border-color: color-mix(in srgb, var(--green) 35%, var(--line));
    }
    .soc-msg p { margin: 0; word-break: break-word; }
    .soc-msg .tiny { display: block; text-align: right; opacity: .7; margin-top: 2px; }
    .soc-chat-form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
    .soc-chat-form input {
      flex: 1; border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px;
      font: inherit; background: var(--bg); color: var(--ink);
    }
    .soc-thread-btn { width: 100%; background: none; border: 0; border-bottom: 1px dashed var(--line); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }

    /* Actividad */
    .soc-event.is-new { background: color-mix(in srgb, var(--green) 7%, transparent); border-radius: 10px; }

    @media (max-width: 640px) {
      .soc-member { grid-template-columns: 1fr; gap: 6px; }
      .soc-member-pts { justify-self: end; }
      .soc-chat-scroll { max-height: none; }
      .soc-chat { min-height: calc(100dvh - 280px); }
    }

    /* Arena v3.1: config de sala, ready-check y cuenta regresiva */
    .arena-config { display: flex; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
    .arena-config .field { flex: 1 1 150px; }
    .arena-player.is-ready { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--panel)); }
    .arena-player.is-host { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
    .arena-waiting { font-weight: 700; color: var(--green-2); background: color-mix(in srgb, var(--green) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); padding: 12px 14px; border-radius: 12px; text-align: center; }
    .arena-cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 2px; }
    .arena-cfg-chip { font-size: .76rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
    .arena-cfg-chip.arena-cfg-topic { color: #6a4710; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
    html[data-theme="dark"] .arena-cfg-chip.arena-cfg-topic { color: #ffe7c2; }
    .arena-countdown { text-align: center; padding: 48px 20px; }
    .arena-count {
      font-size: 6rem; font-weight: 800; line-height: 1;
      color: var(--green); margin: 18px 0;
      text-shadow: 0 0 34px color-mix(in srgb, var(--green) 45%, transparent);
    }
    .arena-count.pop { animation: arenaPop .7s cubic-bezier(.2,1.6,.4,1); }
    @keyframes arenaPop {
      0% { transform: scale(.4); opacity: 0; }
      55% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); }
    }

    /* Tutor: chip de explicación local (IA no configurada) */
    .tutor-chip-local { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); color: var(--ink); }
    .tutor-card.tutor-local { border-style: dashed; }

    /* Zona Admin: métricas en cards (mejor que tablas en móvil) */
    .admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
    .admin-metric {
      display: flex; flex-direction: column; gap: 2px; align-items: center;
      padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
    }
    .admin-metric strong { font-size: 1.5rem; color: var(--green); line-height: 1.1; }
    .admin-metric span { font-size: .72rem; color: var(--muted); text-align: center; }

    /* ═══════════════ v3.1.1 — Parche Arena/Guardia ═══════════════ */
    /* Reacciones rápidas en Arena */
    /* Reacciones: barra compacta CONTENIDA (pill centrada), no suelta a media
       pantalla. Scroll horizontal si no caben en móvil. (v3.3.4) */
    .arena-react-bar {
      display: flex; gap: 4px; width: fit-content; max-width: 100%;
      margin: 16px auto 2px; padding: 5px 8px; justify-content: center;
      border-radius: 999px; border: 1px solid var(--line);
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .arena-react {
      border: 0; background: transparent; flex: none;
      border-radius: 99px; width: 38px; height: 38px; font-size: 1.15rem;
      cursor: pointer; transition: transform .12s ease;
    }
    .arena-react:active { transform: scale(1.3); }
    @media (max-width: 560px) { .arena-react { width: 34px; height: 34px; font-size: 1.05rem; } }
    .arena-reactions { position: relative; height: 0; overflow: visible; pointer-events: none; }
    .arena-float-react {
      position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center;
      animation: reactFloat 2.4s ease-out forwards; pointer-events: none;
    }
    .arena-float-react b { font-size: 2rem; }
    .arena-float-react i { font-style: normal; font-size: .62rem; color: var(--muted); font-weight: 700; }
    @keyframes reactFloat {
      0% { transform: translateY(0) scale(.6); opacity: 0; }
      15% { opacity: 1; transform: translateY(-20px) scale(1.15); }
      100% { transform: translateY(-130px) scale(1); opacity: 0; }
    }

    /* ── v3.1.1: barra inferior estable en iOS ──
       El bug "la barra aparece a mitad de pantalla" pasa en Safari iOS
       cuando el rubber-band (overscroll) arrastra visualmente los
       elementos fixed, o cuando 100vh no coincide con el viewport real.
       Mitigación: sin rubber-band vertical en el documento + capa propia
       para la barra + alturas en dvh (arriba). */
    html, body { overscroll-behavior-y: none; }
    .mobile-nav { transform: translateZ(0); backface-visibility: hidden; }

    /* ── Sala de Guardia: avatares, empty states y chat pulido ── */
    .soc-avatar {
      width: 38px; height: 38px; border-radius: 50%; flex: none;
      display: inline-grid; place-items: center;
      font-size: .78rem; font-weight: 800; letter-spacing: .02em;
      color: #fff;
      background: linear-gradient(135deg,
        hsl(var(--soc-hue, 150) 42% 42%),
        hsl(calc(var(--soc-hue, 150) + 40) 46% 32%));
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
    }
    .soc-grow { flex: 1; }
    .soc-row { align-items: center; }
    .soc-friend { gap: 12px; }
    .soc-empty {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      text-align: center; padding: 34px 18px;
      border: 1.5px dashed var(--line); border-radius: 16px;
      background: color-mix(in srgb, var(--green) 4%, transparent);
    }
    .soc-empty-icon { font-size: 2.2rem; }
    .soc-empty strong { font-size: 1.05rem; }
    .soc-empty .tiny { max-width: 360px; }
    .soc-empty .btn { margin-top: 6px; }
    .soc-cancel-link { color: #C0564F; }
    .soc-chat-peer { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
    .soc-chat-peer .soc-avatar { width: 30px; height: 30px; font-size: .65rem; }
    .soc-chat-tools { gap: 6px; }
    .soc-chat-tools .btn-secondary { padding: 6px 10px; font-size: .76rem; }
    .soc-thread-btn { display: flex; gap: 12px; align-items: center; padding: 12px 6px; }

    /* Rachas más vivas (sin tapar la pregunta): pulso de borde de
       pantalla en combo alto + brasas que suben en el feedback. */
    body.combo-hot::after {
      content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
      box-shadow: inset 0 0 90px -28px rgba(255, 122, 26, .55);
      animation: comboEdge 1.6s ease-in-out infinite;
    }
    @keyframes comboEdge {
      0%, 100% { opacity: .35; }
      50% { opacity: .9; }
    }
    .fb-ok.combo-fb { position: relative; overflow: visible; }
    .fb-ok.combo-fb::before {
      content: "🔥"; position: absolute; right: 14px; top: -10px;
      animation: emberUp 1.4s ease-out infinite; font-size: 1rem; opacity: 0;
    }
    @keyframes emberUp {
      0% { transform: translateY(6px) scale(.7); opacity: 0; }
      30% { opacity: .9; }
      100% { transform: translateY(-26px) scale(1.15); opacity: 0; }
    }

    /* Modos rápidos de estudio en Quiz */
    .quick-modes { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .quick-mode { cursor: pointer; border: 1.5px solid var(--line); background: var(--panel); font-weight: 800; transition: border-color .2s ease, transform .12s ease; }
    .quick-mode:hover { border-color: var(--green); transform: translateY(-1px); }

    /* ═══════════════ v3.1.2 — Bandeja de chats + Retos v2 ═══════════════ */
    .chat-btn { position: relative; }
    .chat-drawer-overlay {
      position: fixed; inset: 0; z-index: 60;
      background: rgba(10, 18, 14, .45); backdrop-filter: blur(2px);
      opacity: 0; transition: opacity .22s ease;
    }
    .chat-drawer-overlay.is-open { opacity: 1; }
    .chat-drawer {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
      width: min(92vw, 360px);
      background: var(--panel); border-right: 1px solid var(--line);
      box-shadow: 18px 0 50px -28px rgba(0,0,0,.45);
      transform: translateX(-104%); transition: transform .24s cubic-bezier(.3,1.2,.4,1);
      display: flex; flex-direction: column;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-drawer.is-open { transform: translateX(0); }
    .chat-drawer-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
    }
    .chat-drawer-head h2 { margin: 0; font-size: 1.1rem; }
    .chat-drawer-list { flex: 1; overflow-y: auto; padding: 8px 10px 18px; }
    .chat-item {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 12px 10px; border: 0; border-bottom: 1px dashed var(--line);
      background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
      border-radius: 12px; transition: background .15s ease;
    }
    .chat-item:hover { background: color-mix(in srgb, var(--green) 7%, transparent); }
    .chat-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .chat-item-preview {
      font-size: .78rem; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .chat-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .chat-item-unread {
      min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
      background: var(--green); color: #fff; font-size: .68rem; font-weight: 800;
      line-height: 19px; text-align: center;
    }
    .chat-drawer-empty { margin: 18px 8px; }
    .chat-drawer-empty .btn, .chat-drawer-empty .btn-secondary { width: 100%; }
    .chat-skel { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
    .chat-skel span {
      height: 52px; border-radius: 12px;
      background: linear-gradient(100deg, var(--line) 30%, color-mix(in srgb, var(--line) 40%, transparent) 50%, var(--line) 70%);
      background-size: 200% 100%; animation: skelWave 1.2s linear infinite;
    }
    @keyframes skelWave { to { background-position: -200% 0; } }

    /* Retos v2: wizard */
    .soc-w-input {
      width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
      padding: 11px 14px; font: inherit; background: var(--bg); color: var(--ink);
    }
    .soc-w-input:focus { outline: 0; border-color: var(--green); }
    .soc-w-newhabit { display: flex; gap: 8px; margin-top: 8px; }
    .soc-w-newhabit input { flex: 1; }
    .soc-tpl-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .soc-tpl { cursor: pointer; border: 1.5px solid var(--line); background: var(--panel); font-weight: 700; }
    .soc-tpl.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--panel)); }
    .soc-w-summary { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--green) 6%, transparent); }
    .soc-ch-name { margin: 0 0 8px; font-size: 1.06rem; }
    .soc-ch-habits { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .soc-ch-habit { font-size: .7rem; background: color-mix(in srgb, var(--green) 8%, var(--panel)); }

    /* Zona Admin: métrica con advertencia + accesos rápidos de Inicio */
    .admin-metric.is-warn strong { color: var(--gold); }
    .inicio-quick { margin: 4px 0 16px; }

    /* ═══════════════ v3.1.3 — Avatares + pulido ═══════════════ */
    .avatar-circle {
      width: 38px; height: 38px; border-radius: 50%; flex: none;
      display: inline-grid; place-items: center; overflow: hidden;
      font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #fff;
      background: linear-gradient(135deg,
        hsl(var(--soc-hue, 150) 42% 42%),
        hsl(calc(var(--soc-hue, 150) + 40) 46% 32%));
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
    }
    .avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .avatar-circle.is-emoji { font-size: 1.25rem; }
    .avatar-circle.avatar-hero { width: 64px; height: 64px; font-size: 1.1rem; }
    .avatar-circle.avatar-hero.is-emoji { font-size: 2rem; }
    .soc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
    .soc-avatar.is-emoji { font-size: 1.25rem; }
    .soc-avatar { overflow: hidden; }

    /* Selector de avatar en Perfil */
    .avatar-picker { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
    .avatar-picker > strong { display: block; margin-bottom: 10px; color: var(--muted); }
    .avatar-grid { display: flex; gap: 8px; flex-wrap: wrap; }
    .avatar-opt {
      width: 46px; height: 46px; border-radius: 50%;
      border: 2px solid var(--line); background: var(--panel); color: var(--ink);
      font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer;
      display: grid; place-items: center;
      transition: border-color .18s ease, transform .14s ease;
    }
    .avatar-opt.is-emoji { font-size: 1.35rem; }
    .avatar-opt:hover { transform: translateY(-2px); }
    .avatar-opt.active { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
    .avatar-upload-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; cursor: pointer; }
    .avatar-premium-note { margin-top: 12px; opacity: .85; }
    .premium-chip { background: linear-gradient(120deg, #C4813B, #E3B564); color: #fff; margin-left: 8px; }
    .profile-mini-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

    /* Bandeja de chats: toque premium */
    .chat-drawer-head h2 { display: flex; align-items: center; gap: 8px; }
    .chat-item { animation: chatItemIn .28s ease both; }
    @keyframes chatItemIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
    .chat-item .soc-avatar, .chat-item .avatar-circle { width: 42px; height: 42px; }

    /* Podio: brillo extra */
    .podium-1 .podium-medal { filter: drop-shadow(0 0 10px rgba(255, 209, 102, .8)); animation: medalFloat 2.2s ease-in-out infinite; }
    @keyframes medalFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

    /* ═══════════════ v3.2.0 — Tutor Gemini + modos de estudio ═══════════════ */
    .tutor-quota { margin-left: auto; font-size: .68rem; color: var(--muted); font-weight: 700; }
    .tutor-repasa {
      margin-top: 8px; padding: 8px 12px; border-radius: 10px;
      background: color-mix(in srgb, var(--green) 10%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
      font-weight: 700; display: flex; align-items: center; gap: 8px;
    }
    .tutor-repasa-ico { font-size: 1rem; }
    .tutor-chip-local { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); color: var(--ink); }

    /* "Tengo duda" + calculadora */
    .quiz-q-head { display: flex; align-items: flex-start; gap: 10px; }
    .quiz-flag-btn, .quiz-tool-btn {
      flex: none; margin-top: 16px; width: 40px; height: 40px; border-radius: 12px;
      border: 1.5px solid var(--line); background: var(--panel); cursor: pointer;
      font-size: 1.1rem; transition: border-color .2s ease, transform .12s ease;
    }
    .quiz-flag-btn:hover, .quiz-tool-btn:hover { border-color: var(--green); transform: translateY(-1px); }
    .quiz-flag-btn.is-flagged { border-color: #D9534F; background: color-mix(in srgb, #D9534F 12%, var(--panel)); }
    .doubt-card { border-left: 3px solid #D9534F; }
    .doubts-panel { border: 1px solid color-mix(in srgb, #D9534F 30%, var(--line)); }

    .calc-inline {
      margin: 14px 0; padding: 12px; border-radius: 14px;
      border: 1px solid var(--line); background: var(--surface-soft); max-width: 280px;
    }
    .calc-display {
      text-align: right; font-size: 1.5rem; font-weight: 800; padding: 8px 12px;
      background: var(--panel); border-radius: 10px; margin-bottom: 10px;
      overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
    }
    .calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .calc-key {
      height: 46px; border-radius: 10px; border: 1px solid var(--line);
      background: var(--panel); color: var(--ink); font: inherit; font-weight: 700;
      font-size: 1.05rem; cursor: pointer;
    }
    .calc-key:active { transform: scale(.95); }
    .calc-key.calc-op { background: color-mix(in srgb, var(--green) 14%, var(--panel)); }
    .calc-key.calc-fn { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }

    /* Flashcards (v3.2.0) */
    .flash-shell { max-width: 560px; margin: 0 auto; }
    .flash-progress { margin-bottom: 8px; }
    .flash-count { text-align: center; margin-bottom: 14px; }
    .flash-card {
      position: relative; width: 100%; min-height: 340px; border: 0; padding: 0;
      background: transparent; cursor: pointer; perspective: 1400px;
      transform-style: preserve-3d; font: inherit; display: block;
    }
    .flash-face {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px; text-align: center;
      padding: 28px; border-radius: 22px; border: 1px solid var(--line);
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      transition: transform .55s cubic-bezier(.4, .2, .2, 1);
      box-shadow: 0 18px 50px -30px rgba(0,0,0,.5);
    }
    .flash-front {
      background: linear-gradient(155deg, var(--panel), color-mix(in srgb, var(--green) 8%, var(--panel)));
      transform: rotateY(0deg);
    }
    .flash-back {
      background: linear-gradient(155deg, color-mix(in srgb, var(--green) 14%, var(--panel)), var(--panel));
      transform: rotateY(180deg);
    }
    .flash-card.is-flipped .flash-front { transform: rotateY(-180deg); }
    .flash-card.is-flipped .flash-back { transform: rotateY(0deg); }
    .flash-tag {
      font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
      color: var(--green); padding: 4px 12px; border-radius: 99px;
      background: color-mix(in srgb, var(--green) 12%, transparent);
    }
    .flash-q { font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
    .flash-a { font-size: 1.25rem; font-weight: 800; }
    .flash-expl { font-size: .9rem; color: var(--muted); line-height: 1.5; }
    .flash-hint { font-size: .76rem; color: var(--muted); margin-top: auto; }
    .flash-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: center; flex-wrap: wrap; }
    .flash-grade { flex: 1; min-width: 110px; }
    .flash-grade.is-good { background: var(--green); }
    .flash-grade.is-warn { background: var(--gold); }
    .flash-grade.is-bad { background: #C0564F; }
    .flash-summary { display: flex; gap: 12px; justify-content: center; margin: 18px 0; }
    .flash-stat { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); }
    .flash-stat strong { font-size: 1.8rem; }
    .flash-stat.is-good strong { color: var(--green); }
    .flash-stat.is-warn strong { color: var(--gold); }
    .flash-stat.is-bad strong { color: #C0564F; }
    @media (prefers-reduced-motion: reduce) { .flash-face { transition: none; } }

    /* ═══════════════ v3.2.4 — Flashcards premium ═══════════════ */
    .flash-intro-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
    .flash-intro-emoji {
      font-size: 2.6rem; width: 64px; height: 64px; flex: none;
      display: grid; place-items: center; border-radius: 18px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--green) 22%, var(--panel)), color-mix(in srgb, var(--gold) 16%, var(--panel)));
    }
    .flash-form { margin: 8px 0; }
    .flash-available { margin: 4px 0 14px; color: var(--muted); font-weight: 700; }

    .flash-topbar { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
    .flash-pill {
      font-size: .72rem; font-weight: 800; letter-spacing: .03em;
      padding: 5px 14px; border-radius: 99px;
      background: color-mix(in srgb, var(--green) 14%, var(--panel));
      color: var(--green-2, var(--green)); border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
    }
    .flash-pill-block { background: color-mix(in srgb, var(--gold) 14%, var(--panel)); color: var(--ink); border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); }

    /* Pila de tarjetas: dos "fantasmas" detrás para sensación de mazo */
    .flash-stack { position: relative; margin-top: 6px; }
    .flash-ghost {
      position: absolute; inset: 0; border-radius: 22px; border: 1px solid var(--line);
      background: var(--panel); z-index: 0;
    }
    .flash-ghost-1 { transform: translateY(8px) scale(.97); opacity: .55; }
    .flash-ghost-2 { transform: translateY(16px) scale(.94); opacity: .3; }
    .flash-card { position: relative; z-index: 1; }

    .flash-front {
      background:
        radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--green) 12%, var(--panel)), transparent 60%),
        linear-gradient(160deg, var(--panel), color-mix(in srgb, var(--green) 6%, var(--panel)));
    }
    .flash-back {
      background:
        radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--gold) 16%, var(--panel)), transparent 60%),
        linear-gradient(160deg, color-mix(in srgb, var(--green) 16%, var(--panel)), var(--panel));
    }
    .flash-tag-ok { background: color-mix(in srgb, var(--green) 20%, var(--panel)); }
    .flash-flip-btn { min-width: 180px; }
    .flash-grade { font-size: .92rem; }

    /* Ring de dominio en el resumen final */
    .flash-done { text-align: center; }
    .flash-done-ring {
      width: 120px; height: 120px; margin: 4px auto 14px; border-radius: 50%;
      display: grid; place-items: center; position: relative;
      background: conic-gradient(var(--green) calc(var(--pct) * 1%), color-mix(in srgb, var(--line) 60%, transparent) 0);
    }
    .flash-done-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--panel); }
    .flash-done-ring span { position: relative; font-size: 1.6rem; font-weight: 800; line-height: 1; }
    .flash-done-ring em { position: relative; font-style: normal; font-size: .66rem; color: var(--muted); display: block; }

    /* Tutor: conversación corta (2 preguntas extra) */
    .tutor-convo { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
    .tutor-extras { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
    .tutor-extra { background: color-mix(in srgb, var(--green) 5%, var(--panel)); border-radius: 12px; padding: 10px 12px; }
    .tutor-extra-q { margin: 0 0 4px; font-weight: 700; }
    .tutor-extra-a { margin: 0; color: var(--ink); }
    .tutor-convo-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .tutor-convo-input {
      flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 99px;
      padding: 10px 16px; font: inherit; background: var(--bg); color: var(--ink);
    }
    .tutor-convo-input:focus { outline: 0; border-color: var(--green); }
    .tutor-convo-send { padding: 9px 18px; }
    .tutor-convo-left { font-size: .72rem; color: var(--muted); font-weight: 700; }
    .tutor-convo-done { margin: 4px 0 0; font-size: .82rem; color: var(--muted); font-style: italic; }

    /* Recorte de foto de perfil (premium) */
    .crop-modal {
      position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
      background: rgba(8, 14, 11, .6); backdrop-filter: blur(3px); padding: 18px;
    }
    .crop-modal[hidden] { display: none; }
    .crop-dialog {
      width: min(94vw, 360px); background: var(--panel); border: 1px solid var(--line);
      border-radius: 20px; padding: 20px; text-align: center;
      box-shadow: 0 30px 80px -40px rgba(0,0,0,.6);
    }
    .crop-dialog h3 { margin: 0 0 4px; }
    .crop-stage {
      position: relative; width: 260px; height: 260px; margin: 14px auto;
      border-radius: 14px; overflow: hidden; background: #000; cursor: grab; touch-action: none;
    }
    .crop-stage:active { cursor: grabbing; }
    .crop-stage canvas { display: block; }
    .crop-ring {
      position: absolute; inset: 0; pointer-events: none;
      box-shadow: 0 0 0 9999px rgba(0,0,0,.45) inset;
      border-radius: 50%;
    }
    .crop-zoom { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
    .crop-zoom span { font-size: .76rem; font-weight: 800; color: var(--muted); }
    .crop-zoom input { flex: 1; }
    .crop-actions { justify-content: center; }
    body.modal-open { overflow: hidden; }

    /* Admin: Flashcards IA + tarjeta de respuesta tipo texto */
    .flash-a-text { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
    .admin-flash-form { margin: 8px 0; }
    .admin-flash-queue { display: flex; flex-direction: column; gap: 12px; }
    .admin-flash-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); }
    .admin-flash-meta { font-size: .72rem; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
    .admin-flash-front { margin: 6px 0 4px; }
    .admin-flash-back { margin: 0 0 10px; color: var(--muted); }

    /* ═══════════════ v3.2.6 — Mobile app feel ═══════════════ */
    /* Foto de perfil global: cualquier contenedor de avatar con .has-photo */
    .avatar.has-photo, .avatar-circle.has-photo, [id$="-avatar"].has-photo { overflow: hidden; padding: 0; }
    .has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

    /* Bottom nav compacto: respeta reduced-motion (sin transición de tamaño) */
    @media (prefers-reduced-motion: reduce) {
      .mobile-nav, .mobile-nav button, .mobile-nav button span { transition: none !important; }
      .mobile-nav.nav-compact { left: 12px; right: 12px; }
    }

    /* Compartir sala (lobby Arena) */
    .arena-share-room { font-weight: 800; }

    /* Cuenta y privacidad */
    .privacy-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
    .privacy-title { font-size: .95rem; margin: 0 0 10px; }
    .privacy-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
    .privacy-link {
      text-align: left; background: none; border: 0; cursor: pointer; font: inherit;
      color: var(--ink); padding: 11px 4px; border-bottom: 1px dashed var(--line);
      transition: color .15s ease;
    }
    .privacy-link:hover { color: var(--green); }
    .privacy-delete {
      width: 100%; background: color-mix(in srgb, #C0564F 12%, var(--panel));
      color: #C0564F; border: 1px solid color-mix(in srgb, #C0564F 35%, var(--line));
      border-radius: 12px; padding: 11px; font: inherit; font-weight: 800; cursor: pointer;
    }
    .privacy-delete:hover { background: color-mix(in srgb, #C0564F 18%, var(--panel)); }
    .privacy-note { margin-top: 8px; opacity: .85; }

    /* Bottom-sheet legal */
    .legal-sheet { position: fixed; inset: 0; z-index: 82; }
    .legal-sheet[hidden] { display: none; }
    .legal-overlay { position: absolute; inset: 0; background: rgba(6,11,9,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s ease; }
    .legal-sheet.is-open .legal-overlay { opacity: 1; }
    .legal-card {
      position: absolute; left: 0; right: 0; bottom: 0;
      max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
      /* v3.2.8: fondo SÓLIDO (no transparente) para legibilidad real */
      background: var(--surface, var(--panel)); border-radius: 24px 24px 0 0;
      padding: 12px 22px calc(26px + env(safe-area-inset-bottom));
      transform: translateY(100%); transition: transform .28s cubic-bezier(.3,1.1,.4,1);
      box-shadow: 0 -24px 70px -28px rgba(0,0,0,.6);
      border-top: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
    }
    .legal-sheet.is-open .legal-card { transform: translateY(0); }
    .legal-handle { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 14px; }
    .legal-kicker {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
      color: var(--green-2, var(--green)); padding: 5px 12px; border-radius: 99px;
      background: color-mix(in srgb, var(--green) 14%, var(--panel)); margin-bottom: 8px;
    }
    .legal-card h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
    .legal-body { color: var(--ink); line-height: 1.62; margin-bottom: 16px; opacity: .92; }
    .legal-body p { margin: 0 0 12px; }
    .legal-callout {
      background: color-mix(in srgb, var(--gold) 16%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
      border-radius: 14px; padding: 12px 14px; font-weight: 600; color: var(--ink); opacity: 1;
    }
    .legal-card .btn { width: 100%; }
    @media (min-width: 720px) {
      .legal-card { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 60%); width: min(560px, 92vw); border-radius: 22px; max-height: 80vh; }
      .legal-sheet.is-open .legal-card { transform: translate(-50%, 50%); }
    }

    /* ============================================================
       v3.2.7 - Social/chat premium + Cuenta/IA polish
       ============================================================ */
    .soc-premium-hero {
      isolation: isolate;
      overflow: hidden;
      border-color: color-mix(in srgb, var(--green) 26%, var(--line));
      background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 86%, var(--green) 14%), var(--surface));
    }
    .soc-premium-hero::after {
      content: "";
      position: absolute;
      inset: auto 18px 0 auto;
      width: 150px;
      height: 150px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--green) 12%, transparent);
      filter: blur(34px);
      z-index: -1;
    }
    .soc-hero-copy { max-width: 620px; }
    .soc-kicker,
    .soc-section-tag,
    .chat-drawer-kicker {
      display: inline-flex;
      align-items: center;
      width: max-content;
      margin-bottom: 6px;
      color: var(--green-2);
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .soc-hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(78px, 1fr));
      gap: 8px;
      min-width: min(100%, 310px);
    }
    .soc-hero-metrics span {
      display: grid;
      gap: 2px;
      justify-items: center;
      padding: 12px 10px;
      border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 74%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }
    .soc-hero-metrics strong { font-size: 1.18rem; line-height: 1; color: var(--green-2); }
    .soc-hero-metrics em { font-style: normal; font-size: .68rem; color: var(--muted); font-weight: 800; text-align: center; }
    .soc-tabs {
      padding: 5px;
      border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      backdrop-filter: blur(16px);
    }
    .soc-tabs button {
      border: 0;
      background: transparent;
      min-height: 36px;
    }
    .soc-tabs button.active {
      background: linear-gradient(135deg, var(--green), var(--teal));
      box-shadow: 0 10px 20px color-mix(in srgb, var(--green) 24%, transparent);
    }
    .soc-social-panel { margin-top: 14px; }
    .soc-find-panel .panel-head { align-items: flex-end; }
    .soc-search-premium {
      margin-top: 12px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--surface) 86%, var(--green) 8%);
      border-color: color-mix(in srgb, var(--green) 24%, var(--line));
    }
    .soc-search-results:not(:empty) {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .soc-person-grid,
    .soc-chat-list {
      display: grid;
      gap: 10px;
    }
    .soc-person-card,
    .soc-thread-card,
    .chat-item-premium {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
      border-radius: 18px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--green) 5%, transparent), transparent 62%),
        color-mix(in srgb, var(--surface) 92%, transparent);
      color: var(--ink);
      box-shadow: 0 10px 24px rgba(23, 42, 34, .05);
    }
    .soc-person-card.is-muted { opacity: .82; }
    .soc-person-card .soc-avatar,
    .soc-thread-card .soc-avatar,
    .chat-item-premium .avatar-circle {
      width: 44px;
      height: 44px;
      box-shadow:
        inset 0 0 0 1.5px rgba(255,255,255,.24),
        0 8px 18px color-mix(in srgb, var(--green) 16%, transparent);
    }
    .soc-row-name { min-width: 0; }
    .soc-row-name strong {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-person-card.soc-friend .soc-row-name em {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .soc-icon-action {
      min-height: 36px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 900;
    }
    .soc-remove-link {
      color: var(--muted);
      font-size: .78rem;
    }
    .soc-friend-pts {
      display: grid;
      justify-items: center;
      min-width: 58px;
      padding: 7px 9px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--green) 10%, transparent);
      color: var(--green-2);
    }
    .soc-friend-pts strong { line-height: 1; font-size: 1rem; }
    .soc-friend-pts em { font-style: normal; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
    .soc-thread-card {
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .soc-thread-card:hover,
    .chat-item-premium:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--green) 38%, var(--line));
      box-shadow: 0 14px 28px color-mix(in srgb, var(--green) 12%, transparent);
    }
    .soc-thread-arrow {
      color: var(--green-2);
      font-size: .78rem;
      font-weight: 950;
      white-space: nowrap;
    }
    .soc-privacy {
      padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
      border-radius: 14px;
      background: color-mix(in srgb, var(--green) 5%, transparent);
    }
    .soc-chat-shell {
      overflow: hidden;
      padding: 0;
      min-height: min(74vh, 720px);
      background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--green) 8%, transparent), transparent 30%),
        var(--surface);
    }
    .soc-chat-head {
      position: sticky;
      top: 0;
      z-index: 2;
      padding: 14px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    }
    .soc-back-link {
      min-width: max-content;
      font-weight: 900;
    }
    .soc-chat-peer {
      justify-content: flex-start;
      min-width: 0;
      text-align: left;
    }
    .soc-chat-title {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.2;
    }
    .soc-chat-title strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-chat-title em {
      color: var(--muted);
      font-style: normal;
      font-size: .72rem;
      font-weight: 800;
    }
    .soc-chat-scroll {
      gap: 8px;
      padding: 18px 16px;
      max-height: none;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--green) 4%, transparent), transparent 140px);
      scroll-behavior: smooth;
    }
    .soc-msg-wrap {
      display: flex;
      width: 100%;
      animation: msgIn .18s ease both;
    }
    .soc-msg-wrap.is-mine { justify-content: flex-end; }
    .soc-msg {
      max-width: min(78%, 560px);
      padding: 10px 13px;
      border-radius: 18px 18px 18px 6px;
      background: color-mix(in srgb, var(--surface-soft) 88%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      box-shadow: 0 8px 18px rgba(20, 32, 27, .04);
    }
    .soc-msg.is-mine {
      border-radius: 18px 18px 6px 18px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--green) 24%, var(--surface)), color-mix(in srgb, var(--green) 12%, var(--surface)));
      border-color: color-mix(in srgb, var(--green) 38%, var(--line));
    }
    .soc-msg p { line-height: 1.42; overflow-wrap: anywhere; }
    .soc-msg .tiny { font-size: .68rem; font-weight: 800; }
    .soc-chat-day {
      align-self: center;
      margin: 6px auto;
      padding: 5px 11px;
      border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      border-radius: 999px;
      color: var(--muted);
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      font-size: .68rem;
      font-weight: 900;
      text-transform: capitalize;
    }
    .soc-chat-empty {
      margin: auto;
      align-self: center;
      display: grid;
      gap: 4px;
      justify-items: center;
      text-align: center;
      padding: 24px 18px;
      border: 1px dashed var(--line);
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
    }
    .soc-chat-form {
      position: sticky;
      bottom: 0;
      margin: 0;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(18px);
      border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    }
    .soc-chat-form input {
      min-height: 46px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--bg) 72%, var(--surface));
    }
    .soc-chat-form input:focus {
      outline: 0;
      border-color: var(--green);
      box-shadow: var(--focus);
    }
    .soc-send-btn {
      min-width: 92px;
      border-radius: 999px;
    }
    .soc-send-btn.is-sending {
      opacity: .78;
      pointer-events: none;
    }
    .soc-event {
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      margin-top: 8px;
    }
    .soc-event-icon {
      color: var(--green);
      font-size: .8rem;
      width: 18px;
      text-align: center;
    }
    .soc-event.is-new {
      border-color: color-mix(in srgb, var(--green) 34%, var(--line));
      background: color-mix(in srgb, var(--green) 9%, var(--surface));
    }
    .chat-drawer {
      width: min(94vw, 410px);
      background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 28%),
        color-mix(in srgb, var(--surface) 96%, transparent);
      backdrop-filter: blur(18px);
    }
    .chat-drawer-head {
      align-items: flex-start;
      gap: 14px;
      padding: 18px 18px 14px;
      background: color-mix(in srgb, var(--surface) 86%, transparent);
    }
    .chat-drawer-head h2 { margin: 0; font-size: 1.28rem; }
    .chat-drawer-head p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
    .chat-drawer-list { padding: 12px 12px calc(18px + env(safe-area-inset-bottom)); }
    .chat-item-premium {
      margin-bottom: 10px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    }
    .chat-item-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-item-meta {
      color: var(--muted);
      font-size: .66rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .chat-item-unread {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
    }
    .legal-overlay {
      background:
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--green) 18%, transparent), transparent 42%),
        rgba(7, 13, 10, .68);
      backdrop-filter: blur(7px);
    }
    .legal-card {
      border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line));
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 34%),
        var(--surface);
      box-shadow: 0 -26px 80px rgba(0,0,0,.28);
    }
    .legal-card h2 {
      margin: 0 0 10px;
      font-size: clamp(1.35rem, 5vw, 1.9rem);
    }
    .legal-body {
      color: var(--ink);
      font-size: .96rem;
      line-height: 1.68;
    }
    .legal-body p {
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    }
    html[data-theme="dark"] .soc-person-card,
    html[data-theme="dark"] .soc-thread-card,
    html[data-theme="dark"] .chat-item-premium,
    html[data-theme="dark"] .soc-event,
    html[data-theme="dark"] .legal-body p {
      background:
        linear-gradient(135deg, rgba(79,169,135,.08), transparent 64%),
        color-mix(in srgb, var(--surface) 86%, #000 14%);
      box-shadow: none;
    }
    html[data-theme="dark"] .legal-card,
    html[data-theme="dark"] .chat-drawer,
    html[data-theme="dark"] .soc-chat-shell {
      background:
        radial-gradient(circle at 12% 0%, rgba(79,169,135,.16), transparent 34%),
        color-mix(in srgb, var(--surface) 88%, #000 12%);
    }
    @keyframes msgIn {
      from { opacity: 0; transform: translateY(4px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (max-width: 760px) {
      .soc-hero-metrics { width: 100%; grid-template-columns: repeat(3, 1fr); }
      .soc-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
      }
      .soc-tabs::-webkit-scrollbar { display: none; }
      .soc-tabs button { flex: 0 0 auto; }
      .soc-person-card,
      .soc-thread-card,
      .chat-item-premium {
        border-radius: 16px;
      }
      .soc-person-card.soc-friend {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
      }
      .soc-person-card.soc-friend .soc-avatar { grid-column: 1; }
      .soc-person-card.soc-friend .soc-row-name { grid-column: 2; }
      .soc-person-card.soc-friend .soc-friend-pts {
        grid-column: 3;
      }
      /* Extra comfort on Descanso Médico / Social mobile */
      .challenge-card { padding: 14px 14px; }
      .soc-hero { padding: 18px 16px; }
        margin-left: 0;
      }
      .soc-person-card.soc-friend .soc-actions {
        grid-column: 1 / -1;
        width: 100%;
        padding-left: 0;
      }
      .soc-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 56px;
      }
      .soc-friend-pts { margin-left: auto; }
      /* v3.2.8: el chat es fullscreen fijo; sin margin negativo, sin wrap
         del header, sin padding extra por la barra (que ya está oculta). */
      .soc-chat-shell { min-height: 0; margin: 0; }
      .soc-chat-head { align-items: center; flex-wrap: nowrap; }
      .soc-chat-peer { order: 0; flex: 1; }
      .soc-chat-tools { order: 0; width: auto; justify-content: flex-end; }
      .soc-msg { max-width: 86%; }
      .chat-drawer {
        width: min(96vw, 430px);
        border-radius: 0 24px 24px 0;
      }
      .legal-card {
        max-height: 86dvh;
        padding-left: 18px;
        padding-right: 18px;
      }
    }
    @media (max-width: 430px) {
      .soc-hero-metrics span { padding: 10px 6px; }
      .soc-hero-metrics strong { font-size: 1rem; }
      .soc-hero-metrics em { font-size: .61rem; }
      .soc-person-card,
      .soc-thread-card,
      .chat-item-premium { gap: 10px; padding: 11px; }
      .soc-actions { padding-left: 0; }
      .soc-icon-action { flex: 1; }
      .soc-friend-pts { min-width: 50px; padding: 7px; }
      .chat-item-meta { display: none; }
      .chat-drawer-head h2 { font-size: 1.12rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .soc-msg-wrap,
      .soc-thread-card,
      .chat-item-premium { animation: none !important; transition: none !important; }
    }

    /* ═══════════════ v3.2.8 — Chat fullscreen tipo app ═══════════════
       La conversación deja de ser un "panel largo" dentro de la página y
       pasa a ser una CAPA FIJA a pantalla completa (header / mensajes /
       composer), por encima de la barra inferior (que se oculta). */
    .soc-chat-shell {
      position: fixed; inset: 0; z-index: 60;
      display: flex; flex-direction: column;
      height: 100vh; height: 100dvh;
      min-height: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--green) 8%, transparent), transparent 30%),
        var(--surface);
      animation: chatShellIn .22s ease both;
    }
    @keyframes chatShellIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    body.chat-thread-open .mobile-nav { display: none !important; }
    body.chat-thread-open { overflow: hidden; }

    .soc-chat-shell .soc-chat-head {
      position: static; flex: none;
      display: flex; align-items: center; gap: 10px;
      padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    }
    .soc-chat-back {
      flex: none; width: 38px; height: 38px; border-radius: 50%;
      display: grid; place-items: center; cursor: pointer;
      border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    }
    .soc-chat-back svg { width: 18px; height: 18px; }
    .soc-chat-shell .soc-chat-peer { flex: 1; min-width: 0; justify-content: flex-start; }
    .soc-chat-shell .soc-chat-peer .soc-avatar { width: 40px; height: 40px; font-size: .8rem; }
    .soc-chat-title strong { font-size: .98rem; }
    .soc-chat-handle-sm { color: var(--muted); font-style: normal; font-size: .68rem; font-weight: 700; }
    .soc-chat-meta { color: var(--green); font-style: normal; font-size: .72rem; font-weight: 800; }
    .soc-chat-meta.soc-chat-handle { color: var(--muted); }
    .soc-chat-tools { flex: none; gap: 6px; }
    .soc-chat-icon {
      width: 38px; height: 38px; border-radius: 50%; flex: none;
      border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 1.05rem;
    }
    .soc-chat-shell .soc-chat-scroll {
      flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain; max-height: none;
      display: flex; flex-direction: column; gap: 8px; padding: 16px 14px;
    }
    .soc-chat-day { position: relative; }
    .soc-msg-time { display: block; text-align: right; font-size: .62rem; font-weight: 700; opacity: .6; margin-top: 2px; }
    .soc-chat-shell .soc-chat-form {
      position: static; flex: none;
      display: flex; gap: 8px; align-items: center;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    }
    .soc-chat-shell .soc-chat-form input { flex: 1; min-height: 44px; }
    .soc-chat-shell .soc-send-btn {
      min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%;
      font-size: 1.2rem; font-weight: 800; flex: none;
    }
    .soc-chat-empty-ico { font-size: 2rem; }
    /* Pill "nuevo mensaje" flotante sobre el composer */
    .soc-newmsg-pill {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 3;
      border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .78rem;
      padding: 8px 16px; border-radius: 999px; color: #fff;
      background: var(--green); box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
      animation: pillIn .2s ease both;
    }
    @keyframes pillIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .soc-chat-shell, .soc-newmsg-pill { animation: none; }
      .soc-chat-shell .soc-chat-scroll { scroll-behavior: auto; }
    }

    /* El chat fixed necesita que NINGÚN ancestro tenga transform (crea
       containing block). Mientras el chat está abierto, neutralizamos la
       animación de entrada de vista en #app y contenedores. */
    body.chat-thread-open #app,
    body.chat-thread-open #app.view-enter,
    body.chat-thread-open #social-root {
      transform: none !important;
      animation: none !important;
    }

    /* Reportar pregunta: motivos categorizados */
    .report-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
    .report-reason { cursor: pointer; }
    .report-reason input { position: absolute; opacity: 0; pointer-events: none; }
    .report-reason span {
      display: inline-block; padding: 7px 12px; border-radius: 99px;
      border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
      font-size: .78rem; font-weight: 700; transition: border-color .15s ease, background .15s ease;
    }
    .report-reason input:checked + span { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--panel)); }

    /* Mi perfil: tablero de estadísticas reales */
    .prof-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
    .prof-stat {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 16px 8px; border-radius: 16px; border: 1px solid var(--line);
      background: var(--panel); text-align: center;
    }
    .prof-stat.is-accent { background: color-mix(in srgb, var(--green) 9%, var(--panel)); border-color: color-mix(in srgb, var(--green) 24%, var(--line)); }
    .prof-stat strong { font-size: 1.45rem; line-height: 1.1; }
    .prof-stat.is-accent strong { color: var(--green); }
    .prof-stat span { font-size: .68rem; color: var(--muted); font-weight: 700; }
    @media (max-width: 430px) { .prof-stat strong { font-size: 1.25rem; } }

    /* ═══════ v3.2.8 — Robustez móvil: casos clínicos largos y tablas ═══════
       Evita scroll horizontal, textos cortados y opciones fuera del card. */
    .quiz-question h2, .quiz-question p, .option span,
    .flash-q, .flash-a, .soc-msg p, .tutor-body p {
      overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
    }
    /* Tablas dentro de preguntas/explicaciones: scroll interno, no rompen */
    .quiz-question table, .tutor-body table, .flash-expl table {
      display: block; width: 100%; max-width: 100%;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      border-collapse: collapse; font-size: .86rem;
    }
    .quiz-question td, .quiz-question th { padding: 6px 10px; border: 1px solid var(--line); white-space: nowrap; }
    /* La opción mantiene su contenido dentro del botón */
    .option { align-items: flex-start; }
    .option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
    /* Imágenes en preguntas: nunca desbordan */
    .quiz-question img, .tutor-body img { max-width: 100%; height: auto; border-radius: 10px; }
    /* Chips de labs/valores adaptables */
    .lab-chip, .quiz-question code { white-space: normal; overflow-wrap: anywhere; }
    @media (max-width: 430px) {
      .quiz-shell, .flash-shell { overflow-x: hidden; }
    }

    /* ═══════════════ v3.2.9 — Chat más vivo + perfil público ═══════════════ */

    /* Header: estrella premium + botón ⋯ (peer ahora es <button>) */
    .soc-chat-peer { background: none; border: 0; text-align: inherit; cursor: pointer; color: inherit; }
    .soc-chat-peer:active { opacity: .7; }
    .soc-chat-premium { color: var(--gold); font-size: .8em; margin-left: 3px; vertical-align: middle; }
    .soc-chat-icon svg { width: 18px; height: 18px; }
    .soc-chat-icon { display: grid; place-items: center; color: var(--ink); }

    /* Send button: ahora es SVG; estado deshabilitado claro */
    .soc-send-btn svg { width: 20px; height: 20px; }
    .soc-send-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
    .soc-send-btn:not(:disabled):active { transform: scale(.9); }

    /* Burbujas optimistas: enviando / falló + reintento */
    .soc-msg-sending { opacity: .62; }
    .soc-msg-failed { border: 1px solid color-mix(in srgb, #e5484d 60%, var(--line)); }
    .soc-msg-retry {
      display: block; margin-top: 4px; border: 0; background: none; cursor: pointer;
      font: inherit; font-size: .64rem; font-weight: 800; color: #e5687d; text-align: right; width: 100%;
    }

    /* Botón "Saludar" en Actividad */
    .soc-event-chat {
      flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .95rem;
      border: 1px solid var(--line); background: var(--panel); margin-left: 6px;
    }
    .soc-event-chat:active { transform: scale(.92); }

    /* ── Hoja flotante: perfil público / opciones / reporte ───────────────── */
    .soc-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
    .soc-sheet-overlay {
      position: absolute; inset: 0; background: rgba(3, 10, 8, .58);
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease;
    }
    .soc-sheet.is-open .soc-sheet-overlay { opacity: 1; }
    .soc-sheet-card {
      position: relative; width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
      border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--green) 14%, transparent), transparent 46%),
        var(--surface);
      box-shadow: 0 -18px 50px -20px rgba(0,0,0,.7);
      transform: translateY(14px); opacity: .4; transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
    }
    .soc-sheet.is-open .soc-sheet-card { transform: none; opacity: 1; }
    .soc-sheet-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--line); margin: 2px auto 12px; }
    .soc-sheet-x {
      position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
      display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink);
    }
    .soc-sheet-x svg { width: 16px; height: 16px; }
    .soc-sheet-title { font-size: 1.05rem; margin: 0 0 4px; }

    /* Perfil público: hero + chips de stats + acciones */
    .soc-pp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 2px; }
    .soc-pp-avatar .soc-avatar { width: 84px; height: 84px; font-size: 1.6rem; box-shadow: 0 10px 26px -12px rgba(0,0,0,.6); }
    .soc-pp-name { font-size: 1.3rem; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
    .soc-pp-premium { font-size: .66rem; font-weight: 900; letter-spacing: .04em; color: #1b1205;
      background: linear-gradient(120deg, var(--gold), #ffe9a8); padding: 3px 9px; border-radius: 99px; }
    .soc-pp-role { font-size: .66rem; font-weight: 900; letter-spacing: .03em; padding: 3px 9px; border-radius: 99px; color: #fff; }
    .soc-pp-role.is-admin { background: linear-gradient(120deg, var(--green), #1f8f6a); }
    .soc-pp-role.is-mod { background: linear-gradient(120deg, #3b6fd4, #5a8ef0); }
    /* Badge de rol/premium reutilizable en Mi perfil */
    .role-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 900;
      letter-spacing: .03em; padding: 4px 10px; border-radius: 99px; color: #fff; }
    .role-badge.is-admin { background: linear-gradient(120deg, var(--green), #1f8f6a); }
    .role-badge.is-mod { background: linear-gradient(120deg, #3b6fd4, #5a8ef0); }
    .role-badge.is-premium { color: #1b1205; background: linear-gradient(120deg, var(--gold), #ffe9a8); }
    /* Chat header: el rango largo solo en pantallas anchas (móvil limpio) */
    .soc-chat-rank { color: var(--muted); }
    @media (max-width: 600px) { .soc-chat-rank { display: none; } }
    /* Nota de privacidad honesta en la bandeja de chat */
    .soc-privacy-note { color: var(--muted); margin: 14px 4px 2px; line-height: 1.5; }
    .soc-pp-handle { border: 0; background: none; cursor: pointer; color: var(--green); font-weight: 800; font-size: .9rem; padding: 2px 6px; }
    .soc-pp-handle:active { opacity: .6; }
    .soc-pp-rank { color: var(--muted); font-weight: 700; font-size: .82rem; }
    .soc-pp-fav { color: var(--ink); font-size: .82rem; margin: 6px 0 0; }
    .soc-pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 4px; }
    .soc-pp-chip {
      display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
      padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line);
      background: color-mix(in srgb, var(--green) 6%, var(--panel));
    }
    .soc-pp-chip strong { font-size: 1.1rem; line-height: 1.1; }
    .soc-pp-chip span { font-size: .62rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
    .soc-pp-empty { text-align: center; color: var(--muted); margin: 14px 0; }
    .soc-pp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
    .soc-pp-actions .btn, .soc-pp-actions .btn-secondary { width: 100%; }
    .soc-pp-danger { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
    .soc-pp-danger .text-link { font-size: .8rem; }
    .soc-remove-link { color: #e5687d; }

    /* Menú de opciones (filas) */
    .soc-actions-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
    .soc-actions-head .soc-avatar { width: 44px; height: 44px; }
    .soc-actions-head .tiny { color: var(--muted); }
    .soc-action-row {
      display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
      padding: 13px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink);
      font: inherit; font-size: .95rem; font-weight: 600;
    }
    .soc-action-row span { width: 22px; text-align: center; font-size: 1.05rem; }
    .soc-action-row:active { background: var(--panel); }
    .soc-action-row.is-danger { color: #e5687d; }
    .soc-action-sep { height: 1px; background: var(--line); margin: 6px 0; }
    .soc-action-cancel { width: 100%; margin-top: 10px; }

    @media (min-width: 680px) {
      .soc-sheet { align-items: center; }
      .soc-sheet-card { border-radius: 24px; border-bottom: 1px solid var(--line); max-height: 88dvh; }
    }
    @media (prefers-reduced-motion: reduce) {
      .soc-sheet-overlay, .soc-sheet-card { transition: none; }
    }

    /* ═══════════════ v3.3.0 — Sidebar agrupado + quiz seguro ═══════════════ */
    .nav-group-label {
      display: block; padding: 16px 14px 5px; font-size: .62rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: .09em; color: var(--muted); opacity: .65;
      user-select: none;
    }
    .nav-group-label:first-of-type { padding-top: 10px; }

    /* Quiz banco seguro: calificando en el servidor */
    .option.is-grading { opacity: .75; }
    .option.is-grading .letter { animation: gradePulse 1s ease-in-out infinite; }
    @keyframes gradePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
    .quiz-grading-note { color: var(--muted); font-weight: 700; margin-top: 8px; }
    @media (prefers-reduced-motion: reduce) { .option.is-grading .letter { animation: none; } }

    /* Arena: conecta con tus rivales desde el podio */
    .arena-connect { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
    .arena-connect > .tiny { color: var(--muted); margin-bottom: 8px; }
    .arena-connect-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .arena-add-friend:disabled { opacity: .55; cursor: default; }

    /* ═══════════════ v3.4 — Recompensas cosméticas + header chat ═══════════════
       Solo cosmético. Nombres con color/glow, marcos de avatar, títulos, tema. */

    /* Header de chat: más alto, foto más grande, sin amontonar */
    .soc-chat-shell .soc-chat-head { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 16px; gap: 12px; }
    .soc-chat-shell .soc-chat-peer { gap: 12px; align-items: center; }
    .soc-chat-shell .soc-chat-peer .soc-avatar { width: 56px; height: 56px; font-size: 1rem; }
    .soc-chat-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .soc-chat-name-row,
    .soc-chat-subline { min-width: 0; display: flex; align-items: center; gap: 7px; }
    .soc-chat-title strong { font-size: 1.06rem; line-height: 1.2; }
    .soc-chat-handle-sm { color: var(--muted); font-style: normal; font-size: .72rem; font-weight: 700; }
    .soc-chat-meta { color: var(--green); font-style: normal; font-size: .74rem; font-weight: 800; }
    .soc-chat-state { color: var(--green); font-size: .68rem; font-weight: 900; white-space: nowrap; }
    .soc-chat-streak-mobile { display: none !important; }
    .soc-chat-streak {
      flex: none; display: inline-flex; align-items: center; gap: 2px; font-weight: 900; font-size: .82rem;
      padding: 7px 11px; border-radius: 999px; color: #ff8a3d;
      background: color-mix(in srgb, #ff7a1a 16%, var(--panel)); border: 1px solid color-mix(in srgb, #ff7a1a 30%, var(--line));
    }

    @media (max-width: 520px) {
      .soc-chat-shell .soc-chat-head {
        min-height: calc(86px + env(safe-area-inset-top));
        padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
        align-items: center;
        gap: 10px;
      }
      .soc-chat-shell .soc-chat-peer {
        gap: 10px;
        min-width: 0;
      }
      .soc-chat-shell .soc-chat-peer .soc-avatar {
        width: 50px;
        height: 50px;
        font-size: .92rem;
      }
      .soc-chat-title {
        gap: 5px;
        min-width: 0;
      }
      .soc-chat-name-row strong {
        max-width: min(48vw, 220px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .soc-chat-subline {
        max-width: min(56vw, 250px);
        overflow: hidden;
        white-space: nowrap;
      }
      .soc-chat-wide-meta,
      .soc-chat-rank,
      .soc-chat-streak-desktop { display: none !important; }
      .soc-chat-streak-mobile {
        display: inline-flex !important;
        padding: 3px 8px;
        font-size: .68rem;
      }
      .soc-chat-state {
        font-size: .66rem;
      }
      .soc-chat-back,
      .soc-chat-icon {
        width: 40px;
        height: 40px;
      }
      .soc-chat-tools {
        width: auto;
        flex: none;
      }
    }

    @media (max-width: 390px) {
      .soc-chat-shell .soc-chat-head { gap: 8px; padding-left: 10px; padding-right: 10px; }
      .soc-chat-shell .soc-chat-peer .soc-avatar { width: 46px; height: 46px; }
      .soc-chat-name-row strong { max-width: 43vw; font-size: .98rem; }
      .soc-chat-subline { max-width: 50vw; gap: 5px; }
      .soc-chat-state { display: none; }
    }

    /* ── Nombres (color/gradiente/glow) ──────────────────────────────────── */
    .rw-name-jade { color: #57d6a3 !important; }
    .rw-name-azul { color: #5aa9f0 !important; }
    .rw-name-oro {
      background: linear-gradient(100deg, #ffd36b, #ffb43d); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: #ffc24d;
    }
    .rw-name-bisturi {
      background: linear-gradient(100deg, #e6edf2, #9fb2bf); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: #cdd8df;
    }
    .rw-name-aurora {
      background: linear-gradient(100deg, #6ef0c0, #5ad1ff); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: #6ef0c0;
      filter: drop-shadow(0 0 6px rgba(94, 209, 255, .35));
    }
    .rw-name-vital { color: #5ff0b0 !important; text-shadow: 0 0 8px rgba(95, 240, 176, .45); animation: rwVital 2.4s ease-in-out infinite; }
    @keyframes rwVital { 0%,100% { text-shadow: 0 0 6px rgba(95,240,176,.35); } 50% { text-shadow: 0 0 14px rgba(95,240,176,.7); } }
    .rw-name-leyenda {
      background: linear-gradient(100deg, #7dffc0, #ffd36b); -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: #9dffce;
      filter: drop-shadow(0 0 8px rgba(125, 255, 192, .55)); animation: rwGlow 3s ease-in-out infinite;
    }
    .rw-name-leyenda-x {
      background: linear-gradient(100deg, #8affd0, #62d0ff, #c79bff); background-size: 200% 100%;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #8affd0;
      filter: drop-shadow(0 0 9px rgba(125, 200, 255, .6)); animation: rwAurora 5s ease-in-out infinite;
    }
    @keyframes rwGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(125,255,192,.4)); } 50% { filter: drop-shadow(0 0 14px rgba(255,211,107,.7)); } }
    @keyframes rwAurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

    /* ── Marcos de avatar (anillos) — aplican a cualquier avatar redondo ─── */
    .rw-frame-line { box-shadow: 0 0 0 2px var(--line); }
    .rw-frame-jade { box-shadow: 0 0 0 2px var(--green); }
    .rw-frame-pulse { box-shadow: 0 0 0 2px var(--green); animation: rwPulse 2s ease-in-out infinite; }
    @keyframes rwPulse { 0%,100% { box-shadow: 0 0 0 2px var(--green), 0 0 0 0 rgba(45,122,95,.5); } 50% { box-shadow: 0 0 0 2px var(--green), 0 0 0 7px rgba(45,122,95,0); } }
    .rw-frame-oro { box-shadow: 0 0 0 2px #ffc24d, 0 0 10px -2px rgba(255,194,77,.5); }
    .rw-frame-leyenda { box-shadow: 0 0 0 2px #7dffc0, 0 0 16px -2px rgba(125,255,192,.7); animation: rwAura 3s ease-in-out infinite; }
    @keyframes rwAura { 0%,100% { box-shadow: 0 0 0 2px #7dffc0, 0 0 10px -2px rgba(125,255,192,.5); } 50% { box-shadow: 0 0 0 2px #ffd36b, 0 0 20px -2px rgba(255,211,107,.7); } }

    /* Título equipable */
    .rw-title { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: var(--muted);
      background: color-mix(in srgb, var(--green) 10%, var(--panel)); border: 1px solid var(--line);
      padding: 2px 9px; border-radius: 999px; }

    @media (prefers-reduced-motion: reduce) {
      .rw-name-vital, .rw-name-leyenda, .rw-name-leyenda-x, .rw-frame-pulse, .rw-frame-leyenda { animation: none; }
    }

    /* ── Tema desbloqueable: Quirófano (verde-teal profundo) ─────────────── */
    html[data-rwtheme="quirofano"][data-theme="dark"] {
      --bg: #08110f; --surface: #0c1a17; --panel: #102420; --line: #1c3a32;
      --green: #2fae84; --gold: #e9c067;
    }

    html[data-rwtheme="palacio-ecg"][data-theme="dark"] {
      --bg: #07100e; --surface: #0b1715; --panel: #101f1c; --line: #24423a;
      --green: #5ed6a8; --teal: #3da7a8; --gold: #d8b46a;
    }
    html[data-rwtheme="palacio-ecg"][data-theme="dark"] body {
      background:
        linear-gradient(120deg, rgba(94, 214, 168, .10), transparent 32%, rgba(216, 180, 106, .08) 70%, transparent),
        repeating-linear-gradient(90deg, rgba(94, 214, 168, .045) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 46px),
        #07100e;
    }
    html[data-rwtheme="palacio-ecg"][data-theme="dark"] .profile-hero,
    html[data-rwtheme="palacio-ecg"][data-theme="dark"] .locker-preview-card,
    html[data-rwtheme="palacio-ecg"][data-theme="dark"] .soc-chat-shell {
      background-image:
        linear-gradient(135deg, rgba(94, 214, 168, .10), transparent 42%),
        linear-gradient(90deg, transparent 0 10%, rgba(94, 214, 168, .18) 10.4%, transparent 10.8%, transparent 18%, rgba(216, 180, 106, .16) 18.4%, transparent 18.8%, transparent 100%);
      background-size: auto, 260px 100%;
    }

    html[data-rwtheme="neuro-aurora"][data-theme="dark"] {
      --bg: #070f10; --surface: #0a1718; --panel: #102023; --line: #254048;
      --green: #62e0b5; --teal: #5ad1ff; --gold: #d9c170;
    }
    html[data-rwtheme="neuro-aurora"][data-theme="dark"] body {
      background:
        linear-gradient(115deg, rgba(98, 224, 181, .12), transparent 34%, rgba(90, 209, 255, .09) 72%, transparent),
        repeating-linear-gradient(135deg, rgba(98, 224, 181, .04) 0 1px, transparent 1px 34px),
        #070f10;
    }
    html[data-rwtheme="neuro-aurora"][data-theme="dark"] .profile-hero,
    html[data-rwtheme="neuro-aurora"][data-theme="dark"] .locker-preview-card,
    html[data-rwtheme="neuro-aurora"][data-theme="dark"] .soc-chat-shell {
      background-image:
        linear-gradient(135deg, rgba(98, 224, 181, .12), transparent 42%),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(90, 209, 255, .07) 18px 19px, transparent 19px 42px);
    }

    /* ── Pantalla Locker (Mi estilo) ─────────────────────────────────────── */
    .locker-hero { display: flex; align-items: center; gap: 16px; }
    .locker-hero .locker-avatar { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
      background: var(--panel); border: 1px solid var(--line); }
    .locker-hero .locker-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .locker-xp-bar { height: 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-top: 8px; }
    .locker-xp-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); }
    .locker-cat { margin-top: 18px; }
    .locker-cat h3 { font-size: .95rem; margin: 0 0 10px; }
    .locker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .locker-item { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; background: var(--panel);
      display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; transition: border-color .15s ease; color: var(--ink); font: inherit; }
    .locker-item.is-equipped { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
    .locker-item.is-locked { opacity: .55; cursor: default; }
    .locker-item-preview { font-weight: 900; font-size: 1.05rem; min-height: 24px; }
    .locker-item-label { font-weight: 800; font-size: .82rem; }
    .locker-item-note { font-size: .68rem; color: var(--muted); }
    .locker-item-tag { position: absolute; top: 8px; right: 8px; font-size: .58rem; font-weight: 900; padding: 2px 7px; border-radius: 99px;
      background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
    .locker-item-tag.is-premium { color: #1b1205; background: linear-gradient(120deg, var(--gold), #ffe9a8); border: 0; }
    .locker-item.is-equipped .locker-item-tag { color: #fff; background: var(--green); border: 0; }
    .locker-preview-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background:
      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 50%), var(--panel); }
    .locker-preview-row { display: flex; align-items: center; gap: 12px; }
    .locker-preview-row .soc-avatar { width: 48px; height: 48px; font-size: .85rem; }
    .locker-preview-name { font-weight: 900; font-size: 1.15rem; }

    /* Modal de desbloqueo */
    .reward-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
    .reward-modal-overlay { position: absolute; inset: 0; background: rgba(3,10,8,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    .reward-modal-card { position: relative; width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 24px; padding: 24px;
      text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--green) 18%, transparent), transparent 55%), var(--surface);
      box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); animation: rewardIn .25s ease both; }
    @keyframes rewardIn { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
    .reward-modal-card h2 { margin: 6px 0 4px; }
    .reward-modal-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
    .reward-modal-list .locker-item { cursor: default; }

    /* ═══════════ v3.4.1 — Nav: sidebar-profile clickable + bottom nav glass ═══ */
    .sidebar-profile {
      width: 100%; border: 0; border-top: 1px solid var(--line); background: none;
      color: inherit; font: inherit; text-align: left; cursor: pointer;
      border-radius: 0; transition: background .15s ease;
    }
    .sidebar-profile:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
    .sidebar-profile:active { opacity: .8; }

    @media (max-width: 1180px) {
      /* Liquid glass: más transparente + blur, transición suave y continua */
      .mobile-nav {
        background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
        -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
        border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
        transition: padding .38s cubic-bezier(.22,.61,.36,1), background .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
      }
      html[data-theme="dark"] .mobile-nav { background: color-mix(in srgb, var(--surface) 64%, transparent) !important; }
      .mobile-nav button { transition: color .25s ease, transform .28s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
      .mobile-nav button svg { transition: width .32s cubic-bezier(.22,.61,.36,1), height .32s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }
      .mobile-nav span:not(.social-badge) { transition: opacity .3s ease, max-height .32s ease; }
    }
    @media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
      .mobile-nav, .mobile-nav button, .mobile-nav button svg, .mobile-nav span:not(.social-badge) { transition: none !important; }
    }

    /* ── Quiz: filtros avanzados por tema (Premium) ───────────────────────── */
    .quiz-advanced { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: color-mix(in srgb, var(--green) 4%, var(--surface)); overflow: hidden; }
    .quiz-advanced > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 700; color: var(--ink); }
    .quiz-advanced > summary::-webkit-details-marker { display: none; }
    .quiz-advanced .qa-sum-left { display: flex; align-items: center; gap: 8px; }
    .quiz-advanced .qa-active { font-size: .76rem; font-weight: 700; color: var(--green-2); background: color-mix(in srgb, var(--green) 14%, var(--surface)); padding: 2px 9px; border-radius: 999px; }
    .chip.premium-mini, .premium-mini { font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #6a4710; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, #fff), color-mix(in srgb, var(--gold) 12%, #fff)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: 2px 8px; border-radius: 999px; }
    .quiz-advanced-body { padding: 4px 14px 16px; border-top: 1px solid var(--line); }
    .qa-label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
    .qa-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); margin-bottom: 10px; }
    .topic-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; padding: 2px; }
    .topic-chip { font-size: .8rem; font-weight: 600; line-height: 1.1; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
    .topic-chip:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
    .topic-chip:active { transform: scale(.97); }
    .topic-chip.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 30%, transparent); }
    .qa-grid { margin-top: 14px; }
    .qa-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
    .qa-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; }
    .qa-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
    .qa-clear { margin-left: auto; font-weight: 700; }
    .qa-note { margin: 10px 2px 0; color: var(--muted); opacity: .9; }
    .topic-search-empty { margin: 8px 2px 0; color: var(--muted); font-weight: 600; }
    .qa-sel-count { font-size: .72rem; font-weight: 800; color: var(--green-2); background: color-mix(in srgb, var(--green) 14%, var(--surface)); padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
    .topic-chip.mini-chip { font-size: .78rem; padding: 6px 10px; }
    .topic-chip.sub-chip { font-weight: 600; opacity: .95; }
    .qa-label { margin-top: 14px; display: flex; align-items: center; }

    /* ── Onboarding de Hábitos ────────────────────────────────────────────── */
    .hob-panel { max-width: 620px; margin: 0 auto; padding: 22px 20px 24px; }
    .hob-panel h2 { margin: 12px 0 6px; }
    .hob-prog { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); overflow: hidden; margin-bottom: 14px; }
    .hob-prog > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--teal, var(--green-2))); border-radius: inherit; transition: width .3s ease; }
    .hob-opts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
    .hob-opt { padding: 11px 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
    .hob-opt:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
    .hob-opt:active { transform: scale(.97); }
    .hob-opt.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 30%, transparent); }
    .hob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
    .hob-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; margin-top: 14px; }
    .hob-rec { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green) 5%, var(--surface)); font-weight: 600; }
    .hob-rec-ic { font-size: 1.15rem; }
    .hob-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
    .hob-back { margin-top: 12px; display: inline-block; }

    /* Upsell premium para usuarios free */
    .quiz-advanced-upsell { position: relative; margin-top: 14px; padding: 16px 16px 18px; border-radius: var(--radius, 14px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), color-mix(in srgb, var(--green) 6%, var(--surface))); }
    .quiz-advanced-upsell .qau-glow { position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); filter: blur(6px); pointer-events: none; }
    .quiz-advanced-upsell .qau-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .quiz-advanced-upsell h3 { margin: 0; font-size: 1.06rem; color: var(--ink); }
    .qau-badge { font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #6a4710; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 34%, #fff), color-mix(in srgb, var(--gold) 14%, #fff)); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); padding: 3px 10px; border-radius: 999px; }
    .quiz-advanced-upsell p { margin: 9px 0 13px; color: var(--muted); font-size: .9rem; line-height: 1.5; position: relative; }
    .quiz-advanced-upsell p strong { color: var(--ink); font-weight: 700; }
    .qau-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
    .qau-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip.ghost { font-size: .72rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px dashed var(--line); padding: 3px 9px; border-radius: 999px; opacity: .85; }
    html[data-theme="dark"] .topic-chip.on { color: #fff; }
    html[data-theme="dark"] .qau-badge, html[data-theme="dark"] .premium-mini { color: #ffe7c2; }

    /* ── Mi perfil: pestañas ──────────────────────────────────────────────── */
    .profile-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 5px; margin-bottom: 14px; background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; box-shadow: 0 4px 14px rgba(23, 42, 34, .04); }
    .profile-tabs::-webkit-scrollbar { display: none; }
    .profile-tab { flex: 0 0 auto; min-height: 42px; padding: 10px 16px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: .91rem; cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; scroll-snap-align: start; }
    .profile-tab:hover { color: var(--ink); }
    .profile-tab.on { background: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 28%, transparent); }

    /* Recompensas (solo lectura) */
    .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
    .reward-item { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
    .reward-item.is-off { opacity: .62; }
    .reward-item.is-on { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
    .reward-item-main { display: flex; align-items: center; gap: 7px; }
    .reward-item-note { font-size: .76rem; font-weight: 700; color: var(--muted); }
    .reward-item.is-on .reward-item-note { color: var(--green-2); }
    .reward-item-desc { color: var(--muted); }

    /* ── Sidebar: scroll interno elegante en pantallas bajas ──────────────── */
    .sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-right: 2px; }
    .sidebar > .nav::-webkit-scrollbar { width: 6px; }
    .sidebar > .nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; }
    .sidebar-profile, .sidebar-note { flex: 0 0 auto; }

    /* ── Sidebar acordeón (menú corto: 8 botones, sub-items dentro) ───────── */
    .nav-acc { display: grid; gap: 4px; }
    .nav-acc-toggle { display: flex !important; align-items: center; gap: 9px; width: 100%; }
    .nav-acc-toggle > span { flex: 1; }
    .nav-acc-chev { width: 16px; height: 16px; margin-left: auto; opacity: .55; transition: transform .22s ease; flex: 0 0 auto; }
    .nav-acc.open .nav-acc-chev { transform: rotate(180deg); }
    .nav-acc.child-active > .nav-acc-toggle { color: var(--ink); }
    .nav-acc.child-active > .nav-acc-toggle i { color: #fff; background: var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
    .nav-acc-panel { display: grid; gap: 2px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .18s ease, margin-top .2s ease; }
    .nav-acc.open .nav-acc-panel { max-height: 340px; opacity: 1; margin-top: 2px; }
    button.nav-sub { min-height: 38px !important; grid-template-columns: 1fr !important; display: block !important; padding: 8px 10px 8px 44px !important; font-weight: 700 !important; font-size: .9rem; position: relative; color: var(--muted); }
    button.nav-sub::before { content: ""; position: absolute; left: 22px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--line); transform: translateY(-50%); transition: background .15s ease; }
    button.nav-sub.active { color: var(--ink); background: #e4f5ed; }
    button.nav-sub.active::before { background: var(--green); }
    html[data-theme="dark"] button.nav-sub.active { background: color-mix(in srgb, var(--green) 18%, transparent); }

    /* ── Quiz menos saturado ──────────────────────────────────────────────── */
    .quiz-setup { max-width: 760px; margin: 0 auto; }
    .quiz-panel { padding: 20px 20px 22px; }
    .quiz-head h2 { margin: 0 0 2px; }
    .quiz-head p { margin: 0; }
    .quiz-count-chip { white-space: nowrap; }
    .form-grid.quiz-basic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; margin-top: 14px; }
    .form-grid.quiz-basic .field { display: flex; flex-direction: column; gap: 5px; }
    .form-grid.quiz-basic label { font-size: .82rem; font-weight: 700; color: var(--muted); }
    .quiz-start-row { margin-top: 16px; }
    .btn-start-quiz { width: 100%; justify-content: center; font-size: 1.02rem; padding: 13px 18px; }
    .quiz-modes-acc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
    .quiz-modes-acc > summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .9rem; list-style: none; }
    .quiz-modes-acc > summary::-webkit-details-marker { display: none; }
    .quiz-modes-acc > summary::before { content: "▸ "; }
    .quiz-modes-acc[open] > summary::before { content: "▾ "; }
    .quiz-modes-acc .quick-modes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
    @media (max-width: 560px) { .form-grid.quiz-basic { grid-template-columns: 1fr; } }

    /* ============================================================
       v3.5.3 - UX premium: sidebar, Descanso Medico, chat, perfil
       ============================================================ */
    .sidebar {
      padding: 18px 14px 14px;
      gap: 14px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-soft) 78%, var(--surface))),
        var(--surface);
      box-shadow: 12px 0 36px rgba(19, 32, 27, .05);
    }
    .brand {
      min-height: 50px;
      padding: 2px 6px 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 12px 28px color-mix(in srgb, var(--green) 18%, transparent);
    }
    .sidebar > .nav {
      gap: 5px;
      padding: 2px 4px 8px 0;
      mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }
    .nav button {
      min-height: 44px;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 10px;
      padding: 6px 9px;
      border-radius: 14px;
      border: 1px solid transparent;
      transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }
    .nav i {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--ink) 5%, var(--surface-soft));
      color: var(--green-2);
    }
    .nav i svg { width: 17px; height: 17px; }
    .nav button:hover,
    .nav button:focus-visible {
      transform: translateX(1px);
      background: color-mix(in srgb, var(--green) 8%, var(--surface));
      border-color: color-mix(in srgb, var(--green) 18%, transparent);
      box-shadow: none;
    }
    .nav button.active,
    .nav-acc.child-active > .nav-acc-toggle {
      background: linear-gradient(135deg, color-mix(in srgb, var(--green) 14%, var(--surface)), color-mix(in srgb, var(--teal) 8%, var(--surface)));
      border-color: color-mix(in srgb, var(--green) 28%, var(--line));
      color: var(--ink);
    }
    .nav button.active i,
    .nav-acc.child-active > .nav-acc-toggle i {
      color: #fff;
      background: linear-gradient(135deg, var(--green), var(--teal));
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 8px 18px color-mix(in srgb, var(--green) 20%, transparent);
    }
    .nav-acc { gap: 3px; }
    .nav-acc-toggle { gap: 10px; }
    .nav-acc-panel {
      margin-left: 15px;
      padding-left: 12px;
      border-left: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
    }
    .nav-acc.open .nav-acc-panel {
      margin-top: 4px;
      margin-bottom: 4px;
    }
    button.nav-sub {
      min-height: 34px !important;
      padding: 7px 10px 7px 18px !important;
      border-radius: 12px !important;
      font-size: .84rem;
    }
    button.nav-sub::before {
      left: 6px;
      width: 4px;
      height: 4px;
    }
    .sidebar-profile {
      margin-top: 2px;
      padding: 12px 8px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
    }
    .sidebar-note {
      margin: -4px 4px 0;
      padding: 0;
      font-size: .74rem;
      line-height: 1.35;
    }

    .soc-hero-v353 {
      padding: clamp(16px, 3vw, 22px);
      border-radius: 18px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--green) 12%, var(--surface)), color-mix(in srgb, var(--blue) 5%, var(--surface)) 56%, color-mix(in srgb, var(--gold) 7%, var(--surface))),
        var(--surface);
    }
    .soc-hero-v353 .soc-hero-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 330px) auto;
      align-items: center;
      gap: 16px;
    }
    .soc-hero-v353 h2 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); }
    .soc-hero-v353 p {
      max-width: 660px;
      margin-bottom: 0;
    }
    .soc-hero-actions {
      display: flex;
      justify-content: flex-end;
    }
    .soc-hero-cta { min-width: 122px; }
    .soc-hero-v353 .soc-tabs {
      margin-top: 16px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 72%, transparent);
    }
    .soc-hero-v353 .soc-tabs button {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 13px;
      font-size: .86rem;
    }
    .soc-retos-board,
    .soc-retos-panel {
      margin-top: 14px;
      border-radius: 18px;
    }
    .soc-board-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 14px;
    }
    .soc-board-head p {
      margin: 4px 0 0;
      color: var(--muted);
    }
    .soc-board-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .soc-board-grid span {
      min-height: 74px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
      background: color-mix(in srgb, var(--green) 5%, var(--surface));
    }
    .soc-board-grid strong {
      font-size: 1.45rem;
      color: var(--green-2);
      line-height: 1;
    }
    .soc-board-grid em {
      font-style: normal;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .soc-recommended {
      margin-top: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 14px;
      align-items: center;
      padding: 13px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
      background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), color-mix(in srgb, var(--green) 5%, var(--surface)));
    }
    .soc-recommended .soc-section-tag {
      grid-column: 1 / -1;
      margin: 0;
    }
    .soc-recommended p {
      margin: 0;
      color: var(--muted);
      font-size: .86rem;
    }
    .soc-challenge-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .soc-challenge-premium {
      margin-top: 0;
      padding: 15px;
      border-radius: 18px;
      background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--green) 8%), var(--surface));
      box-shadow: 0 14px 32px rgba(20, 38, 31, .07);
    }
    .soc-ch-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .soc-ch-name {
      margin: 0;
      font-size: 1.02rem;
    }
    .soc-ch-state {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 700;
      line-height: 1.35;
    }
    .soc-ch-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .soc-ch-progress {
      height: 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--ink) 7%, var(--surface));
      overflow: hidden;
      margin: 12px 0 10px;
    }
    .soc-ch-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--gold));
    }
    .soc-members { gap: 7px; }
    .soc-member {
      grid-template-columns: 34px minmax(0, 1fr) auto;
      padding: 9px 10px;
      border-radius: 14px;
    }
    .soc-member .soc-avatar {
      width: 34px;
      height: 34px;
      font-size: .68rem;
    }
    .soc-member-main {
      min-width: 0;
      display: grid;
      gap: 6px;
    }
    .soc-member-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-member-name em {
      font-style: normal;
      color: var(--muted);
      font-weight: 800;
    }
    .soc-day {
      width: 10px;
      height: 10px;
      border-radius: 999px;
    }
    .soc-ch-actions .btn,
    .soc-ch-actions .btn-secondary { min-height: 38px; }

    .soc-chat-shell { border-radius: 20px; }
    .soc-chat-shell .soc-chat-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
      gap: 14px;
      min-height: calc(88px + env(safe-area-inset-top));
    }
    .soc-chat-back,
    .soc-chat-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
    }
    .soc-chat-shell .soc-chat-peer {
      justify-content: flex-start;
      min-width: 0;
      padding: 0;
    }
    .soc-chat-shell .soc-chat-peer .soc-avatar {
      width: 54px;
      height: 54px;
      flex: 0 0 auto;
    }
    .soc-chat-title { gap: 4px; }
    .soc-chat-name-row strong {
      max-width: min(34vw, 360px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-chat-subline {
      flex-wrap: wrap;
      row-gap: 4px;
    }
    .soc-chat-sep {
      color: var(--muted);
      font-weight: 900;
      line-height: 1;
    }
    .soc-chat-tools { margin-left: 0; }
    .soc-chat-shell .soc-chat-form {
      gap: 10px;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    .soc-chat-shell .soc-send-btn {
      width: 48px;
      min-width: 48px;
      padding: 0;
    }

    .profile-tabs {
      position: sticky;
      top: 0;
      z-index: 3;
      padding: 6px;
      gap: 6px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
    .profile-tab {
      border-radius: 13px;
      padding: 10px 14px;
      font-weight: 850;
    }
    .profile-tab.on { background: linear-gradient(135deg, var(--green), var(--teal)); }

    .premium-welcome-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }
    .premium-welcome-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .premium-welcome-overlay {
      position: absolute;
      inset: 0;
      background: rgba(5, 12, 10, .68);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    .premium-welcome-card {
      position: relative;
      width: min(100%, 500px);
      border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
      border-radius: 24px;
      padding: 26px;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 36%),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--green) 18%, transparent), transparent 34%),
        color-mix(in srgb, var(--surface) 96%, transparent);
      box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
      transform: translateY(12px) scale(.98);
      transition: transform .22s ease;
    }
    .premium-welcome-modal.is-open .premium-welcome-card { transform: none; }
    .premium-welcome-mark {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: #3b2908;
      background: linear-gradient(135deg, var(--gold), #ffe2a1);
      box-shadow: 0 14px 28px color-mix(in srgb, var(--gold) 25%, transparent);
      font-size: 1.35rem;
      font-weight: 950;
    }
    .premium-welcome-kicker {
      margin: 16px 0 6px;
      color: var(--green-2);
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .premium-welcome-card h2 {
      font-size: clamp(1.55rem, 4vw, 2.15rem);
      margin: 0;
    }
    .premium-welcome-copy,
    .premium-welcome-thanks {
      color: var(--muted);
      margin: 12px 0 0;
    }
    .premium-welcome-list {
      display: grid;
      gap: 8px;
      margin: 18px 0;
    }
    .premium-welcome-list span {
      position: relative;
      padding: 10px 12px 10px 36px;
      border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
      border-radius: 14px;
      background: color-mix(in srgb, var(--green) 5%, var(--surface));
      font-weight: 750;
      line-height: 1.35;
    }
    .premium-welcome-list span::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      transform: translateY(-50%);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 12%, transparent);
    }
    .premium-welcome-btn {
      width: 100%;
      margin-top: 18px;
      min-height: 46px;
    }

    @media (max-width: 900px) {
      .soc-hero-v353 .soc-hero-row { grid-template-columns: 1fr; }
      .soc-hero-actions { justify-content: stretch; }
      .soc-hero-actions .btn,
      .soc-hero-actions .btn-secondary { width: 100%; }
    }
    @media (max-width: 760px) {
      .sidebar { padding: calc(12px + env(safe-area-inset-top)) 12px calc(78px + env(safe-area-inset-bottom)); }
      .brand { padding: 4px 6px 12px; }
      .sidebar > .nav { mask-image: none; }
      .soc-board-head,
      .soc-ch-top {
        flex-direction: column;
        align-items: stretch;
      }
      .soc-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .soc-recommended { grid-template-columns: 1fr; }
      .soc-recommended .btn-secondary { width: 100%; }
      .soc-challenge-list { grid-template-columns: 1fr; }
      .soc-member { grid-template-columns: 34px minmax(0, 1fr) auto; }
      .soc-chat-shell { border-radius: 0; }
      .soc-chat-shell .soc-chat-head {
        min-height: calc(96px + env(safe-area-inset-top));
        padding: calc(14px + env(safe-area-inset-top)) 12px 14px;
        gap: 10px;
      }
      .soc-chat-shell .soc-chat-peer .soc-avatar {
        width: 50px;
        height: 50px;
      }
      .soc-chat-name-row strong { max-width: 52vw; }
      .soc-chat-subline {
        max-width: 58vw;
        white-space: normal;
      }
      .soc-chat-shell .soc-chat-scroll { padding: 16px 12px; }
      .profile-tabs {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
      }
      .profile-tab {
        min-width: 0;
        padding: 10px 6px;
        text-align: center;
        font-size: .78rem;
      }
      .premium-welcome-card {
        padding: 22px 18px;
        border-radius: 22px;
      }
    }
    @media (max-width: 430px) {
      .soc-hero-v353 { padding: 15px; }
      .soc-hero-v353 .soc-hero-metrics {
        grid-template-columns: repeat(3, 1fr);
        min-width: 0;
      }
      .soc-board-grid span { padding: 10px 7px; }
      .soc-board-grid strong { font-size: 1.2rem; }
      .soc-board-grid em { font-size: .62rem; }
      .soc-ch-badges { justify-content: flex-start; }
      .soc-chat-back,
      .soc-chat-icon {
        width: 40px;
        height: 40px;
      }
      .soc-chat-shell .soc-chat-peer .soc-avatar {
        width: 46px;
        height: 46px;
      }
      .soc-chat-name-row strong { max-width: 46vw; }
      .premium-welcome-list span { padding-right: 10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .premium-welcome-modal,
      .premium-welcome-card,
      .nav button,
      .soc-thread-card,
      .chat-item-premium {
        transition: none !important;
      }
    }

    /* ============================================================
       v3.5.4 - Chat polish final
       ============================================================ */
    .soc-chat-shell {
      display: flex;
      flex-direction: column;
      min-height: min(78vh, 760px);
      border-radius: 22px;
    }
    .soc-chat-shell .soc-chat-head {
      position: sticky;
      top: 0;
      z-index: 6;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: start;
      gap: 14px;
      min-height: 0;
      padding: calc(16px + env(safe-area-inset-top)) 16px 14px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
      border-bottom: 1px solid color-mix(in srgb, var(--green) 14%, var(--line));
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    .soc-chat-back,
    .soc-chat-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
      background: color-mix(in srgb, var(--surface) 84%, transparent);
      color: var(--ink);
      box-shadow: none;
    }
    .soc-chat-shell .soc-chat-peer {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 0;
    }
    .soc-chat-shell .soc-chat-peer .soc-avatar {
      width: 54px;
      height: 54px;
      flex: 0 0 auto;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 16%, transparent);
    }
    .soc-chat-title {
      display: grid;
      align-content: center;
      gap: 6px;
      min-width: 0;
    }
    .soc-chat-name-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }
    .soc-chat-name-row strong {
      max-width: min(100%, 34rem);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 1.08rem;
      line-height: 1.2;
    }
    .soc-chat-premium {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
      background: color-mix(in srgb, var(--gold) 10%, transparent);
      color: var(--gold);
      font-size: .7rem;
      font-weight: 900;
      line-height: 1;
      vertical-align: middle;
    }
    .soc-chat-subline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      row-gap: 4px;
      min-width: 0;
    }
    .soc-chat-handle-sm {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .soc-chat-sep {
      color: color-mix(in srgb, var(--muted) 82%, transparent);
      font-size: .75rem;
      font-weight: 900;
      line-height: 1;
    }
    .soc-chat-state {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
      background: color-mix(in srgb, var(--green) 8%, transparent);
      color: var(--green-2);
      font-size: .67rem;
      font-weight: 900;
      white-space: nowrap;
    }
    .soc-chat-wide-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }
    .soc-chat-meta-pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
      background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
      color: var(--muted);
      font-size: .66rem;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }
    .soc-chat-meta-pill.is-admin {
      color: #e8c885;
      border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
      background: color-mix(in srgb, var(--gold) 10%, transparent);
    }
    .soc-chat-meta-pill.is-mod {
      color: #8fc7ff;
      border-color: color-mix(in srgb, #5aa9f0 26%, var(--line));
      background: color-mix(in srgb, #5aa9f0 10%, transparent);
    }
    .soc-chat-tools {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding-top: 2px;
      margin-left: 0;
    }
    .soc-chat-streak {
      min-height: 44px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      color: #ff9642;
      background: color-mix(in srgb, #ff7a1a 14%, var(--surface));
      border: 1px solid color-mix(in srgb, #ff7a1a 24%, var(--line));
      font-size: .78rem;
      font-weight: 900;
      line-height: 1;
    }
    .soc-chat-shell .soc-chat-scroll {
      flex: 1;
      min-height: 240px;
      justify-content: flex-end;
      gap: 10px;
      padding: 18px 16px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--green) 4%, transparent), transparent 160px),
        var(--surface);
    }
    .soc-chat-day {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0 2px;
      padding: 0;
      border: 0;
      background: transparent;
      font-size: .72rem;
      font-weight: 850;
      color: var(--muted);
      text-transform: none;
    }
    .soc-chat-day::before,
    .soc-chat-day::after {
      content: "";
      flex: 1;
      height: 1px;
      background: color-mix(in srgb, var(--green) 12%, var(--line));
    }
    .soc-chat-day span {
      padding: 5px 11px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      letter-spacing: 0;
    }
    .soc-msg {
      max-width: min(78%, 36rem);
      padding: 10px 12px 9px;
    }
    .soc-msg p { margin: 0; }
    .soc-msg-time {
      display: flex;
      justify-content: flex-end;
      margin-top: 7px;
      font-size: .68rem;
      font-weight: 800;
      line-height: 1;
      color: color-mix(in srgb, var(--muted) 86%, transparent);
    }
    .soc-msg.is-mine .soc-msg-time {
      color: color-mix(in srgb, var(--green) 52%, var(--ink));
    }
    .soc-chat-shell .soc-chat-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border-top: 1px solid color-mix(in srgb, var(--green) 14%, var(--line));
    }
    .soc-chat-shell .soc-chat-form input {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      padding: 0 18px;
      font-size: .96rem;
    }
    .soc-chat-shell .soc-send-btn {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 14px;
      padding: 0;
    }
    .soc-chat-empty {
      max-width: 28rem;
    }
    @media (max-width: 760px) {
      .soc-chat-shell {
        min-height: calc(100dvh - 96px);
        border-radius: 0;
      }
      .soc-chat-shell .soc-chat-head {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 10px;
        padding: calc(14px + env(safe-area-inset-top)) 10px 12px;
      }
      .soc-chat-back,
      .soc-chat-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }
      .soc-chat-shell .soc-chat-peer {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
      }
      .soc-chat-shell .soc-chat-peer .soc-avatar {
        width: 46px;
        height: 46px;
        border-radius: 16px;
      }
      .soc-chat-title {
        gap: 5px;
        padding-top: 1px;
      }
      .soc-chat-name-row strong {
        max-width: none;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .soc-chat-wide-meta,
      .soc-chat-streak-desktop {
        display: none !important;
      }
      .soc-chat-streak-mobile {
        display: inline-flex !important;
        min-height: 24px;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: .68rem;
      }
      .soc-chat-shell .soc-chat-scroll {
        min-height: 0;
        padding: 16px 12px;
      }
      .soc-msg {
        max-width: 88%;
      }
      .soc-chat-shell .soc-chat-form {
        gap: 8px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
      }
    }
    @media (max-width: 430px) {
      .soc-chat-shell .soc-chat-head {
        padding-left: 8px;
        padding-right: 8px;
      }
      .soc-chat-shell .soc-chat-peer {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
      }
      .soc-chat-shell .soc-chat-peer .soc-avatar {
        width: 42px;
        height: 42px;
        border-radius: 14px;
      }
      .soc-chat-title {
        gap: 4px;
      }
      .soc-chat-name-row {
        gap: 6px;
      }
      .soc-chat-name-row strong {
        font-size: 1rem;
      }
      .soc-chat-handle-sm {
        max-width: 54vw;
      }
      .soc-chat-subline {
        gap: 5px;
      }
      .soc-chat-state,
      .soc-chat-meta-pill {
        font-size: .62rem;
      }
      .soc-chat-shell .soc-chat-form input {
        min-height: 46px;
        font-size: .92rem;
      }
      .soc-chat-shell .soc-send-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
      }
    }

    .chat-drawer[hidden],
    .chat-drawer-overlay[hidden] {
      display: none !important;
    }

    /* ── (merge v3.5.7) avatar con FOTO: sin "fondo raro" ──────────────────── */
    .avatar-circle:has(img), .soc-avatar:has(img), .avatar:has(img),
    .logo-avatar:has(img), [id$="-avatar"]:has(img) {
      background: var(--surface) !important; box-shadow: none !important;
    }
    .avatar:has(img) > svg, .logo-avatar:has(img) > svg { display: none; }
    .avatar-circle img, .soc-avatar img, .avatar img { border-radius: 50%; }

    /* ── Quiz: filtros avanzados por tema (Premium) ───────────────────────── */
    .quiz-advanced { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: color-mix(in srgb, var(--green) 4%, var(--surface)); overflow: hidden; }
    .quiz-advanced > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 700; color: var(--ink); }
    .quiz-advanced > summary::-webkit-details-marker { display: none; }
    .quiz-advanced .qa-sum-left { display: flex; align-items: center; gap: 8px; }
    .quiz-advanced .qa-active { font-size: .76rem; font-weight: 700; color: var(--green-2); background: color-mix(in srgb, var(--green) 14%, var(--surface)); padding: 2px 9px; border-radius: 999px; }
    .chip.premium-mini, .premium-mini { font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #6a4710; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, #fff), color-mix(in srgb, var(--gold) 12%, #fff)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); padding: 2px 8px; border-radius: 999px; }
    .quiz-advanced-body { padding: 4px 14px 16px; border-top: 1px solid var(--line); }
    .qa-label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
    .qa-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); margin-bottom: 10px; }
    .topic-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; padding: 2px; }
    .topic-chip { font-size: .8rem; font-weight: 600; line-height: 1.1; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
    .topic-chip:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
    .topic-chip:active { transform: scale(.97); }
    .topic-chip.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 30%, transparent); }
    .qa-grid { margin-top: 14px; }
    .qa-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
    .qa-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; }
    .qa-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
    .qa-clear { margin-left: auto; font-weight: 700; }
    .qa-note { margin: 10px 2px 0; color: var(--muted); opacity: .9; }
    .topic-search-empty { margin: 8px 2px 0; color: var(--muted); font-weight: 600; }
    .qa-sel-count { font-size: .72rem; font-weight: 800; color: var(--green-2); background: color-mix(in srgb, var(--green) 14%, var(--surface)); padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
    .topic-chip.mini-chip { font-size: .78rem; padding: 6px 10px; }
    .topic-chip.sub-chip { font-weight: 600; opacity: .95; }
    .qa-label { margin-top: 14px; display: flex; align-items: center; }

    /* ── Onboarding de Hábitos ────────────────────────────────────────────── */
    .hob-panel { max-width: 620px; margin: 0 auto; padding: 22px 20px 24px; }
    .hob-panel h2 { margin: 12px 0 6px; }
    .hob-prog { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); overflow: hidden; margin-bottom: 14px; }
    .hob-prog > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--teal, var(--green-2))); border-radius: inherit; transition: width .3s ease; }
    .hob-opts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
    .hob-opt { padding: 11px 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
    .hob-opt:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
    .hob-opt:active { transform: scale(.97); }
    .hob-opt.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 30%, transparent); }
    .hob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
    .hob-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; margin-top: 14px; }
    .hob-rec { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green) 5%, var(--surface)); font-weight: 600; }
    .hob-rec-ic { font-size: 1.15rem; }
    .hob-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
    .hob-back { margin-top: 12px; display: inline-block; }

    /* ── Tarjeta Premium (Stripe) ─────────────────────────────────────────── */
    .premium-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), color-mix(in srgb, var(--green) 6%, var(--surface))); }
    .premium-card.is-on { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
    .premium-card .qau-glow { position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%); pointer-events: none; }
    .premium-card .panel-head { position: relative; }

    /* Upsell premium para usuarios free */
    .quiz-advanced-upsell { position: relative; margin-top: 14px; padding: 16px 16px 18px; border-radius: var(--radius, 14px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), color-mix(in srgb, var(--green) 6%, var(--surface))); }
    .quiz-advanced-upsell .qau-glow { position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); filter: blur(6px); pointer-events: none; }
    .quiz-advanced-upsell .qau-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .quiz-advanced-upsell h3 { margin: 0; font-size: 1.06rem; color: var(--ink); }
    .qau-badge { font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #6a4710; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 34%, #fff), color-mix(in srgb, var(--gold) 14%, #fff)); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); padding: 3px 10px; border-radius: 999px; }
    .quiz-advanced-upsell p { margin: 9px 0 13px; color: var(--muted); font-size: .9rem; line-height: 1.5; position: relative; }
    .quiz-advanced-upsell p strong { color: var(--ink); font-weight: 700; }
    .qau-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
    .qau-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip.ghost { font-size: .72rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px dashed var(--line); padding: 3px 9px; border-radius: 999px; opacity: .85; }
    html[data-theme="dark"] .topic-chip.on { color: #fff; }
    html[data-theme="dark"] .qau-badge, html[data-theme="dark"] .premium-mini { color: #ffe7c2; }

    /* ── Mi perfil: pestañas ──────────────────────────────────────────────── */
    .profile-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-bottom: 14px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px solid var(--line); border-radius: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .profile-tabs::-webkit-scrollbar { display: none; }
    .profile-tab { flex: 0 0 auto; padding: 9px 15px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: .9rem; cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; }
    .profile-tab:hover { color: var(--ink); }
    .profile-tab.on { background: var(--green); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 28%, transparent); }

    /* Recompensas (solo lectura) */
    .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
    .reward-item { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
    .reward-item.is-off { opacity: .62; }
    .reward-item.is-on { border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
    .reward-item-main { display: flex; align-items: center; gap: 7px; }
    .reward-item-note { font-size: .76rem; font-weight: 700; color: var(--muted); }
    .reward-item.is-on .reward-item-note { color: var(--green-2); }
    .reward-item-desc { color: var(--muted); }

    /* ── Sidebar: scroll interno elegante en pantallas bajas ──────────────── */
    .sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-right: 2px; }
    .sidebar > .nav::-webkit-scrollbar { width: 6px; }
    .sidebar > .nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; }
    .sidebar-profile, .sidebar-note { flex: 0 0 auto; }

    /* ── Sidebar acordeón (menú corto: 8 botones, sub-items dentro) ───────── */
    .nav-acc { display: grid; gap: 4px; }
    .nav-acc-toggle { display: flex !important; align-items: center; gap: 9px; width: 100%; }
    .nav-acc-toggle > span { flex: 1; }
    .nav-acc-chev { width: 16px; height: 16px; margin-left: auto; opacity: .55; transition: transform .22s ease; flex: 0 0 auto; }
    .nav-acc.open .nav-acc-chev { transform: rotate(180deg); }
    .nav-acc.child-active > .nav-acc-toggle { color: var(--ink); }
    .nav-acc.child-active > .nav-acc-toggle i { color: #fff; background: var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
    .nav-acc-panel { display: grid; gap: 2px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .18s ease, margin-top .2s ease; }
    .nav-acc.open .nav-acc-panel { max-height: 340px; opacity: 1; margin-top: 2px; }
    button.nav-sub { min-height: 38px !important; grid-template-columns: 1fr !important; display: block !important; padding: 8px 10px 8px 44px !important; font-weight: 700 !important; font-size: .9rem; position: relative; color: var(--muted); }
    button.nav-sub::before { content: ""; position: absolute; left: 22px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--line); transform: translateY(-50%); transition: background .15s ease; }
    button.nav-sub.active { color: var(--ink); background: #e4f5ed; }
    button.nav-sub.active::before { background: var(--green); }
    html[data-theme="dark"] button.nav-sub.active { background: color-mix(in srgb, var(--green) 18%, transparent); }

    /* ── Quiz menos saturado ──────────────────────────────────────────────── */
    .quiz-setup { max-width: 760px; margin: 0 auto; }
    .quiz-panel { padding: 20px 20px 22px; }
    .quiz-head h2 { margin: 0 0 2px; }
    .quiz-head p { margin: 0; }
    .quiz-count-chip { white-space: nowrap; }
    .form-grid.quiz-basic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; margin-top: 14px; }
    .form-grid.quiz-basic .field { display: flex; flex-direction: column; gap: 5px; }
    .form-grid.quiz-basic label { font-size: .82rem; font-weight: 700; color: var(--muted); }
    .quiz-start-row { margin-top: 16px; }
    .btn-start-quiz { width: 100%; justify-content: center; font-size: 1.02rem; padding: 13px 18px; }
    .quiz-modes-acc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
    .quiz-modes-acc > summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .9rem; list-style: none; }
    .quiz-modes-acc > summary::-webkit-details-marker { display: none; }
    .quiz-modes-acc > summary::before { content: "▸ "; }
    .quiz-modes-acc[open] > summary::before { content: "▾ "; }
    .quiz-modes-acc .quick-modes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
    @media (max-width: 560px) { .form-grid.quiz-basic { grid-template-columns: 1fr; } }

    /* ── Planes Premium (mensual / 1 año) ─────────────────────────────────── */
    .premium-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; position: relative; }
    .premium-plan { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
    .premium-plan.is-best { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
    .premium-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .premium-plan-head strong { font-size: 1.05rem; }
    .premium-plan-tag { font-size: .72rem; font-weight: 700; color: var(--muted); }
    .premium-plan-best { color: #6a4710; background: color-mix(in srgb, var(--gold) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); padding: 2px 8px; border-radius: 999px; }
    .premium-plan .btn { width: 100%; justify-content: center; margin-top: auto; }
    .premium-plan p { margin: 0; }
    html[data-theme="dark"] .premium-plan-best { color: #ffe7c2; }
    @media (max-width: 520px) { .premium-plans { grid-template-columns: 1fr; } }

    /* ===================================================================== */
    /* v3.5.9 PREMIUM UX — añadido al final para ganar la cascada (sin tocar  */
    /* los bloques duplicados existentes). Solo presentación.                */
    /* ===================================================================== */

    /* — Fix global "pill encima del título": badge/chip antes de un H2/H3     */
    /*   dentro de .panel-head va en su propia línea con aire.                 */
    .panel-head .qau-badge, .panel-head .role-badge { display: inline-flex; margin-bottom: 8px; }
    .panel-head > div { min-width: 0; }
    .panel-head p { line-height: 1.5; }
    /* Badge ✦ Premium con contraste legible (antes: texto claro sobre oro claro). */
    .qau-badge { background: linear-gradient(135deg, var(--gold), #e6bd76); color: #3b2908;
      -webkit-text-fill-color: #3b2908; font-weight: 800; letter-spacing: .2px; padding: 3px 10px;
      border-radius: 999px; font-size: .72rem; display: inline-flex; align-items: center; gap: 4px; }
    html[data-theme="dark"] .qau-badge { color: #2a1d06; -webkit-text-fill-color: #2a1d06; }

    /* — Tarjeta Premium respirada + ilustración CSS (sin imagen) — */
    .premium-card { padding: 22px 22px 24px; overflow: hidden; }
    .premium-head { position: relative; }
    .premium-head .qau-badge { display: inline-flex; margin-bottom: 10px; }
    .premium-head h2 { margin: 0 0 4px; line-height: 1.18; }
    .premium-sub { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.4; }
    .premium-card-body { min-width: 0; }
    .premium-card.is-illustrated { display: block; }
    @media (min-width: 780px) {
      .premium-card.is-illustrated { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 24px; align-items: center; }
    }
    .premium-benefits { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
    @media (min-width: 600px) { .premium-benefits { grid-template-columns: 1fr 1fr; gap: 10px 18px; } }
    .premium-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.45; color: var(--ink); min-width: 0; }
    .pb-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      background: rgba(45,122,95,.16); color: var(--green); font-size: .72rem; font-weight: 900; margin-top: 1px; }
    .premium-card .premium-plans { margin-top: 20px; }
    .premium-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
    .premium-secure { color: var(--muted); }
    .premium-plan.is-best .btn { background: linear-gradient(135deg, var(--gold), #ffd98a); color: #3b2908;
      border-color: rgba(196,129,59,.55); box-shadow: 0 8px 22px rgba(196,129,59,.30); font-weight: 800; }
    .premium-plan.is-best .btn:hover { filter: brightness(1.04); }

    .premium-illustration { position: relative; margin: 18px auto 0; max-width: 260px; }
    @media (min-width: 780px) { .premium-illustration { margin: 0; } }
    .premium-illustration .pmi-glow { position: absolute; inset: -24px -10px; border-radius: 30px; z-index: 0;
      background: radial-gradient(60% 60% at 70% 30%, rgba(196,129,59,.35), transparent 70%),
                  radial-gradient(60% 60% at 25% 80%, rgba(45,122,95,.30), transparent 70%); filter: blur(6px); }
    .pmi-frame { position: relative; z-index: 1; border-radius: 18px; padding: 14px; background: var(--panel, #fff);
      border: 1px solid var(--line); box-shadow: 0 18px 38px rgba(22,48,38,.18); transform: perspective(700px) rotateY(-7deg) rotateX(3deg); }
    .pmi-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    .pmi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(45,122,95,.18); }
    .pmi-title { font-size: .82rem; font-weight: 800; color: var(--ink); }
    .pmi-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 11px;
      margin-bottom: 9px; font-size: .82rem; font-weight: 700; color: var(--ink); border: 1px solid var(--line); }
    .pmi-card i { width: 26px; height: 14px; border-radius: 999px; flex: 0 0 auto; opacity: .85; }
    .pmi-card.pmi-bank { background: linear-gradient(120deg, rgba(196,129,59,.16), transparent); } .pmi-bank i { background: var(--gold); }
    .pmi-card.pmi-filters { background: linear-gradient(120deg, rgba(45,122,95,.16), transparent); } .pmi-filters i { background: var(--green); }
    .pmi-card.pmi-duel { background: linear-gradient(120deg, rgba(108,90,168,.16), transparent); } .pmi-duel i { background: var(--violet); }

    /* — Paywalls contextuales (tarjeta inline) — */
    .paywall-card { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px; border-radius: 14px;
      border: 1px solid var(--line); background: linear-gradient(135deg, rgba(196,129,59,.10), rgba(45,122,95,.08)); }
    .paywall-icon { font-size: 1.7rem; flex: 0 0 auto; }
    .paywall-text { min-width: 0; flex: 1 1 220px; }
    .paywall-text .qau-badge { display: inline-flex; margin-bottom: 6px; }
    .paywall-text strong { display: block; margin-bottom: 3px; }
    .paywall-text p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
    .premium-cta { white-space: nowrap; }

    /* — Toast accionable (nudge tocable) — */
    .toast.toast-action { cursor: pointer; }

    /* — Sidebar: entrada Premium + riel activo del subitem — */
    .nav-premium { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 12px;
      border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); text-align: left;
      background: linear-gradient(135deg, rgba(196,129,59,.18), rgba(45,122,95,.16)); box-shadow: inset 0 0 0 1px rgba(196,129,59,.22); }
    .nav-premium:hover { filter: brightness(1.04); }
    .nav-premium i { display: inline-flex; flex: 0 0 auto; }
    .nav-premium i svg { width: 20px; height: 20px; color: var(--gold); }
    .nav-premium-on { display: none; color: var(--green-2, var(--green)); }
    body.is-premium-on .nav-premium-off { display: none; }
    body.is-premium-on .nav-premium-on { display: inline; }
    body.is-premium-on .nav-premium { background: linear-gradient(135deg, rgba(45,122,95,.16), rgba(45,122,95,.06)); }
    button.nav-sub.active { box-shadow: inset 3px 0 0 var(--green); }

    /* — Arena: botón "Unirme" abajo y a lo ancho + reveal de respuesta — */
    .arena-join { display: grid; gap: 8px; }
    .arena-join .arena-join-btn { width: 100%; justify-content: center; }
    .arena-reveal { margin: 12px 0 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-soft, #eef6f1); }
    .arena-reveal-head { font-weight: 800; margin-bottom: 10px; font-size: 1.02rem; }
    .arena-reveal-head.is-ok { color: var(--green); }
    .arena-reveal-head.is-bad { color: var(--red); }
    .arena-reveal-head.is-miss { color: var(--muted); }
    .arena-reveal-opts { display: grid; gap: 7px; }
    .arena-reveal-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel, #fff); }
    .arena-reveal-opt .letter { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; background: rgba(0,0,0,.05); }
    .arena-reveal-opt.correct { border-color: var(--green); background: rgba(45,122,95,.12); }
    .arena-reveal-opt.wrong { border-color: var(--red); background: rgba(184,87,87,.12); }
    .arena-reveal-tag { margin-left: auto; font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
    .arena-reveal-tag.ok { background: var(--green); color: #fff; }
    .arena-reveal-tag.bad { background: var(--red); color: #fff; }
    .arena-reveal-expl { margin: 11px 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

    /* — Logout en Configuración — */
    .logout-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .logout-row > div { min-width: 0; }
    .logout-btn { white-space: nowrap; }

    /* — Tutor IA: acciones (copiar/cerrar) y aire — */
    .tutor-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tutor-actions { margin-left: auto; display: inline-flex; gap: 4px; flex: 0 0 auto; }
    .tutor-act { border: 0; background: rgba(0,0,0,.06); color: var(--muted); cursor: pointer; width: 26px; height: 26px;
      border-radius: 8px; font-size: .8rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
    .tutor-act:hover { background: rgba(0,0,0,.12); color: var(--ink); }
    html[data-theme="dark"] .tutor-act { background: rgba(255,255,255,.10); }
    .tutor-body p { line-height: 1.55; }

    /* — Anti-amontonamiento (varios) — */
    .profile-hero > div { min-width: 0; }
    .profile-hero .chip.active, .profile-hero .role-badge { margin-bottom: 8px; }
    .profile-hero h2 { margin: 4px 0 2px; line-height: 1.2; }
    .account-handle { flex-wrap: wrap; }
    .account-handle .premium-chip { margin: 4px 0 0 8px; }
    .supabase-panel .panel-head > div { min-width: 0; }
    .supabase-panel .status { white-space: nowrap; flex: 0 0 auto; }
    .supabase-panel .supabase-status { line-height: 1.5; margin-top: 8px; }
    .config-row p.tiny { line-height: 1.5; margin-top: 4px; }
    @media (max-width: 480px) {
      .qau-actions { flex-direction: column; align-items: stretch; }
      .qau-actions .btn { width: 100%; justify-content: center; }
      .qau-chips { justify-content: center; }
    }

    /* v3.5.10 - Resumenes premium: dossier web de Embriologia Bloque 1 */
    .premium-summary-card {
      position: relative;
      overflow: hidden;
      border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
      background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 10%, var(--panel)), var(--panel));
    }
    .premium-summary-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--subject-color), var(--gold));
    }
    .premium-summary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .premium-summary-cover {
      margin: 14px 0;
      min-height: 112px;
      display: grid;
      place-content: center;
      text-align: center;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
      background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--subject-color) 24%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--green) 14%, var(--surface)), color-mix(in srgb, var(--gold) 10%, var(--surface)));
    }
    .premium-summary-cover span {
      color: var(--green);
      font-size: 2.2rem;
      line-height: 1;
      font-weight: 900;
    }
    .premium-summary-cover strong {
      color: var(--ink);
      font-size: .82rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .premium-summary-cover small {
      color: var(--muted);
      margin-top: 4px;
      font-weight: 700;
    }
    .premium-summary-card p { margin: 0; }
    .premium-summary-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 2px;
    }
    .premium-summary-meta span {
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }
    @media (max-width: 680px) {
      .premium-summary-card .row,
      .premium-summary-card .btn,
      .premium-summary-card .btn-secondary {
        width: 100%;
      }
      .premium-summary-card .row {
        display: grid;
      }
    }