/* ==========================================================
   SHARED PILL STYLES (used by basededatos.php + inventario.php)
   Update colors/design here once and it applies to both pages.
   ========================================================== */

/* Cuenta asignada / Plataforma pills */
.pill, .acc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:900;
  letter-spacing:0.01em;
  border:1px solid var(--pill-bd, rgba(0,0,0,0.18));
  background:var(--pill-bg, #e2e8f0);
  color:#000;
  text-transform:none;
  line-height:1;
}

/* ⚠️ Requisito del usuario: nombre de plataforma SIEMPRE negro (claro y oscuro) */
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .acc-pill{
  color:#000;
}

/* Estructura de celda tipo "Cuenta asignada" */
.acc-cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  line-height:1.05;
}
.acc-sub{
  font-size:0.78rem;
  font-weight:900;
  word-break:break-word;
}
/* Texto fuerte (correo/usuario): negro en claro, blanco en oscuro (sin gris) */
.strong-text{ color:#000 !important; }
:root[data-theme="dark"] .strong-text{ color:#fff !important; }

/* Fuerza texto negro dentro de pills con plataforma (incluye ambos usos) */
.pill[class*="plat-"], .acc-pill[class*="plat-"]{
  color:#000 !important;
}

/* ==========================================================
   PLATFORM PALETTE (exact colors)
   - We set BOTH background and border using variables.
   - In INVENTARIO you wanted fill == border; so use same value.
   ========================================================== */
.pill.plat-magis, .acc-pill.plat-magis{ --pill-bg:#f1b900; --pill-bd:#f1b900; }
.pill.plat-paramount, .acc-pill.plat-paramount{ --pill-bg:#2a6ae6; --pill-bd:#2a6ae6; }
.pill.plat-crunchyroll, .acc-pill.plat-crunchyroll{ --pill-bg:#ff7c00; --pill-bd:#ff7c00; }
.pill.plat-disney, .acc-pill.plat-disney{ --pill-bg:#64b5ff; --pill-bd:#64b5ff; }
.pill.plat-max, .acc-pill.plat-max,
.pill.plat-hbo, .acc-pill.plat-hbo{ --pill-bg:#6a3fb8; --pill-bd:#6a3fb8; }
.pill.plat-netflix, .acc-pill.plat-netflix{ --pill-bg:#e53935; --pill-bd:#e53935; }
.pill.plat-tdmax, .acc-pill.plat-tdmax{ --pill-bg:#7b1fa2; --pill-bd:#7b1fa2; }
.pill.plat-apple, .acc-pill.plat-apple{ --pill-bg:#000000; --pill-bd:#000000; }
.pill.plat-spotify, .acc-pill.plat-spotify{ --pill-bg:#2e7d32; --pill-bd:#2e7d32; }
.pill.plat-youtube, .acc-pill.plat-youtube{ --pill-bg:#5a152a; --pill-bd:#5a152a; }
.pill.plat-prime, .acc-pill.plat-prime{ --pill-bg:#132055; --pill-bd:#132055; }
.pill.plat-telelatino, .acc-pill.plat-telelatino{ --pill-bg:#808080; --pill-bd:#808080; }
.pill.plat-vix, .acc-pill.plat-vix{ --pill-bg:#e65100; --pill-bd:#e65100; }
.pill.plat-liga-tica, .acc-pill.plat-liga-tica{ --pill-bg:#db2777; --pill-bd:#db2777; }
.pill.plat-universal, .acc-pill.plat-universal{ --pill-bg:#eab308; --pill-bd:#eab308; }

/* Keep pill readable on dark backgrounds (text stays black by requirement)
   Add subtle inner highlight so black text is visible on very dark pills */
.pill.plat-apple, .acc-pill.plat-apple,
.pill.plat-prime, .acc-pill.plat-prime,
.pill.plat-youtube, .acc-pill.plat-youtube{
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.35);
}

/* Disable legacy "dark text class" if present */
.pill.dark{ color:#000 !important; }