/* ============================================
   PALETA DE COLORES - COMERCIAL VENDEDORES
   ============================================ */

:root {
    /* ========== COLORES PRINCIPALES (60%) ========== */
    --primary-main: #1C4F8D;
    --primary-light: #2E6BB8;
    --primary-dark: #123862;
    --primary-hover: #154276;
    --primary-pressed: #0F3651;

    /* ========== COLORES SECUNDARIOS (30%) ========== */
    --secondary-main: #F4F5F7;
    --secondary-light: #FFFFFF;
    --secondary-dark: #E1E3E6;
    --secondary-hover: #EAECEF;

    /* ========== COLORES DE ACENTO (10%) ========== */
    /* Naranja - Para acciones principales */
    --accent-orange: #FF7043;
    --accent-orange-light: #FF8A65;
    --accent-orange-dark: #F4511E;
    --accent-orange-hover: #FF5722;

    /* Verde - Para éxito y confirmaciones */
    --accent-green: #4CAF50;
    --accent-green-light: #66BB6A;
    --accent-green-dark: #388E3C;
    --accent-green-hover: #43A047;

    /* ========== BOTONES ========== */
    /* Botón Primario (CTA Principal) */
    --btn-primary-bg: #FF7043;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #FF5722;
    --btn-primary-pressed: #F4511E;
    --btn-primary-disabled: #FFCCBC;

    /* Botón Secundario */
    --btn-secondary-bg: #1C4F8D;
    --btn-secondary-text: #FFFFFF;
    --btn-secondary-hover: #154276;
    --btn-secondary-pressed: #0F3651;
    --btn-secondary-disabled: #B3C5D9;

    /* Botón Terciario / Outline */
    --btn-tertiary-bg: transparent;
    --btn-tertiary-border: #1C4F8D;
    --btn-tertiary-text: #1C4F8D;
    --btn-tertiary-hover-bg: #E3EBF3;
    --btn-tertiary-hover-border: #154276;

    /* Botón Éxito */
    --btn-success-bg: #4CAF50;
    --btn-success-text: #FFFFFF;
    --btn-success-hover: #43A047;
    --btn-success-pressed: #388E3C;

    /* Botón Peligro */
    --btn-danger-bg: #F44336;
    --btn-danger-text: #FFFFFF;
    --btn-danger-hover: #E53935;
    --btn-danger-pressed: #D32F2F;

    /* ========== TABLAS ========== */
    /* Encabezado de tabla */
    --table-header-bg: #1C4F8D;
    --table-header-text: #FFFFFF;
    --table-header-border: #154276;

    /* Filas */
    --table-row-even: #FFFFFF;
    --table-row-odd: #F9FAFB;
    --table-row-hover: #E3EBF3;
    --table-row-selected: #D4E2F1;
    --table-border: #E1E3E6;

    /* ========== TARJETAS (CARDS) ========== */
    --card-bg: #FFFFFF;
    --card-border: #E1E3E6;
    --card-shadow: 0 2px 8px rgba(28, 79, 141, 0.08);
    --card-shadow-hover: 0 4px 16px rgba(28, 79, 141, 0.12);
    --card-header-bg: #F4F5F7;
    --card-header-text: #1C4F8D;

    /* ========== TEXTOS ========== */
    --text-primary: #1A1C1E;
    --text-secondary: #5F6368;
    --text-disabled: #9AA0A6;
    --text-inverse: #FFFFFF;
    --text-link: #1C4F8D;
    --text-link-hover: #154276;

    /* ========== FONDOS ========== */
    --bg-main: #F4F5F7;
    --bg-white: #FFFFFF;
    --bg-overlay: rgba(28, 79, 141, 0.05);

    /* ========== ESTADOS Y ALERTAS ========== */
    /* Éxito */
    --success-main: #4CAF50;
    --success-light: #C8E6C9;
    --success-dark: #2E7D32;

    /* Información */
    --info-main: #2196F3;
    --info-light: #BBDEFB;
    --info-dark: #1565C0;

    /* Advertencia */
    --warning-main: #FF9800;
    --warning-light: #FFE0B2;
    --warning-dark: #EF6C00;

    /* Error */
    --error-main: #F44336;
    --error-light: #FFCDD2;
    --error-dark: #C62828;

    /* ========== BORDES Y DIVISORES ========== */
    --border-light: #E1E3E6;
    --border-medium: #C4C7CC;
    --border-dark: #9AA0A6;
    --divider: #E1E3E6;

    /* ========== SOMBRAS ========== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(28, 79, 141, 0.08);
    --shadow-lg: 0 4px 16px rgba(28, 79, 141, 0.12);
    --shadow-xl: 0 8px 24px rgba(28, 79, 141, 0.16);

    /* ========== INPUTS Y FORMULARIOS ========== */
    --input-bg: #FFFFFF;
    --input-border: #C4C7CC;
    --input-border-focus: #1C4F8D;
    --input-border-error: #F44336;
    --input-text: #1A1C1E;
    --input-placeholder: #9AA0A6;
    --input-disabled-bg: #F4F5F7;
    --input-disabled-text: #9AA0A6;

    /* ========== NAVEGACIÓN ========== */
    --nav-bg: #1C4F8D;
    --nav-text: #FFFFFF;
    --nav-item-hover: #154276;
    --nav-item-active: #2E6BB8;
    --nav-border: #0F3651;

    /* ========== SIDEBAR ========== */
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E1E3E6;
    --sidebar-item-hover: #E3EBF3;
    --sidebar-item-active: #D4E2F1;
    --sidebar-item-active-text: #1C4F8D;

    /* ========== BADGES Y CHIPS ========== */
    --badge-primary-bg: #1C4F8D;
    --badge-primary-text: #FFFFFF;
    --badge-success-bg: #4CAF50;
    --badge-success-text: #FFFFFF;
    --badge-warning-bg: #FF9800;
    --badge-warning-text: #FFFFFF;
    --badge-error-bg: #F44336;
    --badge-error-text: #FFFFFF;
    --badge-neutral-bg: #9AA0A6;
    --badge-neutral-text: #FFFFFF;

    /* ========== TOOLTIPS ========== */
    --tooltip-bg: #1A1C1E;
    --tooltip-text: #FFFFFF;
    --tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* ========== LOADING Y SPINNERS ========== */
    --spinner-primary: #1C4F8D;
    --spinner-secondary: #FF7043;

    /* ========== SCROLLBAR ========== */
    --scrollbar-track: #F4F5F7;
    --scrollbar-thumb: #C4C7CC;
    --scrollbar-thumb-hover: #9AA0A6;
}

