:root[data-bs-theme="VsCode"] {
    /* Colores base inspirados en VS Code */
    --bs-body-bg: #1e1e1e;
    --bs-body-color: #d4d4d4;
    --bs-primary: #007acc;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-danger: #f44747;
    --bs-warning: #ffaf00;
    --bs-info: #17a2b8;
    --bs-light: #2d2d2d;
    --bs-dark: #0e0e0e;
    /* Colores RGB */
    --bs-primary-rgb: 0,122,204;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 40,167,69;
    --bs-danger-rgb: 244,71,71;
    --bs-warning-rgb: 255,175,0;
    --bs-info-rgb: 23,162,184;
    /* Colores de énfasis */
    --bs-primary-text-emphasis: #9cdcfe;
    --bs-secondary-text-emphasis: #cccccc;
    --bs-success-text-emphasis: #b5f4a5;
    --bs-danger-text-emphasis: #ff6b6b;
    --bs-warning-text-emphasis: #ffd866;
    --bs-info-text-emphasis: #a5dfff;
    /* Fondos sutiles */
    --bs-primary-bg-subtle: #003f5c;
    --bs-secondary-bg-subtle: #3c3c3c;
    --bs-success-bg-subtle: #1e5631;
    --bs-danger-bg-subtle: #5c1a1a;
    --bs-warning-bg-subtle: #5c4a1a;
    --bs-info-bg-subtle: #1a3c5c;
    /* Bordes sutiles */
    --bs-border-color: #3c3c3c;
    --bs-border-radius: 0.25rem;
    /* Tipografía */
    --bs-font-sans-serif: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --color-bg: #1e1e1e;
    --color-text: #dcdcdc;
    --color-border: #3c3c3c;
    --color-accent: #569cd6;
    --color-focus-shadow: rgba(86, 156, 214, 0.4);
    --color-card-bg: #252526; /* un poco más claro que el fondo general */
    --color-control-bg: #20283d;
   
    --color-control-disabled-bg: #1c1c1c;
    --color-control-disabled-text: #999999;
    --color-control-readonly-bg: #1f1f1f;
    --color-control-readonly-text: #cccccc;
}
/* Estilo para el editor de código */
.editor-codigo {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 17px;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 8px;
    width: 100%;
    line-height: 1.4;
    white-space: pre-wrap;
    tab-size: 4;
    border-radius: 4px;
    overflow-x: hidden; /* Oculta el scroll horizontal */
    overflow-y: auto; /* Muestra scroll vertical si es necesario */
    resize: none;
    min-height: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

.editor-codigo:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-focus-shadow);
}
.card-body {
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border-radius: 4px;
    padding: 1rem;
}

.text-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
}

input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: var(--color-control-disabled-bg);
    color: var(--color-control-disabled-text);
    border: 1px solid var(--color-border);
    cursor: not-allowed;
    opacity: 1; /* mantenemos legibilidad */
}

input[readonly],
textarea[readonly],
.form-control[readonly] {
    background-color: var(--color-control-readonly-bg);
    color: var(--color-control-readonly-text);
    border: 1px solid var(--color-border);
}

.input-group-text {
    background-color: var(--color-bg);
    color: var(--color-control-text);
    border: 1px solid var(--color-border);
}

.input-group .form-control[readonly] + .input-group-text {
    background-color: var(--color-control-readonly-bg);
    color: var(--color-control-readonly-text);
    border: 1px solid var(--color-border);
}

/* Estilo base del botón de selección de archivo */
input[type="file"]::file-selector-button {
    background-color: var(--bs-primary); /* color base */
    color: white;
    border: 1px solid var(--bs-primary);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    appearance: none; /* Chrome, Edge */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
}

    /* Hover */
    input[type="file"]::file-selector-button:hover {
        background-color: var(--bs-primary);
        color: white;
    }

/* Deshabilitado */
input[type="file"]:disabled::file-selector-button {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border: 1px solid #aaa;
}

textarea::-webkit-scrollbar {
    width: 12px;
}

textarea::-webkit-scrollbar-track {
    background: #1e1e1e; /* fondo del track */
}

