* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", Tahoma, sans-serif; }

body.iptv-body {
  background: linear-gradient(rgba(4, 13, 26, 0.90), rgba(4, 13, 26, 0.95)),
              url('assets/playview-bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.hidden { display: none !important; }
.accent-red { color: #ef4444; }

/* BARRAS DE SCROLL ACTIVAS Y VISIBLES */
.cats-scroll::-webkit-scrollbar,
.items-scroll::-webkit-scrollbar,
.player-panel::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}
.cats-scroll::-webkit-scrollbar-track,
.items-scroll::-webkit-scrollbar-track {
  background: #060b14 !important;
}
.cats-scroll::-webkit-scrollbar-thumb,
.items-scroll::-webkit-scrollbar-thumb {
  background: #0284c7 !important;
  border-radius: 4px !important;
}
.cats-scroll::-webkit-scrollbar-thumb:hover,
.items-scroll::-webkit-scrollbar-thumb:hover {
  background: #38bdf8 !important;
}

/* ENTRADA CON LOGO GIF */
.modal {
  position: fixed; inset: 0; background: rgba(3, 7, 18, 0.95);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.smarters-card-login {
  background: #0d1527; border: 1px solid #1e293b; padding: 30px;
  border-radius: 14px; width: 340px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.85);
}
.brand-gif-logo {
  width: 100%; max-width: 240px; height: auto; border-radius: 8px; margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.smarters-card-login input {
  width: 100%; padding: 11px 14px; margin-bottom: 12px;
  border-radius: 6px; border: 1px solid #1e293b; background: #070b14; color: #fff; outline: none;
}
.btn-smarters-login {
  width: 100%; padding: 12px; background: #ef4444; border: none; border-radius: 6px;
  font-weight: bold; color: #fff; cursor: pointer;
}

/* HEADER */
.smarters-header {
  height: 52px; background: #070d18; border-bottom: 1px solid #131d31;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-mini-logo { width: 26px; height: 26px; object-fit: contain; }
.brand-name { font-size: 1.15rem; font-weight: 800; letter-spacing: 1px; }
.btn-icon {
  background: #101c33; border: 1px solid #1e2e4f; color: #38bdf8;
  padding: 5px 12px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; cursor: pointer;
}
.header-center input {
  width: 260px; padding: 6px 14px; border-radius: 20px;
  background: #040812; border: 1px solid #16243d; color: #fff; outline: none; font-size: 0.85rem;
}
.header-right { display: flex; align-items: center; gap: 14px; }
.clock { font-size: 0.85rem; color: #94a3b8; font-weight: 600; }
.user-chip { background: #0e182b; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; color: #38bdf8; }
.btn-exit { background: transparent; border: none; font-size: 1.1rem; color: #ef4444; cursor: pointer; }

/* DASHBOARD TILES */
.dashboard-container {
  height: calc(100vh - 52px); display: flex; align-items: center; justify-content: center; padding: 30px;
}
.smarters-main-tiles { display: flex; gap: 24px; width: 100%; max-width: 980px; }
.tile {
  flex: 1; aspect-ratio: 16/10; border-radius: 14px; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer;
  transition: transform 0.2s; box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.tile:hover { transform: translateY(-5px); }
.tile-icon { font-size: 3rem; margin-bottom: 10px; }
.tile h3 { font-size: 1.45rem; font-weight: 800; }
.tile-status { font-size: 0.8rem; opacity: 0.85; margin-top: 4px; }
.tile-live { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border: 2px solid #38bdf8; }
.tile-movies { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); border: 2px solid #fb923c; }
.tile-series { background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%); border: 2px solid #c084fc; }

/* LAYOUT LATERAL (3 COLUMNAS HORIZONTALES FIJAS) */
.explorer-container {
  height: calc(100vh - 52px); display: grid;
  grid-template-columns: 220px 320px 1fr !important;
  background: #030710;
  overflow: hidden;
}

/* Columna 1 */
.sidebar-categories {
  background: #070d18; border-right: 1px solid #111a2c;
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.col-header {
  height: 42px; background: #0b1322; border-bottom: 1px solid #111a2c;
  display: flex; align-items: center; padding: 0 14px;
  font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; color: #38bdf8; flex-shrink: 0;
}
.cats-scroll {
  list-style: none; overflow-y: auto !important; height: calc(100% - 42px); flex: 1;
}
.cat-item {
  padding: 12px 14px; border-bottom: 1px solid #0d1524; cursor: pointer;
  font-size: 0.82rem; color: #94a3b8; transition: background 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-item:hover, .cat-item.active { background: #121e36; color: #fff; border-left: 4px solid #ef4444; }

/* Columna 2 */
.sidebar-items {
  background: #050a14; border-right: 1px solid #111a2c;
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.items-scroll {
  overflow-y: auto !important; height: calc(100% - 42px); flex: 1;
}
.media-item-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid #0a1120; cursor: pointer; transition: background 0.15s;
}
.media-item-row:hover, .media-item-row.active { background: #0e1a30; border-left: 4px solid #38bdf8; }
.item-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: #000; flex-shrink: 0; }
.item-info-col { flex: 1; overflow: hidden; }
.item-title { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.item-mini-epg { font-size: 0.72rem; color: #64748b; margin-top: 2px; }

/* Columna 3 */
.player-panel {
  padding: 14px 18px; display: flex; flex-direction: column; background: #02050c;
  overflow-y: auto; gap: 12px; height: 100%;
}
.player-screen-box {
  width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.9); flex-shrink: 0; position: relative;
}
.player-screen-box video { width: 100%; height: 100%; object-fit: contain; }

/* PANEL EPG INFERIOR */
.epg-details-box {
  background: #060c18; border: 1px solid #121c30; border-radius: 8px; padding: 14px 18px;
}
.epg-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.live-pill {
  background: #0284c7; color: #fff; font-size: 0.65rem; font-weight: bold;
  padding: 2px 6px; border-radius: 3px; margin-right: 6px;
}
#epg-channel-name { display: inline-block; font-size: 1.15rem; color: #fff; vertical-align: middle; }
.epg-time-range { color: #38bdf8; font-size: 0.82rem; font-weight: 600; }
.epg-progress-wrapper {
  width: 100%; height: 4px; background: #101a2e; border-radius: 2px; margin: 8px 0 10px 0; overflow: hidden;
}
.epg-progress-bar { height: 100%; background: linear-gradient(90deg, #38bdf8, #ffe22e); width: 45%; }
.epg-program-info { display: flex; flex-direction: column; gap: 4px; }
.epg-status-line { font-size: 0.82rem; color: #94a3b8; }
.epg-status-line strong { color: #f1f5f9; margin-left: 4px; }
#epg-program-desc { font-size: 0.78rem; color: #64748b; line-height: 1.4; }

/* AJUSTES PARA REPRODUCTOR UNIVERSAL VIDEO.JS */
.video-js {
  width: 100% !important;
  height: 100% !important;
  background-color: #000 !important;
}
.video-js .vjs-tech {
  object-fit: contain !important;
}
.video-js .vjs-big-play-button {
  background-color: rgba(239, 68, 68, 0.8) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  line-height: 60px !important;
  margin-top: -30px !important;
  margin-left: -30px !important;
}