:root{
  --bg: #0b0b0b;          /* fondo principal */
  --bg-2: #111213;        /* paneles */
  --text: #f5f5f5;        /* texto */
  --muted: #b8b8b8;       /* texto tenue */
  --gold: #d4af37;        /* Eleganz gold */
  --gold-2: #b9962f;
  --border: #222326;
  --accent: #1b1c1e;
  --danger: #ff4d4d;

  /* Sobrescribir variables Bootstrap 5 para forzar tema oscuro */
  --bs-body-color: #f5f5f5;
  --bs-body-color-rgb: 245,245,245;
  --bs-body-bg: #0b0b0b;
  --bs-secondary-color: rgba(245,245,245,.65);
  --bs-tertiary-color: rgba(245,245,245,.4);
  --bs-border-color: #222326;
  --bs-card-color: #f5f5f5;
  --bs-card-bg: #111213;
  --bs-card-border-color: #222326;
  --bs-link-color: #d4af37;
  --bs-link-hover-color: #b9962f;
  --bs-progress-bg: #222326;
  --bs-progress-bar-bg: #d4af37;
  --bs-form-label-color: #f5f5f5;
  /* Variables de tabla Bootstrap */
  --bs-table-color: #f5f5f5;
  --bs-table-bg: transparent;
  --bs-table-striped-color: #f5f5f5;
  --bs-table-hover-color: #f5f5f5;
  --bs-table-active-color: #f5f5f5;
  --bs-table-border-color: #222326;
}

html, body{
  background: var(--bg);
  color: var(--text);
}

/* Asegura que los botones del menú se vean activos aunque sean .btn-outline-... */
.navbar .nav-link.active{
  color:#0b0b0b !important;
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  border-radius:.5rem;
}
/* Bootstrap usa vars en .btn; esto fuerza el estado activo */
.navbar .btn.active{
  --bs-btn-bg: var(--gold) !important;
  --bs-btn-border-color: var(--gold) !important;
  --bs-btn-color: #0b0b0b !important;
}



