/* Design tokens — refresh visual estilo Twenty/Linear (Indigo + grises P3-like + densidad B2B).
   Mantiene los mismos nombres de variables que la versión anterior para que ningún template se rompa.
   Solo cambian valores y se añaden tokens nuevos (gray-1..12, indigo-1..12, escala radius/shadow/space).
*/

:root {
    /* Grises (12 niveles, equivalente HSL al P3 de Twenty) */
    --gray-1: 0 0% 100%;
    --gray-2: 0 0% 99%;
    --gray-3: 0 0% 98%;
    --gray-4: 0 0% 94%;
    --gray-5: 0 0% 92%;
    --gray-6: 0 0% 84%;
    --gray-7: 0 0% 80%;
    --gray-8: 0 0% 70%;
    --gray-9: 0 0% 60%;
    --gray-10: 0 0% 51%;
    --gray-11: 0 0% 40%;
    --gray-12: 0 0% 20%;

    /* Indigo Radix P3 (acento principal) */
    --indigo-1: 240 100% 99.5%;
    --indigo-2: 226 78% 98.5%;
    --indigo-3: 226 100% 96%;
    --indigo-4: 226 100% 93%;
    --indigo-5: 226 95% 88%;
    --indigo-6: 226 86% 82%;
    --indigo-7: 226 75% 73%;
    --indigo-8: 226 64% 60%;
    --indigo-9: 226 70% 55%;
    --indigo-10: 226 64% 52%;
    --indigo-11: 226 56% 50%;
    --indigo-12: 226 62% 23%;

    /* Aliases semánticos (lo que usan las templates) */
    --background: var(--gray-1);
    --foreground: var(--gray-12);

    --card: var(--gray-1);
    --card-foreground: var(--gray-12);

    --popover: var(--gray-1);
    --popover-foreground: var(--gray-12);

    --primary: var(--indigo-9);
    --primary-foreground: var(--gray-1);
    --primary-glow: var(--indigo-7);

    --secondary: var(--gray-3);
    --secondary-foreground: var(--gray-12);

    --muted: var(--gray-3);
    --muted-foreground: var(--gray-11);

    --accent: var(--gray-3);
    --accent-foreground: var(--gray-12);

    --destructive: 358 75% 59%;
    --destructive-foreground: 0 0% 100%;

    --success: 151 55% 41%;
    --success-foreground: 0 0% 100%;

    --warning: 35 90% 55%;
    --warning-foreground: 0 0% 11%;

    --border: var(--gray-5);
    --input: var(--gray-5);
    --ring: var(--indigo-9);

    /* Radius escala Twenty */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --radius: 8px;  /* default = md */

    /* Tipografía Twenty */
    --font-xxs: 0.625rem;
    --font-xs: 0.78rem;
    --font-sm: 0.86rem;
    --font-md: 0.93rem;
    --font-lg: 1.1rem;
    --font-xl: 1.4rem;
    --font-xxl: 1.75rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* Espacios densos B2B */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;

    /* Sombras escalonadas */
    --shadow-light: 0 1px 2px 0 hsl(0 0% 0% / 0.04), 0 1px 3px 0 hsl(0 0% 0% / 0.06);
    --shadow-medium: 0 4px 6px -1px hsl(0 0% 0% / 0.08), 0 2px 4px -1px hsl(0 0% 0% / 0.04);
    --shadow-strong: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.04);
    --shadow-elegant: var(--shadow-medium);
    --shadow-soft: var(--shadow-light);

    /* Sidebar */
    --sidebar-background: var(--gray-2);
    --sidebar-foreground: var(--gray-12);
    --sidebar-primary: var(--indigo-9);
    --sidebar-primary-foreground: var(--gray-1);
    --sidebar-accent: var(--gray-4);
    --sidebar-accent-foreground: var(--gray-12);
    --sidebar-border: var(--gray-5);
    --sidebar-ring: var(--indigo-9);

    --gradient-primary: linear-gradient(135deg, hsl(var(--indigo-9)), hsl(var(--indigo-11)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--gray-1)), hsl(var(--gray-3)));
}

