/* ============================================================================
   ficha.css — Estilos del módulo "Ficha técnica" (aditivo, no toca lo existente).
   Reusa la línea visual del Cotizador: liquid glass, azul AT&T, bordes suaves.
   ========================================================================== */
:root {
  --ft-brand: #009FDB;
  --ft-brand-strong: #0A73B8;
  --ft-navy: #061F5C;
  --ft-glass: rgba(255, 255, 255, 0.88);
  --ft-text: #0f1830;
  --ft-text-2: #55617a;
  --ft-text-3: #8b95ab;
  --ft-border: rgba(6, 31, 92, 0.10);
  --ft-surface-2: #f3f6fb;
}

/* -------- Botón "Ficha técnica" en la tarjeta (junto a los actuales) -------- */
.card-ficha {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 12px; min-height: 38px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  color: var(--ft-brand-strong);
  background: rgba(0, 159, 219, 0.10);
  border: 1px solid rgba(0, 159, 219, 0.28);
  border-radius: 10px;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.card-ficha svg { width: 15px; height: 15px; flex: 0 0 auto; }
.card-ficha span { white-space: nowrap; }
.card-ficha:hover { background: rgba(0, 159, 219, 0.16); box-shadow: 0 10px 22px -12px rgba(10, 115, 184, .7); }
.card-ficha:active { transform: scale(.97); }
.card-ficha:focus-visible { outline: 2px solid var(--ft-brand); outline-offset: 2px; }
@media (max-width: 520px) { .card-ficha { width: 100%; } }
@media (max-width: 900px) { .cta-row .card-ficha { width: 100%; flex: none; min-height: 42px; } }

/* --------------------------------- Popup ---------------------------------- */
.ficha-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ficha-backdrop { position: absolute; inset: 0; background: rgba(6, 31, 92, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ficha-card {
  position: relative; z-index: 1; width: min(920px, 100%); max-height: 88vh; overflow: hidden;
  background: var(--ft-glass); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(6, 31, 92, 0.35);
  animation: ftIn .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes ftIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ficha-scroll { max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ficha-close {
  position: absolute; top: 12px; right: 14px; z-index: 3; width: 34px; height: 34px; min-height: 34px; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; background: #eef2f8; color: #55617a; font-size: 22px; line-height: 1;
  display: grid; place-items: center; flex: 0 0 auto;
}
.ficha-close:hover { background: #e2e8f2; color: var(--ft-text); }

.ficha-body { display: grid; grid-template-columns: 300px 1fr; gap: 22px; padding: 24px; }

/* Columna de la foto (izquierda) */
.ficha-media { position: sticky; top: 0; align-self: start; }
.ficha-media__box {
  width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--ft-border); border-radius: 18px;
}
.ficha-media__box img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.ficha-media__ph { font-size: 60px; color: #cdd6e6; }
.ficha-media__name { margin-top: 14px; font-size: 18px; font-weight: 700; color: var(--ft-text); line-height: 1.2; }
.ficha-media__meta { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--ft-text-3); }

/* Especificaciones (derecha) */
.ficha-specs { min-width: 0; }
.ft-cat { margin-bottom: 18px; }
.ft-cat:last-child { margin-bottom: 0; }
.ft-cat__t { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-navy); }
.ft-cat__ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 159, 219, 0.10); font-size: 14px; }
.ft-rows { display: flex; flex-direction: column; border: 1px solid var(--ft-border); border-radius: 12px; overflow: hidden; }
.ft-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 13px; background: #fff; }
.ft-row:nth-child(even) { background: var(--ft-surface-2); }
.ft-lbl { font-size: 12.5px; color: var(--ft-text-2); flex: 0 0 auto; }
.ft-val { font-size: 13px; font-weight: 500; color: var(--ft-text); text-align: right; }
.ft-val--na { color: var(--ft-text-3); font-weight: 500; font-style: italic; }

/* Estado "sin ficha" */
.ficha-vacia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 16px; }
.ficha-vacia__ic { font-size: 42px; }
.ficha-vacia__t { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--ft-text); }
.ficha-vacia__s { margin: 0; font-size: 13px; color: var(--ft-text-2); max-width: 34ch; }

