/* ============================================================
   VELARMONÍA — Sistema de diseño "Rosa madurado"
   Identidad granate/rosa, sobria: sin gradientes, sin emojis,
   densidad alta y bordes suaves. Convive con Tailwind (CDN).
   Prefijo de clases: vk-
   ============================================================ */

:root {
    --vk-bg:          #FBF8F9;   /* fondo de la app (rosa muy tenue) */
    --vk-surface:     #FFFFFF;   /* tarjetas, tablas */
    --vk-surface-2:   #FAF6F7;   /* cabeceras de tabla, zonas suaves */
    --vk-border:      #ECE3E6;   /* líneas finas */
    --vk-border-2:    #F3ECEE;

    --vk-text:        #211B20;   /* texto principal */
    --vk-text-soft:   #6B6470;   /* texto secundario */
    --vk-text-faint:  #9A929A;   /* etiquetas, placeholders */

    --vk-primary:     #8B2942;   /* granate (acción / acento) */
    --vk-primary-700: #6F2035;
    --vk-primary-soft:#F7EDF0;   /* fondo rosa palo (estado activo, badges) */
    --vk-rosa:        #E9AEBB;

    --vk-ok:          #2F7D5A;  --vk-ok-soft:     #E9F4EF;
    --vk-warn:        #A86A12;  --vk-warn-soft:   #FBF1DF;
    --vk-danger:      #C0392B;  --vk-danger-soft: #FBEAE8;

    --vk-radius:      10px;
    --vk-radius-sm:   8px;
    --vk-shadow:      0 1px 2px rgba(33,27,32,.04), 0 1px 3px rgba(33,27,32,.06);
}

body {
    background: var(--vk-bg);
    color: var(--vk-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografía ---------- */
.vk-title    { font-size: 1.25rem; font-weight: 600; color: var(--vk-text); line-height: 1.2; }
.vk-subtitle { font-size: .875rem; color: var(--vk-text-soft); margin-top: .15rem; }
.vk-eyebrow  { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--vk-text-faint); font-weight: 600; }

/* ---------- Tarjetas ---------- */
.vk-card {
    background: var(--vk-surface);
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius);
    box-shadow: var(--vk-shadow);
}
.vk-card--pad { padding: 1rem 1.25rem; }

/* ---------- KPIs (compactos) ---------- */
.vk-kpi {
    background: var(--vk-surface);
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius);
    padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.vk-kpi__label { font-size: .75rem; color: var(--vk-text-soft); display:flex; align-items:center; gap:.4rem; }
.vk-kpi__value { font-size: 1.5rem; font-weight: 700; color: var(--vk-text); letter-spacing: -.01em; }
.vk-kpi__value small { font-size: .8rem; font-weight: 600; color: var(--vk-text-faint); }
.vk-kpi__dot { width:.5rem; height:.5rem; border-radius:50%; background: var(--vk-rosa); }
.vk-kpi--warn  .vk-kpi__value { color: var(--vk-warn); }
.vk-kpi--danger .vk-kpi__value { color: var(--vk-danger); }
.vk-kpi--ok    .vk-kpi__value { color: var(--vk-ok); }