.dark {
    /* Grises invertidos */
    --gray-1: 0 0% 9%;
    --gray-2: 0 0% 11%;
    --gray-3: 0 0% 13%;
    --gray-4: 0 0% 16%;
    --gray-5: 0 0% 19%;
    --gray-6: 0 0% 24%;
    --gray-7: 0 0% 30%;
    --gray-8: 0 0% 39%;
    --gray-9: 0 0% 49%;
    --gray-10: 0 0% 58%;
    --gray-11: 0 0% 71%;
    --gray-12: 0 0% 94%;

    --indigo-1: 226 35% 10%;
    --indigo-2: 226 40% 13%;
    --indigo-3: 226 50% 19%;
    --indigo-4: 226 55% 24%;
    --indigo-5: 226 55% 30%;
    --indigo-6: 226 53% 37%;
    --indigo-7: 226 53% 46%;
    --indigo-8: 226 55% 56%;
    --indigo-9: 226 70% 60%;
    --indigo-10: 226 70% 65%;
    --indigo-11: 226 90% 78%;
    --indigo-12: 226 95% 92%;

    --background: var(--gray-1);
    --foreground: var(--gray-12);

    --card: var(--gray-2);
    --card-foreground: var(--gray-12);

    --popover: var(--gray-2);
    --popover-foreground: var(--gray-12);

    --primary: var(--indigo-9);
    --primary-foreground: var(--gray-1);
    --primary-glow: var(--indigo-7);

    --secondary: var(--gray-4);
    --secondary-foreground: var(--gray-12);

    --muted: var(--gray-3);
    --muted-foreground: var(--gray-10);

    --accent: var(--gray-4);
    --accent-foreground: var(--gray-12);

    --destructive: 358 70% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: var(--gray-5);
    --input: var(--gray-5);
    --ring: var(--indigo-9);

    --sidebar-background: var(--gray-1);
    --sidebar-foreground: var(--gray-12);
    --sidebar-primary: var(--indigo-9);
    --sidebar-primary-foreground: var(--gray-1);
    --sidebar-accent: var(--gray-4);
    --sidebar-accent-foreground: var(--gray-12);
    --sidebar-border: var(--gray-5);
    --sidebar-ring: var(--indigo-9);

    --shadow-light: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --shadow-medium: 0 4px 6px -1px hsl(0 0% 0% / 0.5);
    --shadow-strong: 0 10px 15px -3px hsl(0 0% 0% / 0.6);
    --shadow-elegant: var(--shadow-medium);
    --shadow-soft: var(--shadow-light);

    --gradient-primary: linear-gradient(135deg, hsl(var(--indigo-9)), hsl(var(--indigo-11)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--gray-1)), hsl(var(--gray-2)));
}

/* Base */
html, body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--font-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Botones */
.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    transition: background 0.12s, transform 0.05s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    line-height: 1.4;
}
.btn-primary:hover { background: hsl(var(--indigo-10)); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: hsl(var(--gray-1));
    color: hsl(var(--gray-12));
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-secondary:hover { background: hsl(var(--gray-3)); border-color: hsl(var(--gray-6)); }

.btn-ghost {
    background: transparent;
    color: hsl(var(--foreground));
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    cursor: pointer;
    border: none;
    transition: background 0.12s;
}
.btn-ghost:hover { background: hsl(var(--muted)); }

.btn-destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    cursor: pointer;
    border: none;
}

.card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-light);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.card:hover { box-shadow: var(--shadow-medium); }
.card-elegant { box-shadow: var(--shadow-medium); }

.input {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: var(--font-sm);
    width: 100%;
    transition: border-color 0.12s, box-shadow 0.12s;
    line-height: 1.5;
}
.input:focus {
    outline: none;
    border-color: hsl(var(--indigo-9));
    box-shadow: 0 0 0 3px hsl(var(--indigo-9) / 0.15);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-xs);
    background: hsl(var(--gray-3));
    color: hsl(var(--gray-11));
    font-size: var(--font-xs);
    font-weight: var(--weight-medium);
    border: 1px solid hsl(var(--gray-5));
    line-height: 1.6;
    cursor: default;
}
.badge-success { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); }
.badge-warning { background: hsl(var(--warning) / 0.15); color: hsl(35 80% 35%); border-color: hsl(var(--warning) / 0.4); }
.badge-primary { background: hsl(var(--indigo-3)); color: hsl(var(--indigo-11)); border-color: hsl(var(--indigo-5)); }

/* Sidebar (más denso, Linear-like) */
.app-sidebar {
    background: hsl(var(--sidebar-background));
    color: hsl(var(--sidebar-foreground));
    border-right: 1px solid hsl(var(--sidebar-border));
}
.app-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    color: hsl(var(--gray-11));
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    line-height: 1.5;
}
.app-nav-item:hover { background: hsl(var(--gray-4)); color: hsl(var(--gray-12)); }
.app-nav-item.active {
    background: hsl(var(--indigo-3));
    color: hsl(var(--indigo-11));
    font-weight: var(--weight-semibold);
}

/* Tablas densas tipo Linear */
.tbl-dense { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.tbl-dense th { text-align: left; padding: 6px 10px; color: hsl(var(--gray-11)); font-weight: var(--weight-medium); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.04em; background: hsl(var(--gray-2)); border-bottom: 1px solid hsl(var(--border)); }
.tbl-dense td { padding: 6px 10px; border-bottom: 1px solid hsl(var(--border)); }
.tbl-dense tr:hover td { background: hsl(var(--gray-3)); }

/* Gradients & utilities */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-subtle { background: var(--gradient-subtle); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Mobile drawer */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: hsl(var(--foreground)); }
.sidebar-backdrop { display: none; }
.mobile-header { display: none; }
@media (max-width: 768px) {
    .app-sidebar.sidebar-mobile {
        position: fixed; top: 0; bottom: 0; left: -260px;
        width: 240px; z-index: 100; transition: left 0.2s ease;
    }
    .app-sidebar.sidebar-mobile.open {
        left: 0; box-shadow: var(--shadow-strong);
    }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: hsl(0 0% 0% / 0.5); z-index: 99; }
    .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); }
    .mobile-menu-btn:hover { background: hsl(var(--muted)); }
    .mobile-header {
        display: flex !important; align-items: center; gap: 8px;
        padding: 10px 14px; border-bottom: 1px solid hsl(var(--border));
        background: hsl(var(--background)); position: sticky; top: 0; z-index: 50;
    }
}