/* /fits/fits.css · biblioteca de fiteos y skill plans. Solo maquetación propia; tokens en /tools/theme.css.
   El cian (--holo) se usa ÚNICAMENTE para el efecto holograma de las naves. */
.bx-fits-tabs { margin: 0 0 1rem; }
.bx-fits-tabs .bx-seg__btn { color: var(--c-muted); }
.bx-seg__btn:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209,52,56,.55); }

/* ==========================================================================
   Holograma (CSS puro): tinte cian + líneas de barrido + brillo + mesa de proyección.
   <span class="bx-holo [bx-holo--sm|--md]"><img class="bx-holo__img" …><span class="bx-holo__ring"></span></span>
   ========================================================================== */
.bx-holo {   /* sin isolation: el screen de la imagen se funde con el fondo de la tarjeta (que sí aísla) */
  --holo: 95,212,255;
  position: relative; display: grid; place-items: center; flex: none;
  width: min(100%, 190px); aspect-ratio: 1; margin-inline: auto;
}
.bx-holo::before {   /* haz de luz que sube desde la mesa */
  content: ""; position: absolute; left: 18%; right: 18%; top: 12%; bottom: 13%; z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(var(--holo),.2), transparent 70%),
              linear-gradient(to top, rgba(var(--holo),.16), transparent 75%);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.bx-holo__img {   /* render CCP sobre negro: screen quita el fondo; sepia + hue-rotate lo tiñen de cian */
  display: block; width: 84%; height: auto; max-width: none; aspect-ratio: 1; object-fit: contain;
  transform: translateY(-7%);
  mix-blend-mode: screen; opacity: .9;
  filter: grayscale(1) sepia(1) hue-rotate(160deg) saturate(2.6) brightness(1.08) contrast(1.05);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
}
.bx-holo::after {   /* líneas de barrido horizontales sobre la nave */
  content: ""; position: absolute; inset: 6% 10% 18%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(var(--holo),.13) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
}
.bx-holo__ring {   /* anillo proyector (elipse) bajo la nave */
  position: absolute; left: 14%; right: 14%; bottom: 6%; height: 16%; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(var(--holo),.7);
  background: radial-gradient(ellipse closest-side, rgba(var(--holo),.45), rgba(var(--holo),.1) 60%, transparent 100%);
  box-shadow: 0 0 16px rgba(var(--holo),.35), inset 0 0 10px rgba(var(--holo),.35);
}
.bx-holo__ring::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%; border: 1px solid rgba(var(--holo),.45); }
.bx-holo--sm { width: 64px; }
.bx-holo--sm .bx-holo__img { width: 78%; transform: translateY(-9%); }
.bx-holo--sm .bx-holo__ring { left: 8%; right: 8%; height: 20%; bottom: 4%; }
.bx-holo--sm .bx-holo__ring::after { display: none; }
.bx-holo--md { width: 112px; }

/* solo al pasar o enfocar: parpadeo + leve giro */
@media (prefers-reduced-motion: no-preference) {
  :is(.bx-holo-card, .bx-fitcard, .bx-fitview__head):is(:hover, :focus-within) .bx-holo__img { animation: bx-holo-flicker 1.6s ease-in-out infinite; }
  :is(.bx-holo-card, .bx-fitcard, .bx-fitview__head):is(:hover, :focus-within) .bx-holo__ring { animation: bx-holo-ring 1.6s ease-in-out infinite; }
}
@keyframes bx-holo-flicker {
  0%, 100% { opacity: .9; transform: translateY(-7%) perspective(500px) rotateY(0); }
  8%       { opacity: .55; }
  11%      { opacity: .95; }
  50%      { opacity: .9; transform: translateY(-9%) perspective(500px) rotateY(9deg); }
  53%      { opacity: .65; }
  56%      { opacity: .92; }
}
@keyframes bx-holo-ring { 50% { box-shadow: 0 0 24px rgba(var(--holo),.55), inset 0 0 14px rgba(var(--holo),.5); } }
@media (prefers-reduced-motion: reduce) { .bx-holo__img, .bx-holo__ring { animation: none !important; } }

