/* ══════════════════════════════════════════════════════════
   MODALES — CSS
   Reuse tenses-hdr, tense-detail-wrap, formula-section, kw-tag
══════════════════════════════════════════════════════════ */
.modal-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:6px; }
.modal-tile  { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg);
               padding:14px 14px 12px; cursor:pointer; transition:all var(--t-normal); }
.modal-tile:hover  { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.modal-tile.active { border-width:2px; }
.modal-dot   { width:10px; height:10px; border-radius:50%; margin-bottom:8px; }
.modal-name  { font-family:var(--font-display); font-size:1.1rem; font-weight:800; margin-bottom:2px; }
.modal-es    { font-size:.72rem; color:var(--text-muted); }
.modal-tag   { font-size:.65rem; color:var(--text-muted); margin-top:5px; line-height:1.3; }

/* Detail panel */
.modal-detail-wrap { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl);
                     padding:24px; margin-top:20px; }
.modal-detail-hdr  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.modal-detail-dot  { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.modal-detail-name { font-family:var(--font-display); font-size:1.6rem; font-weight:800; }
.modal-detail-es   { font-size:.88rem; color:var(--text-muted); }
.modal-back-btn    { margin-left:auto; background:none; border:1px solid var(--border-default); color:var(--text-secondary);
                     padding:5px 12px; border-radius:8px; cursor:pointer; font-size:.8rem; font-family:var(--font-body);
                     transition:all var(--t-fast); }
.modal-back-btn:hover { border-color:var(--accent); color:var(--accent); }
.modal-sub-tabs    { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.mtab              { padding:6px 14px; border-radius:99px; font-size:.78rem; font-weight:600; cursor:pointer;
                     border:1px solid var(--border-default); background:transparent; color:var(--text-muted);
                     font-family:var(--font-body); transition:all var(--t-fast); }
.mtab:hover        { border-color:var(--accent); color:var(--accent); }
.mtab.active       { background:var(--accent); border-color:var(--accent); color:#fff; }
.mtab-content      { display:none; }
.mtab-content.active { display:block; }

/* Uses list */
.modal-uses    { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.modal-use-item { background:var(--bg-surface); border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;
                  padding:10px 14px; }
.modal-use-icon  { font-size:1.1rem; margin-right:6px; }
.modal-use-label { font-weight:700; font-size:.88rem; margin-bottom:2px; }
.modal-use-desc  { font-size:.83rem; color:var(--text-secondary); line-height:1.4; }

/* Note box */
.modal-note  { background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.3); border-radius:var(--r-md);
               padding:10px 14px; font-size:.83rem; color:var(--text-secondary); line-height:1.5; margin-bottom:16px; }
.modal-note strong { color:#FBBF24; }

/* Examples by use */
.modal-ex-block   { margin-bottom:18px; }
.modal-ex-use-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
                    color:var(--text-muted); margin-bottom:8px; }
.modal-ex-sent    { background:var(--bg-surface); border-radius:var(--r-md); padding:8px 12px;
                    font-size:.88rem; color:var(--text-primary); margin-bottom:5px; line-height:1.4; }
.modal-ex-sent em { color:var(--accent); font-style:normal; font-weight:600; }

/* Mistakes */
.modal-mistake { background:var(--bg-surface); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; }
.modal-m-wrong { font-size:.88rem; color:#EF4444; text-decoration:line-through; margin-bottom:4px; }
.modal-m-right { font-size:.88rem; color:#22C55E; font-weight:600; margin-bottom:4px; }
.modal-m-why   { font-size:.78rem; color:var(--text-muted); }

/* Quiz inside modal detail */
.mq-sentence  { font-size:1.05rem; font-weight:500; text-align:center; padding:18px 16px; background:var(--bg-surface);
                border-radius:var(--r-lg); margin-bottom:16px; line-height:1.5; }
.mq-blank     { display:inline-block; min-width:80px; border-bottom:2px solid var(--accent); padding:0 4px; }
.mq-opts      { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mq-opt       { padding:10px 14px; border:1px solid var(--border-default); border-radius:var(--r-md);
                background:transparent; cursor:pointer; font-size:.9rem; font-weight:600;
                font-family:var(--font-body); color:var(--text-primary); transition:all var(--t-fast); }
.mq-opt:hover:not(:disabled) { border-color:var(--accent); background:rgba(79,70,229,.08); }
.mq-opt.correct   { background:rgba(34,197,94,.15); border-color:#22C55E; color:#22C55E; }
.mq-opt.incorrect { background:rgba(239,68,68,.12); border-color:#EF4444; color:#EF4444; }
.mq-explain   { margin-top:12px; padding:10px 14px; background:rgba(79,70,229,.08); border-radius:var(--r-md);
                font-size:.83rem; color:var(--text-secondary); line-height:1.45; }
.mq-progress  { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mq-prog-bar  { flex:1; height:5px; background:var(--border-subtle); border-radius:99px; overflow:hidden; }
.mq-prog-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .3s; }
.mq-score     { font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

/* Situations game */
.sit-card     { background:var(--bg-surface); border-radius:var(--r-lg); padding:20px; margin-bottom:16px; }
.sit-scenario { font-size:.95rem; margin-bottom:16px; line-height:1.5; }
.sit-scenario .sit-ctx { font-size:.78rem; color:var(--text-muted); display:block; margin-bottom:6px;
                         text-transform:uppercase; letter-spacing:.06em; }
.sit-opts     { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.sit-opt      { padding:10px 14px; border:1px solid var(--border-default); border-radius:var(--r-md);
                background:transparent; cursor:pointer; font-size:.95rem; font-weight:700;
                font-family:var(--font-display); color:var(--text-primary); transition:all var(--t-fast); }
.sit-opt:hover:not(:disabled) { border-color:var(--accent); }
.sit-opt.correct   { background:rgba(34,197,94,.15); border-color:#22C55E; }
.sit-opt.incorrect { background:rgba(239,68,68,.12); border-color:#EF4444; }
.sit-feedback { margin-top:12px; font-size:.85rem; line-height:1.5; color:var(--text-secondary); }
.sit-next-btn { margin-top:12px; padding:8px 20px; background:var(--accent); color:#fff; border:none;
                border-radius:var(--r-md); cursor:pointer; font-weight:600; font-size:.88rem;
                font-family:var(--font-body); }
.sit-prog     { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.sit-result   { text-align:center; padding:30px 20px; }
.sit-result-score { font-size:2.5rem; font-weight:800; font-family:var(--font-display); margin-bottom:8px; }
.sit-result-msg   { font-size:1rem; color:var(--text-secondary); margin-bottom:20px; }

/* ── Modals responsive ── */
@media (max-width:640px) {
    .modal-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .mq-opts, .sit-opts { grid-template-columns:1fr 1fr; }
}

@media (max-width:380px) {
    .modal-grid { grid-template-columns:1fr 1fr; }
    .mq-opts, .sit-opts { grid-template-columns:1fr; }
}