/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   layout.css — Utilidades de layout para los bloques originales
   (Notificaciones, Mi perfil): page-header, tabs, grids, lightbox.
   El shell real (topbar, sidebar, nav, toast) vive en shell.css —
   las reglas que existian aqui para eso se quitaron por chocar con
   las de shell.css (mismo nombre, propiedades distintas).
   v1.1 | Sep 2026
   ============================================================ */

/* ─── PÁGINAS (sistema de routing) ─── */
.page {
  display: none;
  animation: fadeIn 0.15s ease forwards;
}
.page.active { display: block; }

/* ─── SUBTABS ─── */
.sub-view {
  display: none;
}
.sub-view.active { display: block; }

/* ─── ENCABEZADO DE PÁGINA ─── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--t);
  line-height: 1.3;
}
.page-subtitle {
  font-size: 12px;
  color: var(--ts);
  margin-top: 3px;
}

/* ─── TABS ─── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--br);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.tab {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ts);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast);
  white-space: nowrap;
  font-family: var(--font);
}
.tab:hover  { color: var(--t); }
.tab.active {
  color: var(--t);
  font-weight: 500;
  border-bottom-color: var(--g);
}

/* ─── BOTÓN VOLVER ─── */
.back-btn {
  font-size: 12px;
  color: var(--ts);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--sp-sm);
  background: none;
  border: none;
  font-family: var(--font);
  padding: 0;
  transition: color var(--t-fast);
}
.back-btn:hover { color: var(--t); }

/* ─── GRID DE KPIs ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

/* ─── GRIDS GENÉRICOS ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;       gap: var(--sp-sm); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: var(--sp-sm); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-sm); }

/* ─── LIGHTBOX OVERLAY ─── */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.lb-overlay.open { display: flex; }

/* ─── RESPONSIVE básico ─── */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3   { grid-template-columns: 1fr 1fr; }
}