/* ============================================
   HERRAMIENTAS (cacería, rotación, calculadoras, investigación)
   Se carga solo en las páginas que lo necesitan ($extra_css).
   ============================================ */

/* ---------- Pestañas ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tabs button, .tabs a {
    appearance: none; border: 0; cursor: pointer; text-decoration: none;
    padding: 0.55rem 1rem; border-radius: 9px; background: none;
    font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--gray-400); transition: background-color var(--duration-fast), color var(--duration-fast);
}
.tabs button:hover, .tabs a:hover { color: var(--white); }
.tabs .is-active { background: var(--grad); color: var(--white); box-shadow: 0 6px 18px -8px var(--accent-glow); }

[data-panel][hidden] { display: none !important; }

/* ---------- Ficha de monstruo ---------- */
.monster-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
@media (min-width: 960px) { .monster-hero { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

.monster-hero__media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line-strong); background: var(--gray-900);
    box-shadow: 0 40px 100px -50px rgba(255, 45, 85, 0.55);
}
.monster-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 983 / 602; object-fit: cover; }
.monster-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 7, 11, 0.85)); pointer-events: none; }
.monster-hero__badge { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts > div { background: var(--gray-950); padding: 0.9rem 1rem; }
.facts small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 0.2rem; }
.facts strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); }
.facts .is-magic { color: #b69cff; }
.facts .is-physical { color: #ffb36b; }
.facts .is-easy { color: var(--online); }
.facts .is-hard { color: #ff7b89; }

/* ---------- Alineaciones ---------- */
.lineup { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.lineup__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.lineup__head h3 { font-size: 1.15rem; }
.lineup__heroes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.hero-chip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; min-width: 0; }
.hero-chip img {
    width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 16px; object-fit: cover;
    border: 1px solid var(--line-strong); background: var(--gray-800);
    image-rendering: auto;
}
.hero-chip span { font-size: 0.78rem; font-weight: 700; color: var(--gray-100); line-height: 1.2; hyphens: auto; }
.hero-chip small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--gray-500); }

.tip { display: flex; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.tip + .tip { margin-top: 0.6rem; }
.tip__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tip p { margin: 0; color: var(--gray-300); }
.tip strong { display: block; font-family: var(--font-display); color: var(--white); margin-bottom: 0.15rem; }

/* ---------- Rejilla de monstruos ---------- */
.monster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.monster-card { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--gray-900); text-decoration: none; transition: transform var(--duration-base) var(--ease-out-expo), border-color var(--duration-base); }
.monster-card:hover { transform: translateY(-3px); border-color: rgba(255, 59, 79, 0.45); }
.monster-card img { display: block; width: 100%; aspect-ratio: 983 / 602; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out-expo); }
.monster-card:hover img { transform: scale(1.06); }
.monster-card__body { padding: 0.6rem 0.75rem 0.75rem; }
.monster-card__body strong { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--white); line-height: 1.2; }
.monster-card__body small { font-size: 0.72rem; color: var(--gray-500); }
.monster-card .dot { position: absolute; top: 0.5rem; right: 0.5rem; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
.dot--magico { background: #b69cff; } .dot--fisico { background: #ffb36b; } .dot--mixto { background: var(--gray-200); }
.monster-card.is-today { border-color: rgba(53, 224, 138, 0.6); }
.monster-card.is-today::before { content: 'Hoy'; position: absolute; top: 0.45rem; left: 0.45rem; z-index: 1; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--online); color: #04130b; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Rotación hoy / mañana ---------- */
.rotation-now { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 768px) { .rotation-now { grid-template-columns: 1fr 1fr; } }
.rotation-day { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.rotation-day__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.9rem; }
.rotation-list { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rotation-list th, .rotation-list td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
.rotation-list th { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); font-weight: 600; }
.rotation-list td a { color: var(--white); text-decoration: none; font-weight: 700; }
.rotation-list td a:hover { color: var(--accent); }
.rotation-list tr.is-today td { background: rgba(53, 224, 138, 0.06); }
.rotation-list tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--online); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* ---------- Estudio (barras) ---------- */
.study-bars { display: grid; gap: 0.9rem; }
.study-bar__label { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--gray-300); }
.study-bar__label b { color: var(--white); font-family: var(--font-display); }
.study-bar__track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; display: flex; gap: 2px; }
.study-bar__fill { height: 100%; border-radius: 99px; background: var(--grad); }
.study-compare { width: 100%; border-collapse: collapse; }
.study-compare th, .study-compare td { padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--line); text-align: center; }
.study-compare th:first-child, .study-compare td:first-child { text-align: left; }
.study-compare th { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.study-compare td { font-family: var(--font-display); color: var(--gray-200); }
.study-compare td.win { color: var(--online); font-weight: 700; }

/* ---------- Formularios de calculadora ---------- */
.calc { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: start; }
.calc > * { min-width: 0; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.15fr 0.85fr; } .calc__result { position: sticky; top: calc(var(--header-height) + 20px); } }
.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field > span { font-size: 0.85rem; font-weight: 700; color: var(--gray-300); }
.field > span small { font-weight: 500; color: var(--gray-500); }
.field input, .field select {
    width: 100%; padding: 0.8rem 0.9rem; border-radius: 11px; border: 1px solid var(--line-strong);
    background: rgba(0, 0, 0, 0.35); color: var(--white); font: inherit; font-size: 1.05rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
    display: block; text-align: center; padding: 0.7rem 0.5rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.25);
    font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--gray-300);
    transition: all var(--duration-fast);
}
.segmented input:checked + span { background: var(--grad); border-color: transparent; color: var(--white); box-shadow: 0 6px 18px -8px var(--accent-glow); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.result-big { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 700; color: var(--white); line-height: 1.1; }
.res-list { list-style: none; display: grid; gap: 0.45rem; margin-top: 1rem; }
.res-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.res-list img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.res-list span { flex: 1; color: var(--gray-300); font-weight: 600; }
.res-list b { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); }
.res-list li.is-zero { opacity: 0.4; }

