:root {
    --font-primary: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bg-dark: #10141c;
    --bg-dark-secondary: #191f2c;
    --border-color: #313b5b;
    --color-accent: #17d4e8;
    --text-light: #e6f1ff;
    --text-gray: #8a96b3;

    /* Sobreescribir las variables de Bootstrap */
    --bs-body-bg: var(--bg-dark);
    --bs-body-color: var(--text-light);
    --bs-border-color: var(--border-color);
    --bs-secondary-bg: var(--bg-dark-secondary);
    
    /* Estilos para componentes de formularios */
    --bs-form-control-bg: var(--bg-dark-secondary);
    --bs-form-select-bg: var(--bg-dark-secondary);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
}

h1, h2 {
    font-weight: 300;
}

.card {
    background-color: var(--bg-dark-secondary);
    border: 1px solid var(--border-color);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--color-accent);
}

.form-control::placeholder {
    color: var(--text-gray);
    opacity: 0.6;
}

.dataTables_wrapper {
    --bs-table-striped-bg: rgba(17, 26, 44, 0.5);
    --bs-table-color: var(--text-light);
    --bs-table-border-color: var(--border-color);
}