/* ── Tense locked ── */
.tense-tile.tense-locked { opacity:.55; cursor:pointer; }
.tense-tile.tense-locked:hover { border-color:var(--accent); opacity:.8; }

/* ── Tenses section ── */
.tenses-hdr { margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tenses-hdr-left { flex:1; min-width:0; }
.tenses-hdr h1 { font-family:var(--font-display); font-size:1.75rem; font-weight:700; margin-bottom:6px; }
.tenses-hdr p  { color:var(--text-secondary); font-size:.9rem; }
/* ── Mode groups (Estudio / Práctica) ── */
.tenses-mode-groups { display:flex; flex-direction:column; gap:14px; margin-top:20px; width:100%; }
.tmb-group { display:flex; flex-direction:column; gap:8px; }
.tmb-group-label {
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-muted);
    padding:0 2px; display:flex; align-items:center; gap:5px;
}
.tmb-group-label::after {
    content:''; flex:1; height:1px; background:var(--border-subtle); margin-left:4px;
}
.tenses-mode-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; }
.tense-mode-btn {
    background: var(--bg-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--r-xl);
    padding: 20px 14px 18px;
    cursor: pointer;
    text-align: center;
    transition: all var(--t-fast);
    font-family: var(--font-body);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.tense-mode-btn:hover  { border-color:var(--accent); background:var(--bg-hover); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.tense-mode-btn.active { border-color:var(--accent); background:rgba(79,70,229,.10); color:var(--text-primary); box-shadow:var(--glow-blue); }
/* Botones de práctica con acento verde cuando activos */
.tmb-group:last-child .tense-mode-btn:hover  { border-color:#10B981; }
.tmb-group:last-child .tense-mode-btn.active { border-color:#10B981; background:rgba(16,185,129,.10); box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.tmb-icon  { font-size:1.9rem; line-height:1; margin-bottom:10px; display:block; }
.tmb-label { font-weight:700; font-size:.92rem; margin-bottom:5px; display:block; }
.tmb-desc  { font-size:.72rem; color:var(--text-muted); line-height:1.4; display:block; }
.tense-mode-btn.active .tmb-desc { color:var(--text-secondary); }
/* Challenge mode */
.tc-wrap       { max-width:720px; margin:0 auto; }
.tc-sel-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:16px 0 24px; }
.tc-sel-tile   { background:var(--bg-card); border:2px solid var(--border-subtle); border-radius:var(--r-xl); padding:20px 18px 18px; cursor:pointer; transition:all var(--t-fast); position:relative; }
.tc-sel-tile:hover   { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.tc-sel-tile.selected{ border-color:var(--accent); background:rgba(79,70,229,.10); }
.tc-sel-tile.selected::after { content:'✓'; position:absolute; top:10px; right:13px; font-size:.82rem; font-weight:700; color:var(--accent-bright); }
.tc-sel-tile.tc-locked { opacity:.4; cursor:not-allowed; }
.tc-sel-dot  { width:10px; height:10px; border-radius:50%; margin-bottom:10px; }
.tc-sel-name { font-size:.88rem; font-weight:700; color:var(--text-primary); line-height:1.3; }
.tc-sel-es   { font-size:.72rem; color:var(--text-muted); margin-top:4px; }
.tq-tense-badge { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:3px 11px; font-size:.68rem; font-weight:700; margin-bottom:14px; }
/* Irregular verbs — filters & search */
.irr-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.level-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.level-tab {
    background: var(--bg-hover);
    border: 1.5px solid var(--border-subtle);
    border-radius: 99px;
    padding: 5px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--t-fast);
    line-height: 1.4;
}
.level-tab:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--bg-card);
}
.level-tab.active {
    border-color: var(--accent);
    background: rgba(79,70,229,.12);
    color: var(--accent);
    font-weight: 700;
}
.search-input {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 7px 14px;
    font-size: .85rem;
    font-family: var(--font-body);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--t-fast);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
/* Irregular verbs table */
#tenses-irregular-wrap table tbody tr { border-bottom:1px solid var(--border-subtle); transition:background var(--t-fast); }
#tenses-irregular-wrap table tbody tr:last-child { border-bottom:none; }
#tenses-irregular-wrap table tbody tr:hover { background:var(--bg-hover); }
#tenses-irregular-wrap table td { padding:9px 14px; }
/* Identify mode */
.ti-sentence  { font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--text-primary); text-align:center; line-height:1.45; margin:10px 0 24px; padding:20px 24px; background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--r-xl); }
.ti-options   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ti-opt       { background:var(--bg-card); border:2px solid var(--border-default); border-radius:var(--r-lg); padding:14px 16px; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--text-secondary); transition:all var(--t-fast); font-family:var(--font-body); display:flex; align-items:center; gap:10px; }
.ti-opt:hover         { border-color:var(--accent); color:var(--text-primary); }
.ti-opt.correct       { border-color:#06B6D4; background:rgba(6,182,212,.12); color:#06B6D4; }
.ti-opt.wrong         { border-color:#F87171; background:rgba(248,113,113,.1);  color:#F87171; }
.ti-opt.revealed      { border-color:#06B6D4; background:rgba(6,182,212,.07); color:#06B6D4; }
.ti-opt-dot   { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tense-group-lbl { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin:22px 0 10px; display:flex; align-items:center; gap:10px; }
.tense-group-lbl::after { content:''; flex:1; height:1px; background:var(--border-subtle); }
.tense-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tense-tile { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:13px 14px; cursor:pointer; transition:all var(--t-fast); }
.tense-tile:hover { border-color:var(--accent); background:var(--bg-hover); transform:translateY(-1px); }
.tense-tile.active { border-color:var(--accent); background:rgba(79,70,229,.08); box-shadow:var(--glow-blue); }
.tt-dot  { width:9px; height:9px; border-radius:50%; margin-bottom:9px; }
.tt-name { font-weight:700; font-size:.83rem; line-height:1.25; margin-bottom:3px; color:var(--text-primary); }
.tt-es   { font-size:.69rem; color:var(--text-muted); }
.tense-detail-wrap { background:var(--bg-secondary); border:1px solid var(--border-default); border-radius:var(--r-xl); overflow:hidden; margin-top:24px; }
.tense-detail-hdr { display:flex; align-items:center; gap:12px; padding:20px 24px 0; flex-wrap:wrap; }
.tense-detail-dot  { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.tense-detail-name { font-family:var(--font-display); font-size:1.35rem; font-weight:700; }
.tense-detail-es   { font-size:.80rem; color:var(--text-muted); margin-left:auto; }
.tense-back-btn { background:none; border:1px solid var(--border-default); border-radius:var(--r-md); padding:6px 12px; font-size:.75rem; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast); white-space:nowrap; }
.tense-back-btn:hover { border-color:var(--accent); color:var(--accent-bright); }
.tense-sub-tabs { display:flex; border-bottom:1px solid var(--border-subtle); padding:0 24px; margin-top:12px; }
.ttab { background:none; border:none; border-bottom:2px solid transparent; padding:10px 18px; font-size:.84rem; font-weight:600; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast); margin-bottom:-1px; }
.ttab:hover { color:var(--text-primary); }
.ttab.active { color:var(--accent-bright); border-bottom-color:var(--accent); }
.ttab-content { display:none; padding:22px 24px; }
.ttab-content.active { display:block; }
.tense-use-box { background:var(--bg-tertiary); border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; padding:12px 16px; margin-bottom:20px; font-size:.88rem; color:var(--text-secondary); line-height:1.6; }
.formula-section { margin-bottom:20px; }
.formula-lbl { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:9px; }
.formula-row  { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.formula-type { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; width:72px; flex-shrink:0; padding-top:8px; }
.formula-type.aff { color:var(--accent-alt); }
.formula-type.neg { color:#F87171; }
.formula-type.q   { color:#FBBF24; }
.formula-code { background:var(--bg-primary); border:1px solid var(--border-default); border-radius:var(--r-sm); padding:7px 12px; font-family:monospace; font-size:.80rem; color:var(--text-primary); flex:1; line-height:1.6; }
.keyword-section { margin-bottom:4px; }
.keyword-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.kw-tag { background:rgba(79,70,229,.10); border:1px solid rgba(79,70,229,.18); border-radius:99px; padding:3px 11px; font-size:.72rem; color:var(--accent-bright); font-style:italic; }
.ex-block-group { display:flex; flex-direction:column; gap:12px; }
.ex-block { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:14px 16px; }
.ex-block-lbl { font-size:.60rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; margin-bottom:10px; }
.ex-block-lbl.aff { color:var(--accent-alt); }
.ex-block-lbl.neg { color:#F87171; }
.ex-block-lbl.q   { color:#FBBF24; }
.ex-sent { font-size:.88rem; color:var(--text-secondary); padding:5px 0; border-bottom:1px solid var(--border-subtle); line-height:1.55; }
.ex-sent:last-child { border-bottom:none; padding-bottom:0; }
.tq-sentence { font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--text-primary); text-align:center; margin-bottom:6px; line-height:1.35; }
.tq-blank { border-bottom:3px solid var(--accent); color:var(--accent-bright); padding:0 6px; }
.tq-prog  { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tq-prog-txt { font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

/* ── Tenses responsive ── */
@media (max-width:640px) {
    .tense-grid    { grid-template-columns:repeat(2,1fr); gap:7px; }
    .tense-tile    { padding:11px 12px; }
    .tt-name       { font-size:.78rem; }
    .tense-detail-es  { display:none; }
    .tense-detail-hdr { padding:16px 16px 0; flex-wrap:wrap; }
    .ttab { padding:10px 14px; font-size:.80rem; }
    .ttab-content  { padding:16px; }
    .formula-row   { flex-direction:column; gap:4px; }
    .formula-type  { width:auto; padding-top:0; font-size:.62rem; }
    .tenses-mode-btns { grid-template-columns:repeat(3,1fr); }
    .tense-mode-btn   { padding:14px 10px 12px; }
    .tmb-icon { font-size:1.4rem; margin-bottom:6px; }
    .tmb-label { font-size:.80rem; }
    .tmb-desc { display:none; }
    .tmb-group-label { font-size:.62rem; }
    .tc-sel-grid  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px) {
    .tenses-mode-btns { grid-template-columns:repeat(2,1fr); }
    .tense-mode-btn   { padding:12px 8px 10px; }
    .ti-options   { grid-template-columns:1fr; }
    .ti-sentence  { font-size:1.1rem; padding:14px 16px; }
}

/* ══════════════════════════════════════════════════════
   🔀 CONDICIONALES
══════════════════════════════════════════════════════ */

/* ── Selector de condicionales ── */
.cond-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
    margin-bottom: 4px;
}
.cond-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 14px 13px 12px;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}
.cond-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cond-card.active { border-width: 2px; }
.cond-dot  { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 8px; }
.cond-name { font-size: .78rem; font-weight: 700; line-height: 1.2; margin-bottom: 3px; }
.cond-es   { font-size: .7rem; color: var(--text-secondary); margin-bottom: 4px; }
.cond-tag  { font-size: .62rem; color: var(--text-muted); line-height: 1.3; }

/* ── Panel de detalle: mismo formato que el panel de Tiempos ── */
#cond-detail-wrap .tense-detail-wrap { margin-top: 20px; }
#cond-detail-wrap .tense-detail-hdr  { padding: 20px 24px 0; }
#cond-detail-wrap .tense-sub-tabs    { padding: 0 24px; }

/* ── Área de contenido (mismo padding que .ttab-content) ── */
.cond-tab-content { padding: 22px 24px; }

/* ── Cuadro de descripción (cuándo usar) ── */
.cond-tab-content .tense-use-box {
    font-size: .9rem;
    line-height: 1.7;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-left-width: 3px;
}

/* ── Sección de estructura (con caja visual) ── */
.cond-tab-content .formula-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 18px 20px 14px;
    margin-bottom: 20px;
}
.cond-tab-content .formula-lbl {
    font-size: .70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.cond-tab-content .formula-row   { margin-bottom: 10px; gap: 14px; }
.cond-tab-content .formula-type  { width: 68px; font-size: .67rem; padding-top: 9px; }
.cond-tab-content .formula-code  {
    font-size: .85rem;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border-color: var(--border-default);
}

/* ── Nota (⚡ error frecuente) ── */
.cond-tab-content .modal-note {
    font-size: .86rem;
    line-height: 1.65;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: rgba(251,191,36,.07);
    border: 1px solid rgba(251,191,36,.25);
    border-left: 3px solid #FBBF24;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Ejemplos ── */
.cond-tab-content .ex-block-group { display: flex; flex-direction: column; gap: 22px; }
.cond-tab-content .ex-block       { display: flex; flex-direction: column; gap: 6px; }
.cond-tab-content .ex-block-lbl {
    font-size: .69rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 6px;
}
.cond-tab-content .ex-block-lbl.aff { color: var(--accent-alt); }
.cond-tab-content .ex-block-lbl.neg { color: #F87171; }
.cond-tab-content .ex-block-lbl.q   { color: #FBBF24; }
.cond-tab-content .ex-sent {
    font-size: .88rem; line-height: 1.7; padding: 10px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-default);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Errores comunes ── */
.cond-tab-content .modal-mistake {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.cond-tab-content .modal-m-wrong { font-size: .86rem; color: #F87171; margin-bottom: 7px; }
.cond-tab-content .modal-m-right { font-size: .86rem; color: #34D399; margin-bottom: 9px; }
.cond-tab-content .modal-m-why   { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 900px) {
    .cond-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .cond-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cond-tag  { display: none; }
    #cond-detail-wrap .tense-detail-hdr { padding: 16px 16px 0; }
    #cond-detail-wrap .tense-sub-tabs   { padding: 0 16px; }
    .cond-tab-content                   { padding: 16px; }
}