/* ---------- Botones ---------- */
.vk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .55rem .9rem; border-radius: var(--vk-radius-sm);
    font-size: .875rem; font-weight: 600; line-height: 1; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap; text-decoration: none;
}
.vk-btn--primary { background: var(--vk-primary); color: #fff; }
.vk-btn--primary:hover { background: var(--vk-primary-700); }
.vk-btn--ghost { background: var(--vk-surface); color: var(--vk-text); border-color: var(--vk-border); }
.vk-btn--ghost:hover { background: var(--vk-surface-2); }
.vk-btn--danger { background: var(--vk-danger); color: #fff; }
.vk-btn--danger:hover { filter: brightness(.93); }
.vk-btn--sm { padding: .4rem .65rem; font-size: .8rem; }
.vk-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.vk-label { display:block; font-size:.8rem; font-weight:500; color: var(--vk-text-soft); margin-bottom:.3rem; }
.vk-input, .vk-select {
    width: 100%; padding: .55rem .75rem; font-size: .9rem; color: var(--vk-text);
    background: var(--vk-surface); border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius-sm); outline: none; transition: border-color .15s, box-shadow .15s;
}
.vk-input:focus, .vk-select:focus { border-color: var(--vk-rosa); box-shadow: 0 0 0 3px rgba(233,174,187,.25); }
.vk-input::placeholder { color: var(--vk-text-faint); }

/* ---------- Tablas densas ---------- */
.vk-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vk-table thead th {
    text-align: left; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase;
    color: var(--vk-text-faint); font-weight: 600; padding: .6rem .9rem;
    background: var(--vk-surface-2); border-bottom: 1px solid var(--vk-border);
}
.vk-table tbody td { padding: .65rem .9rem; border-bottom: 1px solid var(--vk-border-2); color: var(--vk-text); }
.vk-table tbody tr:last-child td { border-bottom: 0; }
.vk-table tbody tr:hover { background: var(--vk-surface-2); }
.vk-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges / estados ---------- */
.vk-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    background: var(--vk-primary-soft); color: var(--vk-primary);
}
.vk-badge--ok     { background: var(--vk-ok-soft);     color: var(--vk-ok); }
.vk-badge--warn   { background: var(--vk-warn-soft);   color: var(--vk-warn); }
.vk-badge--danger { background: var(--vk-danger-soft); color: var(--vk-danger); }
.vk-badge--muted  { background: #F1EEF0; color: var(--vk-text-soft); }

/* ---------- Navegación lateral (sobria, sin gradiente) ---------- */
.vk-nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .8rem; border-radius: var(--vk-radius-sm);
    color: var(--vk-text-soft); font-weight: 500; font-size: .9rem;
    transition: background .15s, color .15s; position: relative; text-decoration: none;
}
.vk-nav-link:hover { background: var(--vk-surface-2); color: var(--vk-text); }
.vk-nav-link.is-active { background: var(--vk-primary-soft); color: var(--vk-primary); font-weight: 600; }
.vk-nav-link.is-active::before {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px; background: var(--vk-primary);
}
.vk-nav-link i { width: 1.15rem; text-align: center; font-size: .95rem; }

/* ---------- Barra de navegación inferior (móvil) ---------- */
.vk-bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--vk-surface); border-top: 1px solid var(--vk-border);
    display: flex; padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
}
.vk-bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .45rem 0; color: var(--vk-text-faint); font-size: .65rem; font-weight: 600;
    text-decoration: none; border-radius: var(--vk-radius-sm);
}
.vk-bottomnav a i { font-size: 1.15rem; }
.vk-bottomnav a.is-active { color: var(--vk-primary); }

/* Empuja el contenido para que la barra inferior no tape nada (solo móvil) */
@media (max-width: 767px) {
    .vk-has-bottomnav { padding-bottom: 4.75rem; }
}

/* ---------- Utilidades ---------- */
.vk-divider { height: 1px; background: var(--vk-border); border: 0; margin: 0; }
.vk-link { color: var(--vk-primary); font-weight: 600; text-decoration: none; }
.vk-link:hover { text-decoration: underline; }

/* ============================================================
   MÓVIL: que no se vea apelotonado
   ============================================================ */
@media (max-width: 768px) {
    /* Tablas densas: celdas en una línea para que la tabla se deslice en
       horizontal (dentro de su contenedor .vk-scroll) en vez de apretujarse.
       NO se usa display:block en la tabla para no desalinear columnas. */
    .vk-table th, .vk-table td { padding: .7rem .8rem; white-space: nowrap; }
    .vk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Más aire entre tarjetas y dentro de ellas */
    .vk-card--pad { padding: 1rem; }
    .vk-kpi { padding: .9rem 1rem; }
    .vk-kpi__value { font-size: 1.35rem; }

    /* Títulos un poco más contenidos */
    .vk-title { font-size: 1.15rem; }

    /* Botones cómodos para el dedo */
    .vk-btn { padding: .6rem .9rem; }

    /* La barra inferior no debe tapar el contenido */
    .vk-has-bottomnav { padding-bottom: 5rem; }
}

/* En pantallas muy estrechas, los grids de tarjetas/KPIs no se aprietan tanto */
@media (max-width: 380px) {
    .vk-kpi__value { font-size: 1.2rem; }
}