/* Modo claro */
:root {
    --bg-color: #ECF8F8;
    --text-color: #000000;

    --input-bg: #E4E6EB;

    --grid-header: var(--bg-light-grey);
    --grid-border: var(--border-color);
    --grid-tr: #F9FAFB;
    --grid-body: #FFFFFF;

    --card-bg: #FFFFFF;
    --card-border: #DEE2E6;
    --card-agents: #F8F9FA;

    --divs: #B0DFDF;

    --link-color: #0D6EFD;
    --link-hover: #0A58CA;

    --btn-bg: #0D6EFD;
    --btn-text: #FFFFFF;
    --btn-hover-bg: #0B5ED7;
    --btn-edit: #E0F2F7;
    --btn-hover-delete: #FDD1D1;

    --opacity: 0.9;
}

/* Modo oscuro */
[data-theme="dark"] {
    --bg-color: #0A0A0A;
    --text-color: #C7C7C2;

    --input-bg: #616161;

    --grid-header: #404040;
    --grid-border: #787878;
    --grid-tr: var(--input-bg);
    --grid-body: #484848;

    --border-color: var(--card-bg);

    --card-bg: #303030;
    --card-border: #5C5C5C;
    --card-agents: #454545;

    --divs: #4E7D7D;

    --link-color: #00D4FF;
    --link-hover: #00AACC;

    --btn-bg: #00AACC;
    --btn-text: #FFFFFF;
    --btn-hover-bg: #008899;
    --btn-edit: #46585D;
    --btn-hover-delete: var(--card-border);

    --opacity: 0.1;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: var(--text-color);
}

/* Enlaces */
a {
    color: var(--link-color);
    transition: color 0.3s ease;
}

/* Botones */
.btn-primary {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
}

/* Formularios */
input, select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: none !important;
    border-radius: var(--esquina-redondeada);
}
select:focus,
input:focus {
    box-shadow: 0px 0px 3px var(--input-bg) !important;
    outline: none !important;
}
input:disabled {
    background-color: var(--card-agents) !important;
    cursor: not-allowed;
}