/* =========================
   VARIABLES (THEME)
========================= */
:root {
  --bg-main: #050505;
  --bg-card: #0b0b0b;
  --border-main: #facc15;
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --accent: #facc15;
  --danger: #ef4444;
  --success: #22c55e;
}

/* =========================
   RESET & BODY
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  min-height: 100vh;

  /* Fondo global con imagen + velo oscuro */
  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.82), rgba(3, 7, 18, 0.96)),
    url("activosfondo.png") center/cover fixed no-repeat;
}

/* =========================
   HEADER / NAVBAR GENERAL
========================= */

.header-bar {
  width: 100%;
  background: #020617;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.header-inner {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, 0.7);
  background: radial-gradient(circle at 30% 30%, #facc15, #0b0b0b);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title span:first-child {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--accent);
}

.header-title span:last-child {
  font-size: 11px;
  color: var(--text-muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
}

.header-user strong {
  font-size: 12px;
}

.header-link {
  font-size: 12px;
  color: var(--text-main);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, border-color .15s ease, transform .1s;
}

.header-link i {
  font-size: 11px;
}

.header-link:hover {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
}

.header-link.logout {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.6);
}

.header-link.logout:hover {
  background: rgba(127, 29, 29, 0.6);
}

.header-link.active {
  border-color: rgba(250, 204, 21, 0.7);
  background: rgba(250, 204, 21, 0.06);
  color: var(--accent);
}

/* Versión vieja de navbar (por si alguna página usa .custom-navbar) */
.custom-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #020617;
  border-bottom: 2px solid #facc15;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #facc15;
  text-decoration: none;
  font-size: 20px;
}

.logo-nav {
  width: 32px;
  height: 32px;
}

.navbar-menu {
  display: flex;
  gap: 18px;
  align-items: center;
}

.navbar-menu a {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}

.navbar-menu a:hover {
  background: #facc15;
  color: #020617;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .custom-navbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .navbar-menu {
    width: 100%;
    flex-wrap: wrap;
  }

  .navbar-menu a {
    font-size: 14px;
    padding: 5px 8px;
  }
}

/* =========================
   LAYOUTS GENERALES
========================= */

.main-wrapper,
.layout-wrapper {
  width: 95%;
  max-width: 1100px;
  margin: 25px auto 40px;
}

/* =========================
   CARDS / CONTENEDORES
========================= */

.card-ui,
.card-elevated {
  background: rgba(15, 23, 42, .96);
  border-radius: 18px;
  border: 1px solid var(--border-main);
  padding: 16px 18px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  margin-bottom: 16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card-ui:hover,
.card-elevated:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .7);
  border-color: #fde047;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card-header h2 {
  font-size: 18px;
  margin: 0;
}

.card-header small {
  font-size: 12px;
  color: var(--text-muted);
}

/* =========================
   BOTONES
========================= */

.btn-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.btn-ui:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: #111827;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4);
}

.btn-primary:hover {
  background: #fde047;
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.3);
}

.btn-ghost:hover {
  background: rgba(250, 204, 21, 0.1);
}

.btn-danger {
  background: var(--danger);
  color: #fef2f2;
}

.btn-success {
  background: var(--success);
  color: #022c22;
}

/* =========================
   INPUTS / SELECTS
========================= */

.input-ui,
select.input-ui {
  background: #111827;
  border: 1px solid #374151;
  color: var(--text-main);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
}

.input-ui:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4);
}

/* =========================
   TABLAS (GENERALES)
========================= */

.table-wrapper {
  border-radius: 14px;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(31, 41, 55, .9);
}