/* Botones admin dentro del popup */
.ft-admin-row { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; cursor: pointer; border-radius: 11px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.ft-btn--primary { background: linear-gradient(150deg, var(--ft-brand), var(--ft-brand-strong)); color: #fff; }
.ft-btn--ghost { background: #fff; border-color: var(--ft-border); color: var(--ft-text); }
.ft-btn--ghost:hover { background: var(--ft-surface-2); }

/* Evita scroll del fondo cuando el popup está abierto */
body.ficha-open { overflow: hidden; }

/* --------------------------------- Móvil ---------------------------------- */
@media (max-width: 720px) {
  .ficha-modal { padding: 0; align-items: stretch; }
  .ficha-card { width: 100%; max-height: 100vh; border-radius: 0; }
  .ficha-scroll { max-height: 100vh; }
  .ficha-body { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .ficha-media { position: static; }
  .ficha-media__box { max-width: 200px; margin: 6px auto 0; }
  .ficha-media__name, .ficha-media__meta { text-align: center; }
  .ft-row { flex-direction: column; gap: 1px; align-items: stretch; }
  .ft-val, .ft-val--na { text-align: left; }
}

/* Modo oscuro (si el usuario lo tuviera activo en el futuro) */
html[data-theme="dark"] .ficha-card { --ft-glass: rgba(18, 26, 44, 0.9); --ft-text: #eaf0fb; --ft-text-2: #aeb9d0; --ft-text-3: #7f8bab; --ft-border: rgba(255,255,255,.10); --ft-surface-2: rgba(255,255,255,.05); }
html[data-theme="dark"] .ft-row { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .ficha-close { background: rgba(255,255,255,.08); color: #aeb9d0; }

/* ==========================================================================
   FASE 2 — Editor de captura (admin) + Gestor (tabla) + Toast
   ========================================================================== */
.ft-btn--danger { background: #fff; border-color: rgba(214, 69, 98, .35); color: #d64562; }
.ft-btn--danger:hover { background: rgba(214, 69, 98, .08); }
.ft-btn[disabled] { opacity: .6; cursor: default; }

/* ---------------------------- Modal del editor ---------------------------- */
.fte-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fte-backdrop { position: absolute; inset: 0; background: rgba(6, 31, 92, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fte-card {
  position: relative; z-index: 1; width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ft-glass, #fff); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; box-shadow: 0 30px 70px rgba(6, 31, 92, 0.35);
  animation: ftIn .22s cubic-bezier(.16, 1, .3, 1);
}
.fte-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--ft-border); }
.fte-head__txt { min-width: 0; flex: 1; }
.fte-head__txt h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ft-text); }
.fte-head__txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--ft-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fte-x { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; padding: 0; cursor: pointer; border: none; border-radius: 50%; background: #eef2f8; color: #55617a; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.fte-x:hover { background: #e2e8f2; color: var(--ft-text); }
.fte-estado { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fte-estado .fte-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fte-estado.is-ok { color: #12864a; background: rgba(18, 134, 74, .10); }
.fte-estado.is-warn { color: #c98a12; background: rgba(201, 138, 18, .12); }

.fte-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; }
.fte-cat { margin-bottom: 18px; }
.fte-cat:last-child { margin-bottom: 0; }
.fte-cat__t { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-navy); }
.fte-cat__ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 159, 219, 0.10); font-size: 14px; }
.fte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fte-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fte-field label { font-size: 12px; font-weight: 500; color: var(--ft-text-2); }
.fte-field input[type="text"] { width: 100%; height: 38px; padding: 0 11px; font-size: 13px; color: var(--ft-text); background: #fff; border: 1px solid var(--ft-border); border-radius: 9px; }
.fte-field input[type="text"]:focus { outline: 2px solid var(--ft-brand); outline-offset: 0; border-color: transparent; }
.fte-oblig { color: #d64562; font-weight: 700; }
.fte-field--auto .fte-auto { font-size: 12px; color: var(--ft-text-3); font-style: italic; padding: 9px 11px; background: var(--ft-surface-2); border: 1px dashed var(--ft-border); border-radius: 9px; }
.fte-field--ram, .fte-field--auto { grid-column: 1 / -1; }
.fte-ram-ov { margin-top: 8px; padding: 10px 12px; background: var(--ft-surface-2); border: 1px solid var(--ft-border); border-radius: 10px; }
.fte-ram-ov__h { font-size: 11.5px; font-weight: 600; color: var(--ft-text-3); margin-bottom: 7px; }
.fte-ram-ov__row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fte-ram-ov__row:last-child { margin-bottom: 0; }
.fte-ram-ov__cap { flex: 0 0 62px; font-size: 12px; font-weight: 600; color: var(--ft-text-2); }
.fte-ram-ov__row input { flex: 1; height: 34px; padding: 0 10px; font-size: 12.5px; border: 1px solid var(--ft-border); border-radius: 8px; background: #fff; color: var(--ft-text); }
.fte-hint { margin-top: 5px; font-size: 11.5px; color: var(--ft-text-3); }
.fte-hint b { color: var(--ft-text-2); font-weight: 600; }

.fte-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ft-border); background: rgba(243,246,251,.6); }
.fte-foot__r { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .fte-modal { padding: 0; align-items: stretch; }
  .fte-card { width: 100%; max-height: 100vh; border-radius: 0; }
  .fte-grid { grid-template-columns: 1fr; }
  .fte-head { flex-wrap: wrap; }
  .fte-estado { order: 3; width: 100%; justify-content: center; }
}

/* -------------------------------- Gestor ---------------------------------- */
.fg-wrap { display: flex; flex-direction: column; gap: 14px; }
.fg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fg-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ft-text-2, #55617a); background: #fff; border: 1px solid var(--ft-border, rgba(6,31,92,.1)); border-radius: 999px; }
.fg-chip b { font-weight: 700; color: var(--ft-brand-strong, #0A73B8); }
.fg-chip.is-active { background: var(--ft-brand-strong, #0A73B8); border-color: var(--ft-brand-strong, #0A73B8); color: #fff; }
.fg-chip.is-active b { color: #fff; }
.fg-search { height: 38px; min-width: 200px; padding: 0 13px; font-size: 13px; border: 1px solid var(--ft-border, rgba(6,31,92,.1)); border-radius: 10px; background: #fff; }
.fg-tablewrap { overflow-x: auto; border: 1px solid var(--ft-border, rgba(6,31,92,.1)); border-radius: 14px; }
.fg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fg-table th { text-align: left; padding: 11px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8b95ab; background: #f6f9fd; border-bottom: 1px solid var(--ft-border, rgba(6,31,92,.1)); }
.fg-table td { padding: 11px 14px; border-bottom: 1px solid rgba(6,31,92,.06); vertical-align: middle; }
.fg-table tr:last-child td { border-bottom: none; }
.fg-modelo b { display: block; font-weight: 600; color: #0f1830; }
.fg-modelo span { font-size: 11.5px; color: #8b95ab; }
.fg-caps { color: #55617a; white-space: nowrap; }
.fg-fecha { color: #8b95ab; white-space: nowrap; }
.fg-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.fg-badge--ok { color: #12864a; background: rgba(18, 134, 74, .10); }
.fg-badge--warn { color: #c98a12; background: rgba(201, 138, 18, .12); }
.fg-badge--none { color: #8b95ab; background: rgba(139, 149, 171, .12); }
.fg-acciones { text-align: right; white-space: nowrap; }
.fg-act { cursor: pointer; height: 32px; padding: 0 13px; font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(150deg, var(--ft-brand, #009FDB), var(--ft-brand-strong, #0A73B8)); border: none; border-radius: 8px; }
.fg-act--ghost { margin-left: 6px; color: var(--ft-brand-strong, #0A73B8); background: #fff; border: 1px solid rgba(0,159,219,.28); }
.fg-act:hover { filter: brightness(1.03); }

/* --------------------------------- Toast ---------------------------------- */
.ft-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 10002; max-width: 88vw; padding: 12px 20px; font-size: 13.5px; font-weight: 500; color: #fff; background: rgba(6, 31, 92, 0.94); border-radius: 12px; box-shadow: 0 16px 40px rgba(6,31,92,.4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.ft-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

html[data-theme="dark"] .fte-card { --ft-glass: rgba(18, 26, 44, 0.92); --ft-text: #eaf0fb; --ft-text-2: #aeb9d0; --ft-text-3: #7f8bab; --ft-border: rgba(255,255,255,.10); --ft-surface-2: rgba(255,255,255,.05); }
html[data-theme="dark"] .fte-field input[type="text"], html[data-theme="dark"] .fte-ram-ov__row input { background: rgba(255,255,255,.05); color: #eaf0fb; }
html[data-theme="dark"] .fte-x { background: rgba(255,255,255,.08); color: #aeb9d0; }

/* ==========================================================================
   FASE 3 — Comparador de fichas
   ========================================================================== */
.fcp-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fcp-backdrop { position: absolute; inset: 0; background: rgba(6, 31, 92, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* -------- Picker (elegir equipos) -------- */
.fcp-pick-card {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ft-glass, #fff); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 30px 70px rgba(6,31,92,.35); animation: ftIn .22s cubic-bezier(.16,1,.3,1);
}
.fcp-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.fcp-pick-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ft-text); }
.fcp-pick-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ft-text-3); }
.fcp-pick-tools { padding: 0 20px 12px; }
.fcp-pick-tools .fg-search { width: 100%; }
.fcp-pick-list { overflow-y: auto; padding: 0 20px; display: flex; flex-direction: column; gap: 8px; }
.fcp-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ft-border); border-radius: 12px; background: #fff; }
.fcp-item.is-on { border-color: var(--ft-brand); box-shadow: 0 0 0 2px rgba(0,159,219,.15) inset; }
.fcp-item input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ft-brand); }
.fcp-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fcp-item__txt b { font-size: 13.5px; font-weight: 600; color: var(--ft-text); }
.fcp-item__txt span { font-size: 11.5px; color: var(--ft-text-3); }
.fcp-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ft-border); margin-top: 12px; }
.fcp-count { font-size: 12.5px; color: var(--ft-text-3); font-weight: 500; }

/* -------- Tabla comparativa -------- */
.fcp-card {
  position: relative; z-index: 1; width: min(1000px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ft-glass, #fff); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 30px 70px rgba(6,31,92,.35); animation: ftIn .22s cubic-bezier(.16,1,.3,1);
}
.fcp-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--ft-border); }
.fcp-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ft-text); flex: 1; }
.fcp-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ft-text-2); cursor: pointer; }
.fcp-toggle input { width: 16px; height: 16px; accent-color: var(--ft-brand); }
.fcp-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
.fcp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fcp-table thead th { position: sticky; top: 0; z-index: 2; background: #f6f9fd; padding: 12px 12px; vertical-align: bottom; border-bottom: 1px solid var(--ft-border); }
.fcp-corner { width: 168px; min-width: 140px; }
.fcp-col__box { width: 84px; height: 84px; margin: 0 auto 8px; display: grid; place-items: center; background: #fff; border: 1px solid var(--ft-border); border-radius: 14px; overflow: hidden; }
.fcp-col__box img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.fcp-col__box .ficha-media__ph { font-size: 34px; color: #cdd6e6; }
.fcp-col__name { font-size: 13px; font-weight: 700; color: var(--ft-text); line-height: 1.2; text-align: center; }
.fcp-col__meta { font-size: 11px; color: var(--ft-text-3); text-align: center; }
.fcp-cat__row th { text-align: left; padding: 9px 14px; background: rgba(0,159,219,.07); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ft-navy); }
.fcp-cat__row .ft-cat__ic { margin-right: 8px; vertical-align: middle; }
.fcp-lbl { text-align: left; font-weight: 500; color: var(--ft-text-2); padding: 9px 14px; font-size: 12.5px; width: 168px; background: #fbfcfe; }
.fcp-val { padding: 9px 12px; text-align: center; color: var(--ft-text); font-weight: 500; border-left: 1px solid rgba(6,31,92,.05); }
.fcp-val--na { color: var(--ft-text-3); font-weight: 500; font-style: italic; }
.fcp-table tbody tr { border-bottom: 1px solid rgba(6,31,92,.05); }
.fcp-dif { background: rgba(255, 196, 0, .09); }
.fcp-dif .fcp-lbl { background: rgba(255, 196, 0, .12); }

@media (max-width: 640px) {
  .fcp-modal { padding: 0; align-items: stretch; }
  .fcp-card, .fcp-pick-card { width: 100%; max-height: 100vh; border-radius: 0; }
  .fcp-head { flex-wrap: wrap; }
  .fcp-corner, .fcp-lbl { width: 108px; min-width: 100px; }
  .fcp-col__box { width: 60px; height: 60px; }
}

html[data-theme="dark"] .fcp-card, html[data-theme="dark"] .fcp-pick-card { --ft-glass: rgba(18,26,44,.92); --ft-text: #eaf0fb; --ft-text-2: #aeb9d0; --ft-text-3: #7f8bab; --ft-border: rgba(255,255,255,.10); }
html[data-theme="dark"] .fcp-table thead th, html[data-theme="dark"] .fcp-lbl { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .fcp-item { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .fcp-dif { background: rgba(255,196,0,.10); }

/* ==========================================================================
   FASE 5 — Aviso de equipos sin ficha + contador en la pestaña + responsive
   ========================================================================== */
/* Contador rojo en la pestaña "Fichas" del panel admin (reusa .badge de admin). */
.admin-tabs [data-atab="fichas"] { position: relative; }
.fichas-badge { margin-left: 7px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #8b95ab; border-radius: 999px; vertical-align: middle; }
.fichas-badge.is-nuevos { background: #e0803a; box-shadow: 0 0 0 3px rgba(224,128,58,.18); }

/* Aviso dentro del gestor. */
.fg-aviso { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(139,149,171,.28); border-radius: 14px; background: rgba(139,149,171,.07); }
.fg-aviso.is-nuevos { border-color: rgba(224,128,58,.4); background: linear-gradient(180deg, rgba(224,128,58,.10), rgba(224,128,58,.05)); }
.fg-aviso__ic { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.fg-aviso__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-aviso__txt b { font-size: 14px; font-weight: 700; color: var(--ft-text, #0f1830); }
.fg-aviso__txt span { font-size: 12.5px; color: var(--ft-text-2, #55617a); }
.fg-aviso__acc { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fg-aviso__acc .ft-btn { height: 36px; padding: 0 14px; font-size: 12.5px; }

/* Pulidos responsive del gestor (móvil): buscador a lo ancho y acciones cómodas. */
@media (max-width: 640px) {
  .fg-head { flex-direction: column; align-items: stretch; }
  .fg-search { width: 100%; min-width: 0; }
  .fg-filtros { justify-content: flex-start; }
  .fg-table { font-size: 12.5px; }
  .fg-table th, .fg-table td { padding: 9px 10px; }
  .fg-act { height: 30px; padding: 0 10px; font-size: 12px; }
  .fg-act--ghost { margin-left: 4px; }
  .fg-aviso { flex-wrap: wrap; }
  .fg-aviso__acc { width: 100%; justify-content: stretch; }
  .fg-aviso__acc .ft-btn { flex: 1; }
}

/* Editor: pie apilado y a lo ancho en pantallas chicas (evita botones apretados). */
@media (max-width: 640px) {
  .fte-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .fte-foot__r { flex-direction: column-reverse; }
  .fte-foot .ft-btn, .fte-foot__r .ft-btn { width: 100%; }
  .fte-scroll { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Comparador: cabecera del modal cómoda al envolver en móvil. */
@media (max-width: 640px) {
  .fcp-head { gap: 8px 12px; padding: 12px 16px; }
  .fcp-head h3 { flex-basis: 100%; font-size: 16px; }
  .fcp-head .ft-btn { height: 34px; padding: 0 12px; font-size: 12px; }
  .fcp-pick-foot { flex-wrap: wrap; }
}

html[data-theme="dark"] .fg-aviso { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .fg-aviso.is-nuevos { background: rgba(224,128,58,.12); border-color: rgba(224,128,58,.4); }

/* ==========================================================================
   Reorganización de botones de la tarjeta (Opción A):
   fila con [Consultar precios] [Ficha técnica] arriba y [Cotizar equipo] ancho abajo.
   Va al final (última hoja cargada) para ganar la cascada sin !important.
   ========================================================================== */
.cta-row { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.cta-info { display: flex; gap: 8px; align-items: stretch; }
.cta-info .card-consultar, .cta-info .card-ficha { flex: 1 1 0; min-width: 0; width: auto; min-height: 40px; }
.cta-info .card-consultar span, .cta-info .card-ficha span { overflow: hidden; text-overflow: ellipsis; }
.cta-row > .card-cta { flex: none; width: 100%; min-height: 44px; margin-top: 0; }
@media (max-width: 620px) {
  .cta-info { flex-direction: column; }
  .cta-info .card-consultar, .cta-info .card-ficha { width: 100%; flex: none; min-height: 42px; }
}

/* ==========================================================================
   REDISEÑO v2 — Popup de ficha (encabezado + barra de acciones fija + datos
   clave + categorías en 2 columnas). Aditivo: sólo aplica a .ficha-card--v2.
   ========================================================================== */
.ficha-card--v2{position:relative;display:flex;flex-direction:column;max-height:90vh;padding:0}
.ficha-card--v2::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--fk-brand,var(--ft-brand,#009FDB));z-index:3}
.ficha-card--v2 .ficha-scroll{max-height:none;flex:1 1 auto;min-height:0}

.fk-head{display:flex;align-items:center;gap:14px;padding:16px 18px 14px;border-bottom:1px solid var(--ft-border,rgba(6,31,92,.1))}
.fk-thumb{width:54px;height:54px;flex:0 0 auto;border-radius:13px;overflow:hidden;background:#fff;
  border:1px solid var(--ft-border,rgba(6,31,92,.1));display:grid;place-items:center}
.fk-thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.fk-thumb .ficha-media__ph{font-size:26px;color:#cdd6e6}
.fk-htext{flex:1;min-width:0}
.fk-name{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--ft-text)}
.fk-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--ft-text-3)}
.fk-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.fk-pill .fk-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.fk-pill--ok{color:#12864a;background:rgba(18,134,74,.10)}
.fk-pill--warn{color:#c98a12;background:rgba(201,138,18,.13)}
.ficha-card--v2 .ficha-close{position:static;flex:0 0 auto}

.fk-toolbar{display:flex;align-items:center;gap:9px;padding:11px 18px;flex-wrap:wrap;
  border-bottom:1px solid var(--ft-border,rgba(6,31,92,.08))}
.fk-spring{flex:1 1 auto;min-width:8px}
.ft-btn--admin{background:var(--ft-surface-2,#f2f6fb);border:1px solid var(--ft-border,rgba(6,31,92,.1));color:var(--ft-brand-strong,#0A73B8)}
.ft-btn--admin:hover{filter:brightness(.99)}
.fk-adm{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--ft-navy,#0A2E5C);padding:2px 6px;border-radius:6px;margin-left:7px}

.fk-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 18px 2px}
.fk-key{background:var(--ft-surface-2,#f4f7fb);border:1px solid var(--ft-border,rgba(6,31,92,.08));
  border-radius:13px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.fk-key__ic{font-size:15px;line-height:1;margin-bottom:5px}
.fk-key__l{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ft-text-3,#8b95ab)}
.fk-key__v{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ft-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fk-body{padding:14px 18px 20px}
.fk-cats{columns:2;column-gap:14px}
.fk-cats .ft-cat{break-inside:avoid;margin:0 0 14px;border:1px solid var(--ft-border,rgba(6,31,92,.1));border-radius:12px;overflow:hidden}
.fk-cats .ft-cat__t{margin:0;padding:9px 12px;background:var(--ft-surface-2,#f4f7fb);
  border-bottom:1px solid var(--ft-border,rgba(6,31,92,.08));font-size:11.5px}
.fk-cats .ft-rows{border:none;border-radius:0}
.fk-cats .ft-row{padding:7px 12px;font-size:12px}

@media (max-width:720px){
  .fk-keys{grid-template-columns:repeat(2,1fr)}
  .fk-cats{columns:1}
  .fk-toolbar .ft-btn{flex:1 1 auto;justify-content:center}
  .fk-spring{display:none}
}
html[data-theme="dark"] .fk-thumb{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .fk-pill--ok{color:#4ed08a;background:rgba(78,208,138,.14)}
html[data-theme="dark"] .fk-pill--warn{color:#e7b24b;background:rgba(231,178,75,.16)}

/* ==========================================================================
   REDISEÑO v2 — Picker de comparación (buscador + filtro por marca + tarjetas
   con foto + bandeja de selección). Aditivo: .fcp-pick-card--v2.
   ========================================================================== */
.fcp-pick-card--v2{width:min(680px,100%)}
/* Marcas: una sola fila con scroll horizontal (carrusel) cuando no caben. */
.fcp-fchips{display:flex;flex:0 0 auto;gap:7px;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding:2px 20px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fcp-fchips::-webkit-scrollbar{display:none}
.fcp-fchip{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ft-text-2,#55617a);background:var(--ft-glass,#fff);
  border:1px solid var(--ft-border,rgba(6,31,92,.12));border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.fcp-fchip[aria-pressed="true"]{background:var(--ft-navy,#0A2E5C);border-color:var(--ft-navy,#0A2E5C);color:#fff}
.fcp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;padding:2px 20px 10px;overflow-y:auto;flex:1 1 auto;min-height:0}
.fcp-dev{position:relative;text-align:left;background:var(--ft-glass,#fff);border:1.5px solid var(--ft-border,rgba(6,31,92,.12));
  border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:8px;color:var(--ft-text);cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.fcp-dev:hover{transform:translateY(-2px)}
.fcp-dev.is-on{border-color:var(--ft-brand,#009FDB);box-shadow:0 0 0 3px rgba(0,159,219,.16)}
.fcp-dev__ph{height:78px;min-height:78px;flex:0 0 78px;border-radius:10px;background:var(--ft-surface-2,#f4f7fb);display:grid;place-items:center;overflow:hidden}
.fcp-dev__ph img{max-width:100%;max-height:100%;object-fit:contain;padding:6px}
.fcp-dev__ph .ficha-media__ph{font-size:30px;color:#cdd6e6}
.fcp-dev__n{font-size:13px;font-weight:700;line-height:1.15;color:var(--ft-text)}
.fcp-dev__m{font-size:11px;color:var(--ft-text-3,#8b95ab)}
.fcp-check{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;background:var(--ft-glass,#fff);
  border:1.5px solid var(--ft-border,rgba(6,31,92,.12));display:grid;place-items:center;color:transparent;font-weight:700;font-size:13px}
.fcp-dev.is-on .fcp-check{background:linear-gradient(150deg,var(--ft-brand,#009FDB),var(--ft-brand-strong,#0A73B8));border-color:transparent;color:#fff}
.fcp-devpill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;align-self:flex-start}
.fcp-devpill.ok{color:#12864a;background:rgba(18,134,74,.10)}
.fcp-devpill.warn{color:#c98a12;background:rgba(201,138,18,.13)}
.fcp-tray{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--ft-border,rgba(6,31,92,.12));flex-wrap:wrap}
.fcp-tray__chips{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto;min-width:120px}
.fcp-tray__empty{color:var(--ft-text-3,#8b95ab);font-size:12.5px}
.fcp-tchip{display:inline-flex;align-items:center;gap:7px;background:var(--ft-surface-2,#f4f7fb);
  border:1px solid var(--ft-border,rgba(6,31,92,.12));border-radius:999px;padding:5px 6px 5px 11px;font-size:12px;font-weight:600;color:var(--ft-text)}
.fcp-tchip{align-items:center}
.fcp-tchip button{border:none;background:var(--ft-border,rgba(6,31,92,.15));color:var(--ft-text-2,#55617a);width:18px !important;height:18px !important;min-width:18px !important;min-height:18px !important;max-height:18px !important;flex:0 0 18px;align-self:center;padding:0 !important;box-sizing:border-box;border-radius:50%;font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer}
.fcp-count{font-size:12px;color:var(--ft-text-3,#8b95ab);font-weight:600;white-space:nowrap}
@media (max-width:640px){ .fcp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} }

/* v2 — Comparación: "mejor por fila" (dato objetivo ganador) */
.fcp-val.fcp-win{color:#12864a;font-weight:700;background:rgba(18,134,74,.10)}
.fcp-val .fcp-win__ic{margin-left:4px;color:#12864a;font-weight:700}
html[data-theme="dark"] .fcp-val.fcp-win{color:#4ed08a;background:rgba(78,208,138,.14)}
html[data-theme="dark"] .fcp-val .fcp-win__ic{color:#4ed08a}

/* v2 — Iconos SVG line-art propios (tiras de datos clave + encabezados de categoría) */
.fk-key__ic{color:var(--ft-brand-strong,#0A73B8);margin-bottom:6px}
.fk-key__ic svg{width:18px;height:18px;display:block}
.ft-cat__ic{color:var(--ft-brand-strong,#0A73B8)}
.ft-cat__ic svg{width:15px;height:15px;display:block}
.fte-cat__ic{color:var(--ft-brand-strong,#0A73B8)}
.fte-cat__ic svg{width:15px;height:15px;display:block}

/* ==========================================================================
   REDISEÑO v3 — Picker: toggle Rejilla/Lista + bandeja de 4 casillas.
   ========================================================================== */
.fcp-pick-tools{display:flex;gap:10px;align-items:center;padding:0 20px 10px}
.fcp-search{flex:1 1 auto;display:flex;align-items:center;gap:8px;background:var(--ft-surface-2,#f4f7fb);border:1px solid var(--ft-border,rgba(6,31,92,.12));border-radius:11px;padding:0 12px;height:38px;color:var(--ft-text-3,#8b95ab)}
.fcp-search input{border:none;background:transparent;outline:none;color:var(--ft-text);font-size:13px;font-family:inherit;width:100%}
.fcp-viewseg{display:inline-flex;background:var(--ft-surface-2,#f4f7fb);border:1px solid var(--ft-border,rgba(6,31,92,.12));border-radius:10px;padding:3px;gap:2px;flex:0 0 auto}
.fcp-viewseg button{border:none;background:transparent;color:var(--ft-text-3,#8b95ab);padding:6px 8px;border-radius:7px;display:grid;place-items:center;cursor:pointer}
.fcp-viewseg button[aria-selected="true"]{background:var(--ft-glass,#fff);color:var(--ft-brand-strong,#0A73B8);box-shadow:0 1px 3px rgba(6,24,52,.12)}
.fcp-viewseg svg{width:16px;height:16px;display:block}

.fcp-dev__tx{display:flex;flex-direction:column;min-width:0}

/* Vista Lista (filas compactas) */
.fcp-grid.is-rows{grid-template-columns:1fr;gap:7px}
.fcp-grid.is-rows .fcp-dev{flex-direction:row;align-items:center;gap:11px;padding:8px 12px}
.fcp-grid.is-rows .fcp-dev__ph{width:46px;height:46px;min-height:46px;flex:0 0 46px;order:0}
.fcp-grid.is-rows .fcp-dev__tx{flex:1 1 auto;order:1}
.fcp-grid.is-rows .fcp-devpill{order:2;align-self:center;margin-left:auto}
.fcp-grid.is-rows .fcp-check{position:static;order:3;flex:0 0 auto}

/* Bandeja de 4 casillas */
.fcp-tray--slots{display:block}
.fcp-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fcp-slot{position:relative;display:flex;align-items:center;gap:8px;height:46px;border-radius:11px;padding:0 8px;border:1.5px dashed var(--ft-border,rgba(6,31,92,.18));background:var(--ft-surface-2,#f4f7fb);color:var(--ft-text-3,#95a2b2);font-size:11px;font-weight:600;overflow:hidden}
.fcp-slot.filled{border-style:solid;border-color:var(--ft-brand,#009FDB);background:var(--ft-glass,#fff);color:var(--ft-text)}
.fcp-slot__ph{width:32px;height:32px;min-height:32px;flex:0 0 32px;border-radius:8px;background:var(--ft-surface-2,#f4f7fb);display:grid;place-items:center;overflow:hidden}
.fcp-slot__ph img{max-width:100%;max-height:100%;object-fit:contain;padding:3px}
.fcp-slot__ph .ficha-media__ph{font-size:16px;color:#cdd6e6}
.fcp-slot__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;line-height:1.1}
.fcp-slot__num{width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--ft-border,rgba(6,31,92,.15));color:var(--ft-text-2,#55617a);display:grid;place-items:center;font-size:10px;font-weight:700;flex:0 0 auto}
.fcp-slot__x{position:absolute!important;top:-7px!important;right:-7px!important;width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;max-height:19px!important;border:2px solid var(--ft-glass,#fff)!important;border-radius:50%!important;background:var(--ft-navy,#0A2E5C)!important;color:#fff!important;font-size:11px;line-height:1;display:grid;place-items:center;padding:0!important;cursor:pointer}
.fcp-tray__foot{display:flex;align-items:center;gap:12px;margin-top:11px}
.fcp-hint{flex:1 1 auto;font-size:12px;color:var(--ft-text-3,#8b95ab)}
.fcp-hint b{color:var(--ft-text)}
@media (max-width:560px){ .fcp-slots{grid-template-columns:repeat(2,1fr)} }

/* Carrusel de marcas: cursor de arrastre + permitir gesto horizontal en táctil */
.fcp-fchips{cursor:grab;touch-action:pan-x}
.fcp-fchips:active{cursor:grabbing}
.fcp-fchips .fcp-fchip{user-select:none}

/* Flechas del carrusel de marcas (mismo comportamiento que el de planes) */
.fcp-brandsbar{position:relative}
.fcp-bnav{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:5;
  width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;min-height:32px!important;max-height:32px!important;flex:0 0 32px;
  border-radius:50%;display:grid;place-items:center;padding:0;background:rgba(255,255,255,.5);
  border:1px solid var(--ft-border,rgba(6,31,92,.12));color:var(--ft-brand-strong,#0A73B8);
  box-shadow:0 6px 16px -6px rgba(14,22,32,.4),0 2px 5px rgba(14,22,32,.12);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .12s,box-shadow .12s,background .12s}
.fcp-bnav svg{width:16px;height:16px}
.fcp-bnav--prev{left:12px}
.fcp-bnav--next{right:12px}
.fcp-bnav:hover{background:rgba(255,255,255,.72);transform:translateY(-50%) scale(1.08)}
.fcp-bnav:active{transform:translateY(-50%) scale(.94)}
.fcp-bnav[hidden]{display:none!important}
html[data-theme="dark"] .fcp-bnav{background:rgba(20,31,48,.5);color:#59C0EE}
html[data-theme="dark"] .fcp-bnav:hover{background:rgba(20,31,48,.72)}