/* ============================================================================
   Beauty & Spa Manager  —  assets/css/style.css
   ----------------------------------------------------------------------------
   Hoja de estilos maestra: variables de tema (claro/oscuro), reset, layout
   responsive del shell (sidebar + topbar) y clases comunes reutilizables.

   Los modelos HTML usan estilos en línea con var(--token, fallback). Aquí
   definimos esos tokens una sola vez para todo el sitio. El modo oscuro se
   activa con la clase .dark en <html> (la maneja app.js + localStorage).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Variables de tema
   --------------------------------------------------------------------------- */
:root {
  /* Paleta — Modo claro */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --text: #1F2937;
  --text2: #6B7280;
  --border: #EAECEF;
  --hover: #F4F6FA;
  --sidebar: #16213E;
  --sb-text: #AEB8CC;
  --sb-hover: #22315A;
  --topbar: #FFFFFF;
  --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);

  /* Acento de marca (degradado verde/teal) */
  --accent: #0DCAA8;
  --accent-2: #00B894;
  --accent-grad: linear-gradient(135deg, #0DCAA8, #00B894);

  /* Colores de estado / KPIs */
  --c-blue: #3B82F6;
  --c-green: #10B981;
  --c-orange: #F59E0B;
  --c-red: #EF4444;
  --c-purple: #8B5CF6;

  --radius: 14px;
  --radius-sm: 11px;
}

html.dark {
  /* Paleta — Modo oscuro */
  --bg: #0B1220;
  --surface: #16213E;
  --text: #F1F5F9;
  --text2: #94A3B8;
  --border: #243049;
  --hover: #1E2A45;
  --sidebar: #0E1830;
  --sb-text: #AEB8CC;
  --sb-hover: #1E2A45;
  --topbar: #16213E;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------
   2. Reset y base
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Scrollbar fina */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(120, 130, 150, .4); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   3. Sidebar — hover del menú y estado activo
   --------------------------------------------------------------------------- */
.bsm-navlink { transition: background .16s ease, color .16s ease; }
.bsm-navlink:not(.is-active):hover {
  background: var(--sb-hover, #22315A) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   4. style-hover genérico (lo aplica app.js; aquí solo una transición suave)
   --------------------------------------------------------------------------- */
[style-hover] { transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }

/* ---------------------------------------------------------------------------
   5. Backdrop del menú móvil
   --------------------------------------------------------------------------- */
.bsm-backdrop { display: none; }
.bsm-burger { display: none; }

/* ---------------------------------------------------------------------------
   6. Responsive del shell (igual que los modelos HTML)
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .bsm-charts, .bsm-lists, .bsm-bottom { flex-direction: column !important; }
  .bsm-col { width: 100% !important; flex: 1 1 auto !important; }
}

@media (max-width: 860px) {
  .bsm-sidebar {
    position: fixed !important;
    top: 0; left: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .26s ease;
  }
  .bsm-sidebar.open { transform: translateX(0); }
  .bsm-burger { display: inline-flex !important; }
  .bsm-search { display: none !important; }
  .bsm-hide-sm { display: none !important; }
  .bsm-backdrop.open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(8, 12, 24, .45);
    z-index: 55;
  }
}

@media (max-width: 760px) {
  .bsm-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .bsm-mini { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .bsm-kpis, .bsm-mini { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
   7. Clases comunes reutilizables (tarjetas, botones, badges, tablas, modales)
   ---------------------------------------------------------------------------
   No son obligatorias para replicar los HTML (que usan estilos en línea),
   pero ayudan a mantener coherencia en páginas nuevas.
   --------------------------------------------------------------------------- */
.bsm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.bsm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 13.5px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: all .16s ease;
}
.bsm-btn-primary {
  background: var(--accent-grad); color: #fff; border: none;
  box-shadow: 0 8px 16px rgba(13, 202, 168, .32);
}
.bsm-btn-primary:hover { filter: brightness(1.03); }
.bsm-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.bsm-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   8. Modales (los abre/cierra app.js)
   --------------------------------------------------------------------------- */
.bsm-modal {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 12, 24, .5);
  padding: 20px;
}
.bsm-modal.open { display: flex; }
.bsm-modal__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 12, 24, .35);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   9. Tabs (pestañas) — estilo activo lo gestiona app.js con .is-active
   --------------------------------------------------------------------------- */
.bsm-tab { cursor: pointer; }

/* ---------------------------------------------------------------------------
   10. Utilidades
   --------------------------------------------------------------------------- */
.bsm-hidden { display: none !important; }
.bsm-row-hover:hover { background: var(--hover); }