.table-ui {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-ui thead {
  background: #0b1120;
}

.table-ui th,
.table-ui td {
  padding: 8px 10px;
  border-bottom: 1px solid #111827;
}

.table-ui th {
  text-align: left;
  color: #e5e7eb;
  font-weight: 500;
}

.table-ui tbody tr:nth-child(even) {
  background: #02081a;
}

.table-ui tbody tr:hover {
  background: #111827;
}

/* =========================
   BADGES / ESTADOS
========================= */

.badge-ui {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-pendiente { background: var(--accent); color: #111827; }
.badge-en-curso { background: var(--success); color: #022c22; }
.badge-pausado  { background: #fb923c; color: #1f2937; }

/* =========================
   TOAST (notificaciones)
========================= */

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #111827;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.6);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   PERFIL / AVATAR HABBO
========================= */

.profile-layout {
  width: 95%;
  max-width: 1100px;
  margin: 25px auto 32px;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

.profile-left-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-avatar-frame {
  width: 200px;
  height: 220px;
  border-radius: 18px;
  padding: 6px 6px 4px;
  background:
    radial-gradient(circle at top, #facc15, #0f172a 55%),
    url("activosfondo.png") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.profile-avatar-frame img {
  height: 190px;
  image-rendering: pixelated;
}

.profile-name {
  font-size: 20px;
  font-weight: 800;
}

.profile-rank-chip {
  margin-top: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #facc15;
  color: #020617;
  font-size: 13px;
  font-weight: 700;
}

.profile-mision-text {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.profile-mini-stats {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.profile-mini-stats .stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  background: #020617;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, .5);
}

.profile-mini-stats .stat-row span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.profile-mini-stats i {
  color: #facc15;
}

/* =========================
   PROGRESO (barras)
========================= */

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

.progress-title {
  font-size: 15px;
  font-weight: 600;
}

.progress-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.progress-value {
  font-size: 12px;
}

.progress-bar {
  width: 100%;
  background: #020617;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(55, 65, 81, .9);
  height: 12px;
  margin-top: 6px;
}

.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #facc15, #f97316);
  width: var(--progress, 0%);
  animation: fillBar .9s ease-out;
}

@keyframes fillBar {
  from { width: 0; }
  to   { width: var(--progress, 0%); }
}

/* =========================
   RANKINGS / INDICADORES
========================= */

.rankings-card {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 14px 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--border-main);
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.rankings-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .7);
  border-color: #fde047;
}

.rankings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rankings-title {
  font-size: 14px;
  font-weight: 600;
}

.rankings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.indicador-box {
  background: #020617bb;
  border: 1px solid rgba(250, 204, 21, .5);
  padding: 14px;
  border-radius: 12px;
  text-align: center;
}

.indicador-titulo {
  font-size: 13px;
  color: #facc15;
  font-weight: 700;
}

.indicador-valor {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}

.indicador-valor .mins {
  font-size: 14px;
  color: #facc15;
}

.rank-avatar {
  width: 48px;
  height: 68px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 4px;
}

/* =========================
   BLOQUES GENÉRICOS PERFIL / HISTORIAL
========================= */

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-title {
  font-size: 14px;
  font-weight: 600;
}

/* =========================
   MEDIA QUERIES PEQUEÑAS
========================= */

@media (max-width: 576px) {
  .main-wrapper,
  .layout-wrapper {
    padding: 0 8px;
  }

  .profile-name {
    font-size: 18px;
  }
}
/* Contenedor responsive para tablas */
.table-responsive{
  width:100%;
  overflow-x:auto;
}

/* Ajustes generales para móvil */
@media (max-width:720px){

  .card-ui{
    padding:12px 12px;
  }

  /* Tablas: tamaño mínimo + fuente algo más pequeña */
  table{
    min-width:650px;
    font-size:12px;
  }

  th,td{
    padding:6px;
  }

  /* Fila de acciones: botones en 2 columnas */
  .acciones-form{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
  }
  .acciones-form .btn{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
  }

  /* Botón lista individual que suele ser largo */
  .acciones-form .btn-lista-user{
    flex:1 1 100%;
  }

  /* Card de selector + botones superiores: apilar */
  .card-ui > div[style*="display:flex"][style*="flex-wrap:wrap"]{
    flex-direction:column;
    align-items:stretch;
  }

  .card-ui form{
    width:100%;
  }

  /* Modal ya está adaptado, solo un poco de margen extra */
  .modal-card{
    max-width:420px;
  }
}
.search-autocomplete{ position:relative; max-width:340px; }
.search-input-wrapper{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #facc15;
  background:#020617;
}
.search-input-wrapper i{ font-size:12px; color:#9ca3af; }
.search-input-wrapper input{
  border:none; outline:none; background:transparent;
  color:#e5e7eb; font-size:13px; width:100%;
}
.search-suggestions{
  position:absolute; left:0; right:0; margin-top:6px;
  background:#020617; border:1px solid #374151; border-radius:12px;
  list-style:none; padding:6px 0; max-height:320px; overflow-y:auto;
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  display:none; z-index:50;
}
.search-suggestions li{
  padding:8px 12px; font-size:13px; cursor:pointer;
}
.search-suggestions li:hover{ background:#111827; }

/* ===========================
   ASCENSO MANUAL – LAYOUT PRO
   =========================== */
.manual-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manual-form{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
  gap:12px;
  align-items:end;
}

.manual-field label{
  display:block;
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:6px;
}

.manual-control{
  width:100%;
  background:#020617;
  border-radius:999px;
  border:1px solid #374151;
  color:#fff;
  padding:10px 12px;
  font-size:13px;
  outline:none;
}

.manual-btn{
  width:100%;
  min-width: 220px;
  padding:10px 14px;
}

/* Autocomplete: que ocupe 100% */
.search-autocomplete{ max-width:none; width:100%; }
.search-input-wrapper{ width:100%; padding:10px 12px; }
.search-input-wrapper input{ width:100%; font-size:13px; }

/* Texto seleccionado */
.manual-selected{
  margin-top:8px;
  font-size:12px;
  color:#e5e7eb;
}
.manual-selected span{ color:var(--text-muted); }

/* Responsive */
@media (max-width: 900px){
  .manual-form{
    grid-template-columns: 1fr;
  }
  .manual-btn{
    min-width: 0;
  }
}

/* (Opcional) Header más lindo en mobile */
@media (max-width: 768px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .header-right{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px;
  }
  .header-user{
    align-items:flex-start;
  }
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
}
.card-ui.compact{
  padding:14px 16px;
}
.card-ui.compact table{ font-size:13px; }
/* ===== AJUSTES: “AIRE” + TEXTOS PROLIJOS (EVITA QUE PISE LO DE ABAJO) ===== */

/* El contenedor de las 3 cards no tenía margen abajo (es un DIV, no section) */
.grid-3{
  margin: 6px 0 26px;         /* aire arriba/abajo */
  align-items: stretch;
}

/* Textos del header más prolijos y con aire */
.card-header{
  margin-bottom: 12px;        /* un poco más de separación con el body */
}
.card-header h2{
  line-height: 1.15;
}
.card-header small{
  display:block;
  margin-top: 6px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* En compact: un poco más de padding general para que no quede “apretado” */
.card-ui.compact{
  padding: 16px 18px;         /* antes 14px 16px */
}

/* Body interno: separa contenido del borde inferior (especialmente cuando no hay tabla) */
.card-ui.compact .card-body{
  flex: 1;
  min-height: 140px;          /* un toque más alto para uniformidad visual */
  padding-bottom: 10px;       /* aire extra abajo */
}

/* Párrafos de "No hay..." / "No registraste..." sin márgenes raros */
.card-ui.compact .card-body p{
  margin: 0;
  padding: 2px 0 0;
  line-height: 1.45;
}

/* Títulos internos “Times / Pases” con aire consistente */
.small-section-title{
  margin: 12px 0 8px;         /* más respiración */
  line-height: 1.2;
}
/* =========================================================
   PATCH COMPAT: .btn (tiempos.php) -> look .btn-ui (global)
   No rompe otras páginas porque se limita a .card-ui/.card-elevated
========================================================= */

/* 1) Base: que .btn se comporte como tu .btn-ui dentro de cards */
.card-ui .btn,
.card-elevated .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  border:none;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  line-height:1;
  text-decoration:none;
  -webkit-appearance:none;
  appearance:none;
}

.card-ui .btn:active,
.card-elevated .btn:active{
  transform:scale(.97);
}

.card-ui .btn[disabled],
.card-elevated .btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* 2) Colores “tipo tiempos.php” (mapeo) */
.card-ui .btn-confirm,
.card-elevated .btn-confirm{
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color:#022c22;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
}
.card-ui .btn-confirm:hover,
.card-elevated .btn-confirm:hover{
  box-shadow:0 12px 28px rgba(34,197,94,.55);
}

.card-ui .btn-pausar,
.card-elevated .btn-pausar{
  background:#111827;
  color:#e5e7eb;
  box-shadow:0 0 0 1px rgba(148,163,184,.7);
}
.card-ui .btn-pausar:hover,
.card-elevated .btn-pausar:hover{
  background:#1f2937;
}

.card-ui .btn-add,
.card-elevated .btn-add{
  background: linear-gradient(90deg, #facc15, #f97316);
  color:#111827;
  box-shadow:0 8px 20px rgba(250,204,21,.4);
}
.card-ui .btn-add:hover,
.card-elevated .btn-add:hover{
  box-shadow:0 12px 30px rgba(250,204,21,.6);
}

.card-ui .btn-ajustar,
.card-elevated .btn-ajustar{
  background:#1d4ed8;
  color:#e5e7eb;
  box-shadow:0 0 0 1px rgba(59,130,246,.55);
}
.card-ui .btn-ajustar:hover,
.card-elevated .btn-ajustar:hover{
  background:#1e40af;
}

.card-ui .btn-assign,
.card-elevated .btn-assign{
  background:#0f766e;
  color:#ecfeff;
  box-shadow:0 0 0 1px rgba(45,212,191,.6);
}
.card-ui .btn-assign:hover,
.card-elevated .btn-assign:hover{
  background:#115e59;
}

.card-ui .btn-cancel,
.card-elevated .btn-cancel{
  background:#ef4444;
  color:#fef2f2;
  box-shadow:0 0 0 1px rgba(248,113,113,.5);
}
.card-ui .btn-cancel:hover,
.card-elevated .btn-cancel:hover{
  background:#b91c1c;
}

.card-ui .btn-desligar,
.card-elevated .btn-desligar{
  background:#7f1d1d;
  color:#fee2e2;
  box-shadow:0 0 0 1px rgba(254,202,202,.6);
}
.card-ui .btn-desligar:hover,
.card-elevated .btn-desligar:hover{
  background:#991b1b;
}

/* 3) Botón “Tomar lista” (clase propia en tiempos.php) */
.card-ui .btn-lista,
.card-elevated .btn-lista{
  background:#020617;
  color:var(--accent);
  border:1px solid rgba(250,204,21,.8);
  box-shadow:0 10px 24px rgba(0,0,0,.6);
}

/* 4) Mobile: mantiene tu layout de acciones en 2 columnas */
@media (max-width:720px){
  .card-ui .acciones-form{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .card-ui .acciones-form .btn{
    flex:1 1 calc(50% - 6px);
    justify-content:center;
  }
  .card-ui .acciones-form .btn-lista-user{
    flex:1 1 100%;
  }
}