:root {
    --primary-color: #0073ea;
    --primary-hover-color: #0060b9;
    --primary-selected-color: #133774;
    --primary-highlighted-color: #0d2753;
    --primary-surface-color: #181b34;
    --primary-text-color: #d5d8df;
    --secondary-text-color: #9699a6;
    --text-color-on-inverted: #323338;
    --text-color-on-primary: #ffffff;
    --disabled-text-color: rgba(213, 216, 223, 0.4);
    --inverted-color-background: #ffffff;
    --fixed-dark-color: #323338;
    --fixed-light-color: #ffffff;
    --primary-background-color: #181b34;
    --primary-background-hover-color: rgba(103, 104, 121, 0.3);
    --secondary-background-color: #30324e;
    --allgrey-background-color: #30324e;
    --backdrop-color: rgba(41, 47, 76, 0.7);
    --ui-border-color: #797e93;
    --ui-background-color: #434660;
    --ui-background-hover-color: #35384d;
    --layout-border-color: #4b4e69;
    --placeholder-color: #c3c6d4;
    --icon-color: #c3c6d4;
    --disabled-background-color: #3c3f59;
    --link-color: #69a7ef;
    --brand-color: #0073ea;
    --brand-hover-color: #0060b9;
    --brand-selected-color: #133774;
    --positive-color: #00854d;
    --positive-color-hover: #007038;
    --positive-color-selected: #025231;
    --negative-color: #d83a52;
    --negative-color-hover: #b63546;
    --negative-color-selected: #642830;
    --warning-color: #ffcb00;
    --warning-color-hover: #eaaa15;
    --grey-background-color: #181b34;
    --text-color-on-brand: #ffffff;
    --color-surface: #292f4c;
    --box-shadow-xs: 0px 4px 6px -4px rgba(9, 11, 25, 0.5);
    --box-shadow-small: 0px 4px 8px rgba(9, 11, 25, 0.5);
    --box-shadow-medium: 0px 6px 20px rgba(9, 11, 25, 0.5);
    --box-shadow-large: 0px 15px 50px rgba(9, 11, 25, 0.5);
    --application-background-color: #1c1f3b;
    --surface-color: #292f4c;
    --surface-border-color: #4b4e69;
    --card-background-color: #30324e;
    --card-hover-background-color: #4b4e69;
    --card-border-color: #5a5c74;

    /* Tipografía monday */
    --font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
    --title-font-family: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 500;
    --font-size-h1: 26px;
    --font-size-h2: 18px;
    --font-size-h3: 16px;
    --font-size-h4: 14px;
    --font-size-h5: 13px;
    --font-size-paragraph: 13px;
    --font-size-subtext: 11px;
    --font-size-general-label: 11px;
}

body, body#main {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    background-color: var(--application-background-color);
    color: var(--primary-text-color);
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

h1, h2, h3, h4, h5 {
    font-family: var(--title-font-family);
    color: var(--fixed-light-color);
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--text-color-on-primary);
    z-index: 1001;
    font-size: var(--font-size-paragraph);
    box-shadow: var(--box-shadow-medium);
}
.toast.success { background: var(--positive-color); }
.toast.error { background: var(--negative-color); }

/* Botones genéricos */
.btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-paragraph);
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}
.btn-primary { background: var(--primary-color); color: var(--text-color-on-primary); }
.btn-primary:hover { background: var(--primary-hover-color); }
.btn-danger { background: var(--negative-color); color: var(--text-color-on-primary); }
.btn-danger:hover { background: var(--negative-color-hover); }
.btn-sm { padding: 3px 8px; font-size: var(--font-size-subtext); }

/* Tablas estilo monday */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-background-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow-small);
}
th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--font-size-general-label);
    font-weight: var(--font-weight-bold);
    font-family: var(--title-font-family);
    background: var(--primary-surface-color);
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--layout-border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
td {
    padding: 10px 16px;
    font-size: var(--font-size-paragraph);
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--surface-border-color);
}
tr:hover td { background: var(--card-hover-background-color); }
tr:last-child td { border-bottom: none; }

/* Badges/chips */
.badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-subtext);
    color: var(--primary-text-color);
    background: var(--ui-background-color);
}

/* Enlaces */
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--primary-hover-color); }

/* Inputs */
input, select, textarea {
    font-family: var(--font-family);
    font-size: var(--font-size-paragraph);
    color: var(--primary-text-color);
    background: var(--ui-background-color);
    border: 1px solid var(--ui-border-color);
    border-radius: 6px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--primary-background-color); }
::-webkit-scrollbar-thumb { background: var(--ui-border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary-text-color); }

/* Loading */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--secondary-text-color);
}
.empty {
    text-align: center;
    padding: 60px;
    color: var(--secondary-text-color);
}
.empty h2 { margin-bottom: 10px; color: var(--primary-text-color); }