textarea::-webkit-scrollbar-thumb {
    background-color: #007acc; /* color del scroll */
    border-radius: 6px;
    border: 2px solid #1e1e1e; /* espacio alrededor */
}

textarea::-webkit-resizer {
    background: #2b2b2b;
    border-radius: 4px;
    border: none;
}

.ticket-card {
    background-color: #e6f2ff; /* Azul claro para sin prioridad */
    font-size: 13px;
    line-height: 1.2;
    cursor: default;
    transition: box-shadow 0.2s ease;
}

    .ticket-card:hover {
        box-shadow: 0 0 0 2px #007bff33;
    }

.ticket-card-btn {
    font-size: 8px;
    padding: 6px 6px;
}

/* Elimina bordes internos y externos del DataGrid */
.datagrid-clean {
    border: none !important;
    border-collapse: collapse !important;
    width: 100%;
    background-color: transparent;
}

/* Elimina bordes de celdas */
.datagrid-clean td,
.datagrid-clean th {
    border: none !important;
    padding: 0 !important;
    background-color: transparent;
}

/* Elimina cualquier espacio entre celdas */
.datagrid-clean table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

/* Opcional: elimina margen si lo tuviera */
.datagrid-clean tr {
    margin: 0 !important;
}

.row-fade {
    animation: fadeHighlight 0.2s ease-out;
    animation-fill-mode: forwards;
}

@keyframes fadeHighlight {
    0% {
        transform: scale(1.03);
        box-shadow: 0 0 16px rgba(255, 200, 0, 0.9);
        opacity: 1;
    }

    8.3% {
        transform: scale(1.028);
        box-shadow: 0 0 14px rgba(255, 200, 0, 0.85);
        opacity: 0.99;
    }

    16.6% {
        transform: scale(1.026);
        box-shadow: 0 0 12px rgba(255, 200, 0, 0.8);
        opacity: 0.98;
    }

    25% {
        transform: scale(1.024);
        box-shadow: 0 0 10px rgba(255, 200, 0, 0.75);
        opacity: 0.97;
    }

    33.3% {
        transform: scale(1.022);
        box-shadow: 0 0 8px rgba(255, 200, 0, 0.7);
        opacity: 0.96;
    }

    41.6% {
        transform: scale(1.02);
        box-shadow: 0 0 7px rgba(255, 200, 0, 0.65);
        opacity: 0.95;
    }

    50% {
        transform: scale(1.018);
        box-shadow: 0 0 6px rgba(255, 200, 0, 0.6);
        opacity: 0.96;
    }

    58.3% {
        transform: scale(1.016);
        box-shadow: 0 0 5px rgba(255, 200, 0, 0.5);
        opacity: 0.97;
    }

    66.6% {
        transform: scale(1.014);
        box-shadow: 0 0 4px rgba(255, 200, 0, 0.4);
        opacity: 0.98;
    }

    75% {
        transform: scale(1.012);
        box-shadow: 0 0 3px rgba(255, 200, 0, 0.3);
        opacity: 0.99;
    }

    83.3% {
        transform: scale(1.006);
        box-shadow: 0 0 2px rgba(255, 200, 0, 0.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        box-shadow: none;
        opacity: 1;
    }
}

.gmail-icon {
    width: 24px;
    height: 24px;
    transform: scale(1.5); /* Amplifica sin romper layout */
    transform-origin: center;
    background-image: url('/assets/icons/gmail-color-24.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -1px;
}

.gdrive-icon {
    width: 24px;
    height: 24px;
    transform: scale(1.5); /* Amplifica sin romper layout */
    transform-origin: center;
    background-image: url('/assets/icons/gdrive-color-24.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -1px;
}

/* Solapas normales */
.nav-tabs .nav-link {
    color: #fff;
    border-color: #343a40 !important;
}
/* Solapa activa */
.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #343a40; /* gris oscuro */
    border-color: #343a40;
}
/* Íconos dentro de solapas */
.nav-tabs .nav-link i {
    color: inherit;
    margin-right: 6px;
}
    .nav-tabs .nav-link:hover {
        background-color: inherit !important;
        color: inherit !important;
        border-color: #343a40 !important;
        text-decoration: none !important;
        cursor: default;
    }