html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   GLOBAL SOFT UI DESIGN SYSTEM (Ant Design Blazor Overrides)
   ========================================================================== */

/* --- Variables Globales Soft UI --- */
:root {
    --brand-blue: #1890ff;
    --soft-border-radius-lg: 12px; /* Cambiado a 12px según lo solicitado para cards/containers */
    --soft-border-radius-md: 12px;
    --soft-border-radius-sm: 8px;
    --soft-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
    --soft-box-shadow-hover: 0 20px 40px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.04);
    --soft-box-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --soft-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --soft-border-color: rgba(229, 231, 235, 0.8);
}

.ant-layout {
    background: #f0f2f5 !important;
}

/* --- Tarjetas (Cards) --- */
.ant-card {
    background: #ffffff !important;
    border-radius: var(--soft-border-radius-lg) !important;
    box-shadow: var(--soft-box-shadow) !important;
    border: 1px solid var(--soft-border-color) !important;
    transition: var(--soft-transition) !important;
}

.ant-card:hover {
    box-shadow: var(--soft-box-shadow-hover) !important;
}

.ant-card-head {
    border-top-left-radius: var(--soft-border-radius-lg) !important;
    border-top-right-radius: var(--soft-border-radius-lg) !important;
    border-bottom: 1px solid var(--soft-border-color) !important;
}

.ant-card-cover {
    border-top-left-radius: var(--soft-border-radius-lg) !important;
    border-top-right-radius: var(--soft-border-radius-lg) !important;
    overflow: hidden !important;
}

/* --- Contenedores de Tablas (Tables) --- */
.ant-table-wrapper {
    background: #ffffff !important;
    border-radius: var(--soft-border-radius-lg) !important;
    box-shadow: var(--soft-box-shadow) !important;
    border: 1px solid var(--soft-border-color) !important;
    overflow: hidden !important;
    transition: var(--soft-transition) !important;
}

.ant-table-wrapper:hover {
    box-shadow: var(--soft-box-shadow-hover) !important;
}

.ant-table {
    border-radius: var(--soft-border-radius-lg) !important;
    overflow: hidden !important;
}

.ant-table-container {
    border-radius: var(--soft-border-radius-lg) !important;
    overflow: hidden !important;
}

.ant-table-thead > tr > th {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--soft-border-color) !important;
    font-weight: normal !important;
}

.ant-table-thead > tr > th .ant-table-filter-trigger,
.ant-table-thead > tr > th .ant-table-column-sorter-up,
.ant-table-thead > tr > th .ant-table-column-sorter-down {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ant-table-thead > tr > th .ant-table-filter-trigger:hover,
.ant-table-thead > tr > th .ant-table-filter-trigger.active,
.ant-table-thead > tr > th .ant-table-column-sorter-up.active,
.ant-table-thead > tr > th .ant-table-column-sorter-down.active {
    color: #ffffff !important;
}

.ant-table-thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--soft-border-radius-lg) !important;
}

.ant-table-thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--soft-border-radius-lg) !important;
}

/* --- Modales (Modals) --- */
.ant-modal-content {
    border-radius: var(--soft-border-radius-lg) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--soft-border-color) !important;
    overflow: hidden !important;
}

.ant-modal-header {
    border-top-left-radius: var(--soft-border-radius-lg) !important;
    border-top-right-radius: var(--soft-border-radius-lg) !important;
    border-bottom: 1px solid var(--soft-border-color) !important;
}

/* --- Botones (Buttons) --- */
.ant-btn {
    border-radius: var(--soft-border-radius-md) !important;
    transition: var(--soft-transition) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.ant-btn-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3) !important;
}

.ant-btn-primary:hover {
    background-color: #40a9ff !important;
    border-color: #40a9ff !important;
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.45) !important;
    transform: translateY(-1px) !important;
}

.ant-btn:active {
    transform: translateY(1px) !important;
}

/* --- Pestañas (Tabs) --- */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--brand-blue) !important;
    font-weight: 500;
}

.ant-tabs-ink-bar {
    background: var(--brand-blue) !important;
}

.ant-tabs-tab:hover {
    color: var(--brand-blue) !important;
}

/* --- Controles de Entrada (Inputs, Selects, Pickers, InputNumber) --- */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker,
.ant-input-number {
    border-radius: var(--soft-border-radius-md) !important;
    border-color: #d9d9d9 !important;
    transition: var(--soft-transition) !important;
    box-shadow: var(--soft-box-shadow-input) !important;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused,
.ant-input-number-focused {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
    outline: none !important;
}