/* ---------- Árbol de investigación ---------- */
.branch-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.branch-tab {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 14px; cursor: pointer; text-align: left;
    border: 1px solid var(--line); background: var(--surface); color: var(--gray-200); font: inherit;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.branch-tab img { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.branch-tab strong { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--white); line-height: 1.15; }
.branch-tab small { font-size: 0.72rem; color: var(--gray-500); }
.branch-tab:hover { border-color: var(--line-strong); }
.branch-tab.is-active { border-color: rgba(255, 59, 79, 0.6); background: rgba(255, 59, 79, 0.08); }

.tree-wrap { overflow-x: auto; padding: 1rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(600px circle at 50% 0%, rgba(255, 45, 85, 0.08), transparent 70%), var(--gray-950); }
.tree { position: relative; margin: 0 auto; }
.tree svg.tree__lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tree__lines line { stroke: rgba(255, 255, 255, 0.14); stroke-width: 2; }
.tree__lines line.is-done { stroke: var(--accent); }
.node {
    position: absolute; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--gray-300); font: inherit;
}
.node__img { position: relative; width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--gray-800); overflow: hidden; transition: border-color var(--duration-fast), transform var(--duration-fast); }
.node__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) brightness(0.7); transition: filter var(--duration-fast); }
.node__name { font-size: 0.66rem; font-weight: 700; line-height: 1.15; text-align: center; max-width: 84px; }
.node__books { font-size: 0.62rem; color: var(--gray-500); }
.node:hover .node__img { transform: translateY(-2px); border-color: var(--gray-500); }
.node.is-done .node__img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.node.is-done .node__img img { filter: none; }
.node.is-done .node__img::after { content: '✓'; position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: var(--white); font-size: 0.7rem; font-weight: 800; }
.node.is-locked { cursor: not-allowed; }
.node:focus-visible .node__img { outline: 2px solid var(--accent); outline-offset: 2px; }