.navbar{
  background: linear-gradient(180deg, #0b0b0b, #121212);
  border-bottom: 1px solid var(--border);
}

.card{
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

.form-control, .form-select, .form-check-input, textarea.form-control{
  background: var(--accent);
  color: var(--text);
  border: 1px solid var(--border);
}
.form-control:focus, .form-select:focus{
  background: var(--accent);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(212,175,55,.2);
}
.form-control::placeholder{ color: var(--muted); }
.form-label{ color: var(--text); }

.table{
  color: var(--text);
}
/* Bootstrap 5 asigna color explícitamente a cada celda via --bs-table-color;
   esta regla lo fuerza a nuestro color independientemente de las variables. */
.table > :not(caption) > * > * {
  color: var(--text);
  border-color: var(--border);
}
.table thead th{
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table td, .table th{
  border-color: var(--border);
}

.btn-eleganz{
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b0b;
}
.btn-eleganz:hover{
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: #0b0b0b;
}
.btn-outline-eleganz{
  border-color: var(--gold);
  color: var(--gold);
}
.btn-outline-eleganz:hover{
  background: var(--gold);
  color: #0b0b0b;
}

.link-eleganz{
  color: var(--gold);
  text-decoration: none;
}
.link-eleganz:hover{
  color: var(--gold-2);
  text-decoration: underline;
}

/* Login card centrado */
.auth-wrapper{
  min-height: 100dvh;
  display: grid;
  place-items: center;
}
.brand-logo{
  height: 28px;
}

/* Chips/contadores del dashboard */
.stat-card h6{
  color: var(--muted);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
}
.display-6{
  color: var(--gold);
}

/* Login: logo más grande dentro de la card */
.brand-logo-lg{ height: 148px; }  /* ajusta 48→56 si lo quieres aún más grande */
.login-card{ min-width:320px; max-width:420px; } /* card un poquito más ancha */


/* ===== Tabla Eleganz ===== */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;              /* redondeado real */
  background: var(--bg-2);
}

/* sticky header */
.table-eleganz thead th {
  position: sticky;
  top: 0;
  background: #0f0f10;           /* más oscuro para header */
  z-index: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* filas */
.table-eleganz tbody tr {
  transition: background .15s ease, transform .05s ease;
}
.table-eleganz tbody tr:nth-child(even) {
  background: rgba(255,255,255,.02);
}
.table-eleganz tbody tr:hover {
  background: rgba(212,175,55,.08); /* dorado suave */
}

/* celdas */
.table-eleganz td, .table-eleganz th {
  border-color: var(--border);
  vertical-align: middle;
}

/* “pill” de estado */
.badge-pill {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
  border: 1px solid var(--border);
  color: var(--text);
  background: #151516;
}
.badge-pill.ok {
  border-color: #2f7d32;
  background: rgba(47,125,50,.15);
}
.badge-pill.off {
  border-color: #7d2f2f;
  background: rgba(125,47,47,.15);
}

/* acciones compactas a la derecha */
.action-cell .btn {
  padding: .25rem .5rem;
  font-size: .8rem;
}

/* estado vacío bonito */
.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}
.empty-state .emoji {
  font-size: 1.6rem;
  display: block;
  margin-bottom: .5rem;
}


/* ===== Card Eleganz para tablas ===== */
.card-eleganz {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;           /* oculta esquinas de la tabla */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.card-eleganz .card-header {
  background: linear-gradient(180deg, #0f0f10, #0c0c0c);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: .9rem 1rem;
}

.card-eleganz .card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.card-eleganz .card-body {
  padding: 0;                 /* la tabla ocupa todo el cuerpo */
}

/* Tabla elegante (de antes) */
.table-wrap { border: none; border-radius: 0; background: transparent; }
.table-eleganz thead th {
  position: sticky; top: 0; z-index: 1;
  background: #0f0f10;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  font-size: .78rem; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table-eleganz tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }
.table-eleganz tbody tr:hover{ background: rgba(212,175,55,.08); }
.table-eleganz td, .table-eleganz th{ border-color: var(--border); vertical-align: middle; }

/* Pills estado */
.badge-pill{ display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.75rem; line-height:1; border:1px solid var(--border); color:var(--text); background:#151516; }
.badge-pill.ok{ border-color:#2f7d32; background:rgba(47,125,50,.15); }
.badge-pill.off{ border-color:#7d2f2f; background:rgba(125,47,47,.15); }

.action-cell .btn{ padding:.25rem .5rem; font-size:.8rem; }

/* Empty state dentro del card */
.empty-state{ padding:2rem; text-align:center; color:var(--muted); }
.empty-state .emoji{ font-size:1.6rem; display:block; margin-bottom:.5rem; }


.t-avatar {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #1a1b1d;
  border: 1px solid var(--border);
}
.t-avatar-wrap {
  display: inline-flex; align-items: center; gap: .6rem;
}
.t-avatar-play {
  position: relative;
}
.t-avatar-play::after{
  content: "▶";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .8rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}


/* compacta paddings y gutters */
.row.g-tight{ --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
.card-eleganz .card-body{ padding:.75rem; }
.card-eleganz .card-header{ padding:.5rem .75rem; }
.table-eleganz > :is(thead>tr>th,tbody>tr>td){ padding:.45rem .6rem; }
.t-avatar{ width:46px;height:46px; border-radius:.5rem; object-fit:cover; background:#222; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 767.98px) {
  /* Touch targets mínimo 44px */
  .btn { min-height: 38px; min-width: 38px; }
  .btn-sm { min-height: 36px; font-size: .82rem; padding: .4rem .65rem; }
  .action-cell .btn { min-height: 36px; padding: .35rem .6rem; font-size: .8rem; }

  /* Tablas: scroll horizontal suave */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-eleganz > :is(thead>tr>th, tbody>tr>td) { padding: .4rem .5rem; white-space: nowrap; }

  /* Cards menos padding */
  .card-eleganz .card-body { padding: .5rem; }
  .card-eleganz .card-header { padding: .5rem .65rem; }
  .card-eleganz { border-radius: 12px; }

  /* Container full width */
  .container { padding-left: .75rem; padding-right: .75rem; }

  /* Títulos h4 más compactos */
  h4 { font-size: 1.2rem; }
  h5 { font-size: 1.05rem; }

  /* Phone actions: no wrap */
  .phone-actions { white-space: nowrap; }

  /* Botones de acción en columna en móvil */
  .action-cell .d-inline-flex { flex-wrap: wrap; }

  /* Modal fullscreen en móvil */
  .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
  .modal-body { max-height: 75vh; overflow-y: auto; }

  /* Navbar botones más grandes para touch */
  .navbar .nav-link.btn { padding: .45rem .7rem; font-size: .85rem; }

  /* Badge pills */
  .badge-pill { font-size: .72rem; padding: .3rem .5rem; }

  /* Filtros: botones full width */
  .card-eleganz form .btn { width: 100%; }
}

/* Pantallas muy pequeñas (<400px) */
@media (max-width: 399.98px) {
  .container { padding-left: .5rem; padding-right: .5rem; }
  h4 { font-size: 1.1rem; }
  .btn-sm { font-size: .78rem; padding: .35rem .5rem; }
  .t-avatar { width: 38px; height: 38px; }
}