/* ============================================================
   ServiFlow — tema con identidad por empresa + modo oscuro
   --sf-primary / --sf-secondary se inyectan inline por empresa.
   ============================================================ */
:root {
    --sf-primary: #0ea5e9;          /* azul claro (sky) */
    --sf-secondary: #64748b;
    --sf-primary-rgb: 14, 165, 233;

    --sf-bg: #f1f5f9;
    --sf-surface: #ffffff;
    --sf-surface-2: #f8fafc;
    --sf-text: #1e293b;
    --sf-muted: #64748b;
    --sf-border: #e2e8f0;
    --sf-sidebar: #0f172a;
    --sf-sidebar-text: #cbd5e1;
    --sf-radius: 14px;
    --sf-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --sf-shadow: 0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.05);
}

[data-theme="dark"] {
    --sf-bg: #0b1220;
    --sf-surface: #111c31;
    --sf-surface-2: #0f1a2c;
    --sf-text: #e2e8f0;
    --sf-muted: #94a3b8;
    --sf-border: #25344d;
    --sf-sidebar: #0a101d;
    --sf-sidebar-text: #cbd5e1;
    --sf-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --sf-shadow: 0 8px 24px rgba(0,0,0,.4);
}

* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
h1,h2,h3,h4,h5,h6,.h-display { font-family: 'Poppins', sans-serif; }
body { background: var(--sf-bg); color: var(--sf-text); }

/* Acentos con el color principal de la empresa */
.btn-primary {
    --bs-btn-bg: var(--sf-primary);
    --bs-btn-border-color: var(--sf-primary);
    --bs-btn-hover-bg: var(--sf-primary);
    --bs-btn-hover-border-color: var(--sf-primary);
    --bs-btn-active-bg: var(--sf-primary);
    --bs-btn-disabled-bg: var(--sf-primary);
    filter: saturate(1);
    font-weight: 600;
}
.btn-primary:hover { filter: brightness(.92); }
.text-primary { color: var(--sf-primary) !important; }
a { color: var(--sf-primary); }

/* ---------- Layout ---------- */
.sf-layout { display: flex; min-height: 100vh; }
.sf-sidebar {
    width: 264px; background: var(--sf-sidebar); color: var(--sf-sidebar-text);
    flex-shrink: 0; display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 1040; transition: transform .25s ease;
}
.sf-brand {
    padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: .65rem;
    border-bottom: 1px solid rgba(255,255,255,.08); color: #fff;
    font-family: 'Poppins',sans-serif; font-weight: 700; font-size: 1.15rem;
}
.sf-brand img { max-height: 34px; max-width: 38px; object-fit: contain; border-radius: 6px; }
.sf-brand .dot {
    width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
    background: var(--sf-primary); color: #fff; font-size: 1.1rem;
}
.sf-nav { padding: .9rem .7rem; overflow-y: auto; flex: 1; }
.sf-nav__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; padding: .8rem .75rem .3rem; }
.sf-nav__link {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px;
    color: var(--sf-sidebar-text); text-decoration: none; font-weight: 500; font-size: .92rem; margin-bottom: 2px;
    transition: background .15s, color .15s;
}
.sf-nav__link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.sf-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sf-nav__link.active { background: var(--sf-primary); color: #fff; }

.sf-main { flex: 1; margin-left: 264px; display: flex; flex-direction: column; min-width: 0; }
.sf-topbar {
    background: var(--sf-surface); border-bottom: 1px solid var(--sf-border);
    padding: .8rem 1.4rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1030;
}
.sf-topbar__title { font-weight: 600; font-size: 1.05rem; margin: 0; }
.sf-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sf-primary); color: #fff; display: grid; place-items: center; font-weight: 600; }
.sf-content { padding: 1.6rem 1.4rem; }
.sf-iconbtn { background: var(--sf-surface-2); border: 1px solid var(--sf-border); color: var(--sf-text); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }

/* ---------- Tarjetas ---------- */
.sf-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow-sm); color: var(--sf-text); }
.sf-stat { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 1.2rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--sf-shadow-sm); transition: transform .15s, box-shadow .15s; }
.sf-stat:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow); }
.sf-stat__icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.sf-stat__value { font-size: 1.7rem; font-weight: 700; line-height: 1; font-family: 'Poppins',sans-serif; }
.sf-stat__label { color: var(--sf-muted); font-size: .82rem; margin-top: .25rem; }
.sf-ic-primary { background: rgba(var(--sf-primary-rgb), .14); color: var(--sf-primary); }
.sf-ic-green { background: #dcfce7; color: #16a34a; }
.sf-ic-amber { background: #fef3c7; color: #d97706; }
.sf-ic-red   { background: #fee2e2; color: #dc2626; }
.sf-ic-violet{ background: #ede9fe; color: #7c3aed; }
.sf-ic-cyan  { background: #cffafe; color: #0891b2; }
[data-theme="dark"] .sf-ic-green{background:rgba(22,163,74,.2)} [data-theme="dark"] .sf-ic-amber{background:rgba(217,119,6,.2)}
[data-theme="dark"] .sf-ic-red{background:rgba(220,38,38,.2)} [data-theme="dark"] .sf-ic-violet{background:rgba(124,58,237,.2)}
[data-theme="dark"] .sf-ic-cyan{background:rgba(8,145,178,.2)}

/* Tablas y forms en dark */
.sf-card .table { color: var(--sf-text); margin: 0; }
.sf-card .table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sf-muted); border-color: var(--sf-border); }
.sf-card .table td { border-color: var(--sf-border); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
    background: var(--sf-surface-2); border-color: var(--sf-border); color: var(--sf-text);
}
[data-theme="dark"] .form-control::placeholder { color: #64748b; }
.sf-badge-soft { background: var(--sf-surface-2); border: 1px solid var(--sf-border); color: var(--sf-muted); padding: .15rem .5rem; border-radius: 6px; font-size: .75rem; }

/* ---------- Login ---------- */
.sf-guest {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background:
        radial-gradient(1100px 500px at 8% -10%, rgba(var(--sf-primary-rgb), .25), transparent),
        radial-gradient(900px 500px at 110% 110%, rgba(var(--sf-primary-rgb), .15), transparent),
        #0b1220;
}
.sf-guest__card { width: 100%; max-width: 410px; background: var(--sf-surface); border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,.4); padding: 2.4rem; }
.sf-guest__brand { text-align: center; font-family: 'Poppins',sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: .2rem; }
.sf-guest__brand i, .sf-guest__brand .dot { color: var(--sf-primary); }

/* ---------- Responsive ---------- */
.sf-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sf-sidebar { transform: translateX(-100%); }
    .sf-sidebar.show { transform: translateX(0); }
    .sf-main { margin-left: 0; }
    .sf-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; }
}