.progress { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.progress > div { height: 100%; background: var(--grad); border-radius: 99px; transition: width var(--duration-base) var(--ease-out-expo); }

/* ---------- Ajustes móvil (al final para que prevalezcan) ---------- */
@media (max-width: 520px) {
    .facts > div { padding: 0.7rem 0.6rem; }
    .facts small { font-size: 0.6rem; letter-spacing: 0.06em; }
    .facts strong { font-size: 0.88rem; }
    .lineup__heroes { grid-template-columns: 1fr; gap: 0.4rem; }
    .hero-chip { flex-direction: row; text-align: left; gap: 0.75rem; padding: 0.35rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
    .hero-chip img { width: 44px; border-radius: 11px; }
    .hero-chip span { font-size: 0.9rem; }
    .hero-chip small { display: inline; margin-left: 0.4rem; font-size: 0.75rem; }
}

/* ---------- Barra de copiar alineación ---------- */
.copy-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px dashed rgba(255, 59, 79, 0.45); background: rgba(255, 59, 79, 0.05); }
.copy-bar > div:first-child { display: grid; gap: 0.15rem; flex: 1 1 260px; }
.copy-bar strong { font-family: var(--font-display); color: var(--white); }

/* ---------- Simulador de equipos ---------- */
.grade--common { --g: #8a8a8a; } .grade--uncommon { --g: #4ade80; } .grade--rare { --g: #60a5fa; }
.grade--epic { --g: #a78bfa; } .grade--legendary { --g: #fbbf24; } .grade--mythic { --g: #ff4545; }
.segmented--grades { grid-template-columns: repeat(3, 1fr); }
.segmented--grades input:checked + span { background: var(--g); color: #0b0b0f; box-shadow: none; }
.segmented--grades span { border-color: color-mix(in srgb, var(--g) 45%, transparent); color: var(--g); }

.gear-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 1200px) { .gear-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gear-slot { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.gear-slot.is-set { border-color: color-mix(in srgb, var(--g) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--g) 10%, transparent), var(--surface)); }
.gear-slot__main { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gear-slot__main:hover .gear-slot__img { transform: translateY(-2px); }
.gear-slot__img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-strong); transition: transform var(--duration-fast); }
.gear-slot__img img { width: 100%; height: 100%; object-fit: cover; }
.gear-slot__txt { min-width: 0; display: grid; gap: 0.1rem; }
.gear-slot__txt small { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); }
.gear-slot__txt strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--white); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-slot__txt em { font-style: normal; font-size: 0.75rem; font-weight: 700; color: var(--g); }
.gear-slot__jewels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0 0.7rem 0.7rem; }
.jewel-socket { height: 38px; border-radius: 10px; border: 1px dashed var(--line-strong); background: rgba(0, 0, 0, 0.25); color: var(--gray-500); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: border-color var(--duration-fast); }
.jewel-socket:hover { border-color: var(--accent); color: var(--white); }
.jewel-socket.is-set { border-style: solid; border-color: color-mix(in srgb, var(--g) 60%, transparent); background: color-mix(in srgb, var(--g) 12%, transparent); }
.jewel-socket img { width: 28px; height: 28px; object-fit: contain; }

.stat-group + .stat-group { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.stat-group__title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.35rem; }
.stat-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.22rem 0; font-size: 0.92rem; color: var(--gray-300); }
.stat-row b { font-family: var(--font-display); color: var(--white); }
[data-stats] { transition: opacity var(--duration-fast); }

.picker { width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--gray-950); color: var(--gray-300); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9); }
.picker::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
.picker__inner { display: flex; flex-direction: column; max-height: min(86vh, 760px); padding: 1.1rem 1.2rem; }
.picker__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.8rem; }
.picker__close { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.picker__list { flex: 1; overflow-y: auto; display: grid; gap: 0.35rem; padding-right: 0.25rem; min-height: 120px; }
.picker__foot { display: flex; justify-content: flex-end; padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px solid var(--line); }
.pick { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.55rem; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }
.pick.is-current { border-color: rgba(255, 59, 79, 0.6); }
.pick[disabled] { opacity: 0.35; cursor: not-allowed; }
.pick img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: rgba(0, 0, 0, 0.3); }
.pick strong { display: block; color: var(--white); font-size: 0.92rem; }
.pick small { font-size: 0.75rem; color: var(--gray-500); }
@media (max-width: 520px) {
    .gear-board { grid-template-columns: 1fr; }
    .segmented--grades { grid-template-columns: repeat(2, 1fr); }
}