/**
 * mutation-combinations.css
 * Estilos específicos de la página de Combinaciones de Mutaciones
 * Incluye: hero, filtros, tarjetas expandibles, paginación e info
 */

:root {
    --amber: #f59e0b;
    --amber-bg: #fffbeb;
    --amber-border: #fbbf24;
    --amber-text: #92400e;
    --bg-blue-soft: #eff6ff;
    --blue: #2563eb;
    --blue-dark: #1a56db;
    --blue-light: #3b82f6;
    --border: #e2e8f0;
    --green-bg: #ecfdf5;
    --green-border: #34d399;
    --green-text: #065f46;
    --red-bg: #fef2f2;
    --red-border: #f87171;
    --red-text: #991b1b;
    --teal: #0d9488;
    --teal-light: #14b8a6;
    --text: #1e293b;
    --text2: var(--text-secondary, #1f2937);  /* hereda del token global endurecido (casi negro) */
    --violet: #8b5cf6;
}

/* Hero */
.ch{background:linear-gradient(135deg,var(--blue-dark),var(--blue),var(--blue-light));color:#fff;padding:48px 0 38px;position:relative;overflow:hidden}
.ch::before{content:"";position:absolute;top:-50%;right:-15%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 50%)}
.ch h1{font-weight:800;font-size:1.9rem;position:relative;z-index:2}
.ch .lead{opacity:.9;position:relative;z-index:2;font-size:.92rem}
.btn-hero{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:8px 18px;font-weight:600;transition:.3s;text-decoration:none}
.btn-hero:hover{background:#fff;color:var(--blue);border-color:#fff}
.sbar{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:22px;position:relative;z-index:2}
.sp{text-align:center;background:rgba(255,255,255,.1);padding:12px 26px;border-radius:14px;backdrop-filter:blur(10px)}
.sp .sv{font-size:1.7rem;font-weight:800} .sp .sl{font-size:.78rem;opacity:.85}

/* Filters */
.fbar{background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 2px 15px rgba(0,0,0,.05);border:1px solid var(--border);margin-bottom:24px;margin-top:24px}
.fbar .form-control,.fbar .form-select{border:2px solid var(--border);border-radius:10px;font-size:.86rem}
.fbar .btn-primary{background:var(--blue);border:none;border-radius:10px;font-weight:600}
.fbadge{display:inline-flex;align-items:center;gap:4px;background:var(--blue);color:#fff;padding:3px 12px;border-radius:50px;font-size:.74rem;font-weight:600}
.fbadge a{color:#fff;text-decoration:none;font-weight:800}

/* Cards */
.combo-card{
    background:#fff;border:1px solid var(--border);border-radius:14px;
    margin-bottom:16px;overflow:hidden;transition:all .25s;
    border-left:5px solid var(--border);
}
.combo-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
.combo-card.prog-good{border-left-color:var(--green-border)}
.combo-card.prog-intermediate{border-left-color:var(--amber-border)}
.combo-card.prog-poor{border-left-color:var(--red-border)}
.combo-card.prog-unknown{border-left-color:var(--border)}
.combo-card.expanded{box-shadow:0 4px 20px rgba(37,99,235,.12);border-color:var(--blue);border-left-width:5px}
.combo-card.expanded.prog-good{border-left-color:var(--green-border)}
.combo-card.expanded.prog-intermediate{border-left-color:var(--amber-border)}
.combo-card.expanded.prog-poor{border-left-color:var(--red-border)}

/* Card header (always visible) */
.cc-head{padding:16px 20px;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.cc-row1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cc-name{font-weight:700;font-size:1.02rem;color:var(--text);flex-shrink:0}
.cc-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.prog-badge{padding:3px 12px;border-radius:50px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.pb-good{background:var(--green-bg);color:var(--green-text)}
.pb-intermediate{background:var(--amber-bg);color:var(--amber-text)}
.pb-poor{background:var(--red-bg);color:var(--red-text)}
.pb-unknown{background:#f1f5f9;color:var(--text2)}

.act-badge{background:linear-gradient(135deg,var(--teal),var(--teal-light));color:#fff;padding:2px 10px;border-radius:50px;font-size:.68rem;font-weight:700}
.ev-badge{background:#dbeafe;color:#1e40af;padding:2px 9px;border-radius:50px;font-size:.68rem;font-weight:600}
.prev-text{font-size:.78rem;color:var(--text2)}
.prev-text i{color:var(--amber)}

.cc-chevron{color:var(--text2);transition:transform .3s;font-size:.9rem}
.combo-card.expanded .cc-chevron{transform:rotate(180deg);color:var(--blue)}

.cc-row2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gc{background:var(--bg-blue-soft);color:var(--blue);padding:2px 10px;border-radius:50px;font-size:.72rem;font-weight:600}

.cc-row3{font-size:.84rem;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Expanded details */
.cc-details{display:none;padding:0 20px 18px;border-top:1px dashed var(--border);margin-top:0}
.cc-details.show{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.det-block h6{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:8px;font-weight:700}
.det-block p{font-size:.86rem;color:var(--text);line-height:1.55;margin:0}
.det-note{margin-top:8px;font-size:.82rem;color:var(--text2);font-style:italic}

.tc{display:inline-block;padding:4px 12px;border-radius:8px;font-size:.76rem;font-weight:600;margin:2px}
.tc-rec{background:var(--green-bg);color:var(--green-text);border:1px solid #a7f3d0}
.tc-avoid{background:var(--red-bg);color:var(--red-text);border:1px solid #fecaca}

.det-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.cat-tag{font-size:.8rem;color:var(--text2)} .cat-tag i{color:var(--violet)}
.btn-det{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:.8rem;font-weight:600;text-decoration:none;transition:.2s}
.btn-det:hover{background:var(--blue-dark);color:#fff}

/* Pagination */
.pwrap{display:flex;justify-content:center;margin:30px 0}
.pagination .page-link{border:2px solid var(--border);color:var(--text);margin:0 2px;border-radius:8px;font-weight:600;font-size:.85rem}
.pagination .page-link:hover{border-color:var(--blue);color:var(--blue)}
.pagination .active .page-link{background:var(--blue);border-color:var(--blue);color:#fff}

/* Info */
.icard{background:#fff;border-radius:16px;padding:24px;border:1px solid var(--border);margin-bottom:30px}
.icard h5{font-weight:700;color:var(--text)}

.no-results{text-align:center;padding:60px 20px;background:#fff;border-radius:16px;border:1px solid var(--border)}
.no-results i{font-size:3rem;color:var(--text2)}

@media(max-width:768px){
    .ch h1{font-size:1.4rem}
    .cc-row1{flex-direction:column;align-items:flex-start}
    .cc-right{margin-top:8px;gap:6px}
    .cc-right .prog-badge,.cc-right .act-badge,.cc-right .ev-badge,.cc-right .prev-text{font-size:.65rem}
    .det-grid{grid-template-columns:1fr}
    .cc-head{padding:12px 14px}
    .cc-name{font-size:.95rem}
}