/* ---- Fits recomendados (doctrina B49) sobre la mesa holográfica ---- */
.bx-recos {
  position: relative; isolation: isolate; overflow: hidden; margin: 0 0 1.2rem; padding: 1.1rem 1rem 1.2rem;
  border: 1px solid var(--c-line); border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(13,17,23,.9), rgba(13,17,23,.78) 50%, rgba(13,17,23,.92)),
    url('/tools/media/bg/holograma-mesa-800.webp') center / cover no-repeat,
    var(--c-card);
}
.bx-recos::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; }
.bx-recos__head h2 { margin: .3rem 0 .2rem; }
.bx-recos__head p:last-child { margin: 0 0 .8rem; font-size: .92rem; }
.bx-recos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.bx-holo-card { margin: 0; }
.bx-holo-card__in {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; height: 100%; padding: .6rem .6rem .8rem; text-align: center;
  color: var(--c-text); text-decoration: none; background: rgba(10,14,19,.72); border: 1px solid var(--c-line-2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color var(--t-fast), background var(--t-fast);
}
a.bx-holo-card__in:hover { color: var(--c-text); border-color: rgba(95,212,255,.6); background: rgba(10,14,19,.85); }
a.bx-holo-card__in:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: none; }
.bx-holo-card .bx-holo { width: min(100%, 170px); }
.bx-holo-card h3 { margin: 0; font-size: 1.05rem; }
.bx-holo-card .bx-label { font-size: .6rem; letter-spacing: .12em; }
.bx-holo-card__fit { font-size: .82rem; color: var(--c-red-txt); line-height: 1.3; }
.bx-holo-card__fit .bx-ico { color: var(--c-ok); }
.bx-holo-card__soon { margin-top: .15rem; padding: .25rem .5rem; border: 1px solid rgba(242,177,60,.5); border-radius: 3px; background: rgba(242,177,60,.1); color: var(--c-warn); }
.bx-holo-card.is-soon .bx-holo { opacity: .7; }
@media (min-width: 640px) { .bx-recos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 861px) {
  .bx-recos { padding: 1.3rem 1.4rem 1.4rem; background-image: linear-gradient(180deg, rgba(13,17,23,.9), rgba(13,17,23,.75) 50%, rgba(13,17,23,.92)), url('/tools/media/bg/holograma-mesa-1600.webp'); }
}
@media (min-width: 1000px) { .bx-recos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- guardar un fit ---- */
.bx-newfit > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; min-height: 44px; cursor: pointer; list-style: none; }
.bx-newfit > summary::-webkit-details-marker { display: none; }
.bx-newfit > summary h2 { margin: 0; font-size: 1.2rem; }
.bx-newfit[open] > summary { margin-bottom: .9rem; }
.bx-fit-detect { margin: -.4rem 0 0; min-height: 1.2em; color: var(--c-muted); }
.bx-fit-detect.is-ok { color: var(--c-ok); }
.bx-fit-detect.is-bad { color: var(--c-warn); }
.bx-note-input { font-family: var(--f-sans); }
.bx-tag-sugg { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.4rem; }

