/* ====== Tema base ====== */
:root{
  --bg:#0b0b0b; --panel:#0f0f0f; --card:#121212; --stroke:#1f1f1f;
  --text:#e8e8e8; --muted:#9aa0a6; --accent:#34d399; --accent-2:#10b981;
  --radius:14px; --radius-lg:18px; --shadow:0 6px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* ====== Layout ====== */
.sidebar{
  width:260px;background:var(--panel);border-right:1px solid var(--stroke);
  position:fixed;inset:0 auto 0 0;padding:16px;overflow:auto;
}
.main{margin-left:260px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--stroke);background:var(--panel);
}
.container{max-width:1160px;margin:0 auto;padding:24px}

/* ====== Componentes ====== */
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
.input{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--stroke);background:#141414;color:var(--text);outline:none}
.input:focus{border-color:#2a2a2a;box-shadow:0 0 0 2px rgba(52,211,153,.18)}
.btn{background:var(--accent);border:none;color:#071b12;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--accent-2)}
.muted{color:var(--muted);font-size:12px}

.logo{font-weight:700;display:flex;align-items:center;gap:10px}
.nav a{
  display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;
  color:#d8d8d8;border:1px solid transparent;transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:#171717;border-color:#1f1f1f}
.nav a.active{background:#141e19;border-color:#1f1f1f;color:var(--accent)}

.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-top:1px solid var(--stroke);text-align:left}
.table thead th{color:var(--muted);font-weight:600}

/* ====== Perfil (topbar) ====== */
.user-profile{display:flex;align-items:center;gap:10px}
.user-avatar{
  width:28px;height:28px;border-radius:50%;background:#1a1a1a;border:1px solid #2a2a2a;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#a3f0c4
}
.user-name{font-weight:600}
.user-role{font-size:12px;color:#9aa0a6}

/* ====== Botón menú móvil y overlay ====== */
.mobile-menu-btn{
  display:none; position:fixed; top:12px; left:12px; z-index:50;
  background:#121212; border:1px solid #1f1f1f; color:#e8e8e8;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:35}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .sidebar{width:220px}
  .main{margin-left:220px}
}

@media (max-width: 768px){
  .mobile-menu-btn{display:block}
  .sidebar{
    width:78vw; max-width:260px; z-index:40;
    transform:translateX(-100%); transition:transform .25s ease;
  }
  body.sidebar-open .sidebar{ transform:translateX(0) }
  body.sidebar-open .overlay{ display:block }
  .main{ margin-left:0 }
  .logo{font-size:16px}
  .nav a{padding:9px 10px; font-size:14px}
  .container{padding:18px}
  .topbar{padding:12px 14px}
}

@media (max-width: 420px){
  .sidebar{ width:86vw }
  .nav a{gap:8px; padding:8px 9px; font-size:13px}
  .user-name{font-size:14px}
  .user-role{font-size:11px}
}

/* Quitar subrayado de todos los links y, en especial, del sidebar */
a { text-decoration: none; }
.nav a,
.nav a:link,
.nav a:visited,
.nav a:hover,
.nav a:active { text-decoration: none !important; }




/* ===== Plataformas – layout responsive ===== */
.platforms-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.platform-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  overflow:visible; /* evita cortes de botones */
}
.platform-info{ display:flex; align-items:center; gap:10px; min-width:0 }
.platform-logo{ width:32px; height:32px; border-radius:8px; object-fit:cover }
.platform-name{ font-weight:600 }

/* Botones */
.platform-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.btn-ghost{ background:#1f1f1f; color:#e8e8e8 }
.btn-ghost:hover{ background:#262626 }

/* Breakpoints */
@media (max-width: 1024px){
  .platforms-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .platforms-grid{ grid-template-columns:1fr; }
  .platform-card{ flex-direction:column; align-items:flex-start; }
  .platform-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;  /* dos botones por fila */
    gap:10px;
  }
  .platform-actions .btn,
  .platform-actions .btn-ghost{ width:100%; text-align:center; padding:12px }
  .platform-logo{ width:28px; height:28px }
}
@media (max-width: 380px){
  .platform-actions{ grid-template-columns:1fr; } /* uno debajo del otro */
}

/* -- Fix: tamaño de iconos en Plataformas -- */
.platform-card img.platform-logo{
  width:40px !important;
  height:40px !important;
  object-fit:contain;
  border-radius:8px;
  flex:0 0 40px;
}

/* neutraliza reglas globales como .card img{width:100%} dentro de esta tarjeta */
.platform-card img{ width:auto; height:auto; max-width:none; }

@media (max-width: 680px){
  .platform-card img.platform-logo{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px;
  }
}
/* ===== Tablas responsivas ===== */
.table-scroller{
  overflow-x: auto;            /* permite scroll horizontal en móvil */
  -webkit-overflow-scrolling: touch;
}
.table-scroller .table{
  min-width: 900px;            /* fuerza ancho para que quepa la col Acciones */
}

/* Opcional: que la columna Acciones quede siempre visible al hacer scroll */
.table-scroller .table th:last-child,
.table-scroller .table td:last-child{
  position: sticky;
  right: 0;
  background: #0e0e0e;         /* mismo color que la tarjeta */
  box-shadow: -6px 0 8px rgba(0,0,0,0.25);
}

/* Botones más compactos en móvil */
@media (max-width: 680px){
  .table-scroller .table{ min-width: 720px; }
  .table td .btn{ padding: 10px 12px; font-size: 14px; }
}



.table-scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroller .table{ min-width:900px; }
.table-scroller .table th:last-child,
.table-scroller .table td:last-child{
  position:sticky; right:0; background:#0e0e0e; box-shadow:-6px 0 8px rgba(0,0,0,0.25);
}
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; }
@media (max-width:680px){
  .table-scroller .table{ min-width:760px; }
  .table td .btn{ padding:10px 12px; font-size:14px; }
}


.link { color:#8be0b3; text-decoration:none; }
.link:hover { text-decoration:underline; }


/* Botón compacto */
.btn-sm{
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
  line-height: 1.1;
}

/* Tabla más densa en vistas de detalle */
.table.compact th,
.table.compact td{
  padding: 8px 10px;
}

/* Badges un poco más pequeños */
.badge.badge-sm{
  padding: 3px 6px;
  font-size: 12px;
}

/* Ajuste móvil */
@media (max-width: 680px){
  .btn-sm{ padding: 6px 8px; font-size: 12px; }
  .table.compact{ min-width: 680px; }
}




/* ===== KPIs grandes ===== */
.kpi-num{
  font-size:40px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.2px;
}
@media (max-width:640px){
  .kpi-num{ font-size:32px; }
}