/* =========================================================================
   VacationCMS — estilos del panel
   Inspirado en Filament / Laravel Nova / Stripe Dashboard.
   Se apoya en Bootstrap 5 (vendorizado) y añade tokens y componentes propios.
   ========================================================================= */

:root {
    --vc-sidebar-bg: #0f172a;      /* slate-900 */
    --vc-sidebar-bg-2: #111c33;
    --vc-sidebar-fg: #cbd5e1;
    --vc-sidebar-active: #2563eb;  /* blue-600 */
    --vc-bg: #f1f5f9;              /* slate-100 */
    --vc-card: #ffffff;
    --vc-border: #e5e9f0;
    --vc-text: #1e293b;
    --vc-muted: #64748b;
    --vc-primary: #2563eb;
    --vc-radius: 14px;
    --vc-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --vc-sidebar-w: 256px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--vc-bg);
    color: var(--vc-text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
}

/* ---- Layout general ---------------------------------------------------- */
.vc-shell { display: flex; min-height: 100vh; }

.vc-sidebar {
    width: var(--vc-sidebar-w);
    background: var(--vc-sidebar-bg);
    color: var(--vc-sidebar-fg);
    position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column;
    z-index: 1030;
}
.vc-main {
    flex: 1;
    margin-left: var(--vc-sidebar-w);
    min-width: 0;
}

/* ---- Marca / logo ------------------------------------------------------ */
.vc-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.25rem;
    color: #fff; font-weight: 700; font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.vc-brand .vc-logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
}

/* ---- Usuario en sidebar ------------------------------------------------ */
.vc-user {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.vc-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: #1e293b; color: #fff; display: grid; place-items: center;
    font-weight: 600; text-transform: uppercase;
}
.vc-user small { color: #22c55e; }

/* ---- Navegación -------------------------------------------------------- */
.vc-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.vc-nav .vc-section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: #64748b; padding: .9rem .75rem .35rem;
}
.vc-nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem; margin: 2px 0;
    color: var(--vc-sidebar-fg); text-decoration: none;
    border-radius: 9px; font-weight: 500;
    transition: background .12s, color .12s;
}
.vc-nav a i { font-size: 1.05rem; width: 20px; text-align: center; }
.vc-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.vc-nav a.active { background: var(--vc-sidebar-active); color: #fff; }

/* ---- Topbar ------------------------------------------------------------ */
.vc-topbar {
    background: var(--vc-card);
    border-bottom: 1px solid var(--vc-border);
    padding: .85rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
}
.vc-topbar h1 { font-size: 1.15rem; font-weight: 700; margin: 0; }

/* ---- Contenido --------------------------------------------------------- */
.vc-content { padding: 1.5rem; }

/* ---- Tarjetas ---------------------------------------------------------- */
.vc-card {
    background: var(--vc-card);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
}
.vc-card .vc-card-head {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--vc-border);
    font-weight: 600; display: flex; align-items: center; justify-content: space-between;
}
.vc-card .vc-card-body { padding: 1.25rem; }

/* ---- Tarjetas de estadística ------------------------------------------ */
.vc-stat {
    background: var(--vc-card); border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius); padding: 1.15rem 1.25rem;
    box-shadow: var(--vc-shadow); display: flex; align-items: center; gap: 1rem;
}
.vc-stat .vc-stat-ico {
    width: 52px; height: 52px; border-radius: 13px; flex: none;
    display: grid; place-items: center; font-size: 1.5rem;
}
.vc-stat .vc-stat-val { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.vc-stat .vc-stat-lbl { color: var(--vc-muted); font-size: .82rem; margin-top: .2rem; }
.ico-blue   { background: #dbeafe; color: #2563eb; }
.ico-amber  { background: #fef3c7; color: #d97706; }
.ico-green  { background: #dcfce7; color: #16a34a; }
.ico-violet { background: #ede9fe; color: #7c3aed; }

/* ---- Tablas ------------------------------------------------------------ */
.vc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.vc-table th {
    text-align: left; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--vc-muted); font-weight: 600;
    padding: .7rem 1rem; border-bottom: 1px solid var(--vc-border);
    background: #f8fafc;
}
.vc-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--vc-border); vertical-align: middle; }
.vc-table tr:last-child td { border-bottom: 0; }
.vc-table tbody tr:hover { background: #f8fafc; }

/* ---- Badges ------------------------------------------------------------ */
.badge { font-weight: 600; padding: .35em .6em; border-radius: 7px; }

/* ---- Botones ----------------------------------------------------------- */
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary { background: var(--vc-primary); border-color: var(--vc-primary); }

/* ---- Formularios ------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .85rem; }
.form-control, .form-select { border-radius: 9px; border-color: var(--vc-border); padding: .55rem .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--vc-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* ---- Acciones rápidas -------------------------------------------------- */
.vc-quick { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.vc-quick a {
    border: 1px solid var(--vc-border); border-radius: 11px; padding: 1rem;
    text-align: center; text-decoration: none; color: var(--vc-text);
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    transition: border-color .12s, background .12s;
}
.vc-quick a:hover { border-color: var(--vc-primary); background: #f8fbff; }
.vc-quick a i { font-size: 1.4rem; color: var(--vc-primary); }

/* ---- Barra de progreso ------------------------------------------------- */
.vc-progress { height: 8px; background: #e5e9f0; border-radius: 6px; overflow: hidden; }
.vc-progress > span { display: block; height: 100%; background: #16a34a; }

/* ---- Responsive -------------------------------------------------------- */
.vc-burger { display: none; }
@media (max-width: 992px) {
    .vc-sidebar { transform: translateX(-100%); transition: transform .2s; }
    .vc-sidebar.open { transform: translateX(0); }
    .vc-main { margin-left: 0; }
    .vc-burger { display: inline-flex; }
}

/* ---- Contenedores de gráficas (altura fija para que Chart.js no crezca) ---- */
.vc-chart{ position:relative; width:100%; }
.vc-chart--donut{ height:260px; }
.vc-chart--bars{ height:240px; }
.vc-chart canvas{ max-height:100%; }