/* chips de etiqueta */
.bx-chip--btn { min-height: 36px; cursor: pointer; background: transparent; font: inherit; font-size: .78rem; font-weight: 700; }
.bx-chip--btn:hover, a.bx-chip:hover { border-color: var(--c-red); color: var(--c-text); background: var(--c-red-a); }
a.bx-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; text-decoration: none; margin-right: .25rem; }
.bx-chip.is-on { border-color: var(--c-red); color: #fff; background: var(--c-red); }
.bx-chip small { opacity: .75; font-family: var(--f-mono); }
.bx-fit-tags { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bx-tagcloud { margin-top: .8rem; }
.bx-doctrine { display: inline-flex; align-items: center; gap: .3rem; font: 700 .66rem/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 3px; color: var(--c-ok); background: rgba(60,207,142,.12); border: 1px solid rgba(60,207,142,.5); }

/* filtros y listado */
.bx-filters { display: grid; grid-template-columns: 2fr 1.5fr auto auto auto; gap: .8rem 1rem; align-items: end; }
.bx-filters .bx-field--check { min-height: 44px; }
.bx-list-title { margin: 1.4rem 0 .6rem; font: 600 .74rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.bx-fit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .9rem; }
.bx-fitcard { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem; border-radius: var(--r); background: var(--c-card); border: 1px solid var(--c-line); transition: border-color var(--t-fast); }
.bx-fitcard::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; }
.bx-fitcard:hover, .bx-fitcard:focus-within { border-color: var(--c-line-2); }
.bx-fitcard.is-doctrine { border-color: rgba(60,207,142,.5); }
.bx-fitcard.is-doctrine::before { background: var(--c-ok); }
.bx-fitcard header { display: flex; gap: .7rem; align-items: center; }
.bx-fitcard header > div { min-width: 0; }
.bx-fitcard h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.bx-fitcard h3 a { color: var(--c-text); text-decoration: none; }
.bx-fitcard h3 a:hover { color: var(--c-red-txt); }
.bx-fitcard p { margin: 0; }
.bx-fitcard__note { color: var(--c-muted); }
.bx-fitcard footer { margin-top: auto; padding-top: .4rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* vista de un fit */
.bx-fitview__head { position: relative; isolation: isolate; background: var(--c-card); display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.bx-fitview__head .bx-holo { margin: 0; }
.bx-fitview__head h2 { margin: 0; }
.bx-fitview__head p { margin: .15rem 0 0; }
.bx-fit-note { white-space: normal; background: var(--c-bg-2); border-left: 3px solid var(--c-red); padding: .6rem .8rem; border-radius: var(--r-sm); }
.bx-fit-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 .4rem; }
.bx-eft { font: .88rem/1.45 var(--f-mono); color: var(--c-text); background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: .8rem 1rem; overflow: auto; max-height: 32rem; white-space: pre; margin: .6rem 0 0; }
.bx-eft--sm { font-size: .78rem; max-height: 14rem; }
.bx-fit-owner { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--c-line); }
.bx-inline { display: inline; margin: 0; }
.bx-danger:hover { border-color: var(--c-bad) !important; color: var(--c-bad) !important; background: rgba(255,107,107,.1) !important; }

/* importar desde el juego */
.bx-esi-head { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem 1rem; align-items: end; margin: .8rem 0; }
.bx-esi-ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .3rem; max-height: 26rem; overflow: auto; }
.bx-esi-ul li { padding: .35rem .6rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg-2); }
.bx-esi-ul details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.bx-pager { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0; }
.bx-pager .bx-seg__btn { min-width: 44px; font-family: var(--f-mono); border: 1px solid var(--c-line-2); }
.bx-toast {
  position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 60; max-width: 92vw;
  background: var(--c-card-2); border: 1px solid var(--c-line-2); border-left: 3px solid var(--c-ok); color: var(--c-text);
  padding: .6rem 1rem; border-radius: var(--r-sm); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.bx-toast.is-bad { border-left-color: var(--c-bad); }

/* skill plans */
.bx-plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.bx-plan-grid > .bx-panel { margin: 0; }
.bx-plan-sum { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .6rem 0; }
.bx-plan-sum b { font: 700 1.25rem/1.2 var(--f-mono); color: var(--c-text); font-variant-numeric: tabular-nums; }
.bx-plan-table td:nth-child(n+2) { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.bx-plan-table td.ok { color: var(--c-ok); }
.bx-plan-table td.lv { color: var(--c-red-txt); }
.bx-plan-table tr.is-have td { opacity: .5; }
.bx-plan-out { width: 100%; min-height: 12rem; }
.bx-plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.bx-plan-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .55rem .75rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg-2); }
@media (max-width: 860px) {
  .bx-filters, .bx-esi-head, .bx-plan-grid { grid-template-columns: 1fr; }
}