/* =========================
   Firstmove Admin — Visual Refresh
   ========================= */
:root{
  --fm-primary: #000;        /* indigo */
  --fm-primary-2: #555555;      /* cyan */
  --fm-bg: #0b1220;             /* sidebar */
  --fm-bg-soft: #0e172a;
  --fm-card: #ffffff;
  --fm-muted: #6b7280;
  --fm-radius: 16px;
  --fm-shadow: 0 10px 25px rgba(2,8,23,.08);
}


.btn-strong-outline{
  --bd: var(--bs-border-color);
  --fg: var(--bs-body-color);
  background: var(--bs-body-bg);
  color: var(--fg);
  border: 2px solid var(--bd);            /* +1px de borde da más presencia */
  border-radius: 12px;
  font-weight: 800;
  padding: .65rem 1.05rem;
  line-height:1;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-strong-outline:hover{
  border-color: color-mix(in oklab, var(--bd), var(--bs-body-color) 35%);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.btn-strong-outline:focus-visible{ outline: 2px solid color-mix(in oklab, var(--bs-body-color), #fff 40%); outline-offset: 2px; }

.nav-link {
    color: #000;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s 
ease-in-out, background-color .15s 
ease-in-out, border-color .15s 
ease-in-out;
}

body{
  font-family: "Open Sans", sans-serif;
  background: #f6f7fb;
  color: #0f172a;
}

/* ===== Sidebar fijo izquierda ===== */
.fm-sidebar{
  width: 260px;
  background: var(--fm-bg);
  color: #e5e7eb;
  position: fixed; left:0; top:0; bottom:0;
  z-index: 1030;
}
.fm-sidebar .brand{
  padding:18px 20px; display:flex; align-items:center; gap:10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fm-sidebar .brand .logo{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--fm-primary), var(--fm-primary-2));
}
.fm-nav{ padding: 14px; }
.fm-nav .section{ padding:10px 10px 6px; font-size:11px; letter-spacing:.06em; color:#94a3b8; text-transform:uppercase; }
.fm-nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  color:#cbd5e1; text-decoration:none; border-radius:12px; transition: all .18s ease;
}
.fm-nav a:hover{ background: var(--fm-bg-soft); color:#fff; transform: translateX(2px); }
.fm-nav a.active{
  background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(34,211,238,.18));
  color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ===== Contenido a la derecha ===== */
.fm-main-wrap{ margin-left: 260px; }
@media (max-width: 991.98px){
  .fm-sidebar{ left:-270px; transition:left .25s ease; }
  .fm-sidebar.show{ left:0; }
  .fm-main-wrap{ margin-left:0; }
}

/* ===== Topbar translúcido ===== */
.fm-topbar.navbar{
  --bs-navbar-padding-y: .35rem;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  position: sticky; top:0; z-index: 1020; margin-bottom: 0 !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
.fm-topbar .container-fluid{ padding-top:0; padding-bottom:0; }
.fm-topbar .search{ max-width: 420px; }


/* ===== Cards (vidrio suave) ===== */
.card.fm{
  border: 1px solid rgba(2,6,23,.08); border-radius: var(--fm-radius);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  box-shadow: var(--fm-shadow);
}
.card.fm .card-title{ font-weight: 600; color: #0f172a; }

/* KPI Cards */
.kpi{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.kpi .kpi-meta .label{ color:#6b7280; font-size: .85rem; }
.kpi .number{ font-size: 1.8rem; font-weight: 700; letter-spacing: .3px; }
.kpi .trend{ font-size:.75rem; padding: .25rem .5rem; border-radius: 999px; }
.kpi .icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; color:#0f172a;
  background: linear-gradient(135deg, rgba(79,70,229,.18), rgba(34,211,238,.18));
}

/* Botones */
.btn-fm{ background: linear-gradient(135deg, var(--fm-primary), var(--fm-primary-2)); color:#fff; border:0; border-radius: 12px; }
.btn-fm:hover{ filter: brightness(.95); color:#fff; }
.btn-soft{ background:#eef2ff; color:#4338ca; border-radius:12px; }
.btn-outline-fm{ border:1px solid rgba(15,23,42,.12); border-radius:12px; }

/* Tablas */
.table> :not(caption)>*>*{ vertical-align: middle; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  border-radius:12px; border:1px solid rgba(2,6,23,.16);
}
.dataTables_wrapper .dataTables_filter input{ padding:.35rem .65rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:10px !important;
}

/* Espaciados */
.fm-main{ padding-top: 8px; }
.fm-main h1, .fm-main h2, .fm-main h3, .fm-main h4{ margin-top:0; }

/* Animaciones sutiles */
.card-hover{ transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.08); }

/* Utilidades */
.badge-soft{ background:#eef2ff; color:#4f46e5; }

/* ===== Dark Theme ===== */
#htmlRoot[data-theme="dark"] body{ background:#0b1020; color:#e5e7eb; }
#htmlRoot[data-theme="dark"] .fm-main{ background:#0b1020; }
#htmlRoot[data-theme="dark"] .fm-topbar.navbar{
  background: rgba(13,19,33,.7); border-bottom:1px solid rgba(255,255,255,.06);
}
#htmlRoot[data-theme="dark"] .fm-hero{
  background:
    radial-gradient(1200px 320px at 0% -40%, rgba(79,70,229,.20), transparent 60%),
    radial-gradient(900px 280px at 100% -30%, rgba(34,211,238,.18), transparent 60%),
    #0b1020;
  border-color: rgba(255,255,255,.08);
}
#htmlRoot[data-theme="dark"] .card.fm{
  background: rgba(17,24,39,.8); color:#e5e7eb; border-color: rgba(255,255,255,.08);
}
#htmlRoot[data-theme="dark"] .card.fm .card-title{ color:#fff; }
#htmlRoot[data-theme="dark"] .btn-soft{ background:#1e293b; color:#c7d2fe; }
#htmlRoot[data-theme="dark"] .badge-soft{ background:#1e293b; color:#a5b4fc; }

/* DataTables en dark */
#htmlRoot[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
#htmlRoot[data-theme="dark"] .dataTables_wrapper .dataTables_filter input{
  background:#0f172a; color:#e5e7eb; border-color: rgba(255,255,255,.16);
}
#htmlRoot[data-theme="dark"] table.dataTable>thead>tr>th{ background:#111827; color:#e5e7eb; }

.table-sticky thead th{
  position: sticky; top: 0; z-index: 2;
  background: #fff;
}
#htmlRoot[data-theme="dark"] .table-sticky thead th{ background:#111827; }

.table-striped>tbody>tr:hover> *{ background-color: rgba(79,70,229,.06) !important; }
#htmlRoot[data-theme="dark"] .table-striped>tbody>tr:hover> *{ background-color: rgba(79,70,229,.14) !important; }

/* Chips de rol */
.chip-role{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  font-size:.75rem; line-height:1; font-weight:600; margin:0 .25rem .25rem 0;
  border:1px solid transparent;
}
.chip-superadmin{
  color:#7c3aed; background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.24);
}
.chip-revisor{
  color:#0ea5e9; background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.24);
}
.chip-comercio{
  color:#16a34a; background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.24);
}

/* Dark mode */
#htmlRoot[data-theme="dark"] .chip-role{
  border-color: rgba(255,255,255,.14);
}

/* === Intentos "vencidos" (pending/initiated demasiado antiguos) === */
tr.row-overdue > *{ background-color: rgba(220,53,69,.06) !important; }
#htmlRoot[data-theme="dark"] tr.row-overdue > *{ background-color: rgba(220,53,69,.16) !important; }

/* Badge suave de alerta */
.badge-soft-danger{
  background: rgba(220,53,69,.12);
  color: #dc3545;
}
#htmlRoot[data-theme="dark"] .badge-soft-danger{
  background: rgba(220,53,69,.22);
  color: #ff6b81;
}

.badge.text-bg-warning{ font-weight:600; }



.site-topbar{
  position: sticky; top: 0; z-index: 1045; /* sobre dropdowns/headers */
 /* background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);*/
}

.site-topbar.overlay{
  background: transparent;
  border-bottom-color: transparent;
}

.fm-nav-pill{
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.4) blur(6px);
  border: 1px solid rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  .fm-nav-pill{
    background: rgba(20,20,20,.7);
    border-color: rgba(255,255,255,.08);
  }
}

/* Ajuste visual de los links */
.fm-nav-link{
  color: var(--bs-body-color);
}
.fm-nav-link:hover{
  color: var(--bs-primary);
}


/*DIA NOCHE*/
/* Botón icono */
.btn.btn-icon{
  --size:34px; width:var(--size); height:var(--size);
  padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.btn.btn-icon:hover{ background: var(--bs-tertiary-bg); }

/* Iconos controlados por JS (NO usar otras reglas para iconos) */
.btn.btn-icon .icon-sun, .btn.btn-icon .icon-moon{ display:none; }
.btn.btn-icon.is-light .icon-sun{ display:block; }   /* claro → sol */
.btn.btn-icon.is-dark  .icon-moon{ display:block; }  /* oscuro → luna */

/* Asegura que el tema impacte la UI (si usas colores custom, apóyate en variables) */
:root{ color-scheme: light dark; }
body, .site-topbar, .fm-nav-pill, .card, .modal, .dropdown-menu {
  /*background: var(--bs-body-bg);
  color: var(--bs-body-color);*/
  border-color: var(--bs-border-color);
}