/* ============================================
   CLASES UTILITARIAS
   ============================================ */

/* Botones */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
}

.btn-primary:active {
    background-color: var(--btn-primary-pressed);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: none;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
}

/* Tarjetas */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 8px;
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    background-color: var(--card-header-bg);
    color: var(--card-header-text);
    padding: 16px;
    border-bottom: 1px solid var(--card-border);
}

/* Tablas */
.table-custom {
    width: 100%;
    border-collapse: collapse;
}

.table-custom thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.table-custom tbody tr:nth-child(even) {
    background-color: var(--table-row-even);
}

.table-custom tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd);
}

.table-custom tbody tr:hover {
    background-color: var(--table-row-hover);
    cursor: pointer;
}

.table-custom td,
.table-custom th {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--table-border);
}

/* Estados */
.status-success {
    color: var(--success-main);
    background-color: var(--success-light);
    padding: 4px 12px;
    border-radius: 16px;
}

.status-warning {
    color: var(--warning-dark);
    background-color: var(--warning-light);
    padding: 4px 12px;
    border-radius: 16px;
}

.status-error {
    color: var(--error-dark);
    background-color: var(--error-light);
    padding: 4px 12px;
    border-radius: 16px;
}

.status-info {
    color: var(--info-dark);
    background-color: var(--info-light);
    padding: 4px 12px;
    border-radius: 16px;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.page {
    height: 100vh;
}

.page table th, .page table td {
    font-size: 1.4rem;
}

.page .mud-icon-size-medium {
    font-size: 2.4rem;
}