/* ============================================
   VARIABLES CSS GLOBALES
   ============================================ */

:root {
    --default-text-color: #050505;
    /* Variables de colores principales */
    --primary-color: #3DF59E;
    --secondary-color: #7F23CB;
    --success-color: #3DF59E;
    --warning-color: #FF9322;
    --danger-color: #EA0B0B;
    --info-color: #3457FF;

    --primary-color-hover: #44FDA4;
    --secondary-color-hover: #9E4AF1;
    --success-color-hover: #44FDA4;
    --warning-color-hover: #FFAA44;
    --danger-color-hover: #F43939;
    --info-color-hover: #4A6FFF;

    --primary-color-active: #2DBF7A;
    --secondary-color-active: #661AA4;
    --success-color-active: #2DBF7A;
    --warning-color-active: #E67500;
    --danger-color-active: #BD0A0A;
    --info-color-active: #003EE3;

    /* Variables de botones DataTables */
    --dtsp-button-bg-default: #ffffff;
    --dtsp-button-bg-hover: #f8f9fa;
    --dtsp-button-bg-selected: #f8f9fa;
    --dtsp-pill-bg: color-mix(in srgb, var(--dtsp-button-bg-default) 50%, rgb(230, 227, 227) 50%);
    --dtsp-pill-bg-selected: color-mix(in srgb, var(--dtsp-button-bg-default) 50%, var(--primary-color) 30%);
    --buttons-datatable-color: #1C3D36;
    --buttons-datatable-bg: #612020;

    /* Variables de Checkboxes */
    --checkbox-bg: #FFFFFF;
    --checkbox-border: rgba(17, 94, 58, 0.20);

    --checkbox-checked-bg: var(--primary-color);
    --checkbox-checked-border: var(--primary-color);
    --checkbox-checked-mark: #000000;

    --checkbox-tr-bg: #DDFEE9;

    /* Variables de Filas Especiales (De Baja) */
    --row-de-baja-bg: #FEE7E7;
    --row-de-baja-hover-bg: #FCCFCF;
    --row-de-baja-hover-border: #F76969;
    --row-de-baja-selected-bg: #FCCFCF;
    --checkbox-de-baja-bg: #FFFFFF;
    --checkbox-de-baja-border: #FF0000;
    --checkbox-de-baja-mark: #000000;
    --checkbox-de-baja-checked-mark: #FEE7E7;
    --checkbox-de-baja-checked-border: #EA0B0B;
    --checkbox-de-baja-checked-bg: #EA0B0B;

    /* Variables de texto */
    --dtsp-text-color: var(--default-text-color);

    /* Variables de paginación */
    --dtsp-button-paginate: #F9F9F9;
    --dtsp-button-bg-hover-paginate: #ccc;
    --dtsp-button-bg-selected-paginate: color-mix(in srgb, var(--dtsp-button-paginate) 50%, limegreen 80%);
    --dtsp-text-color-paginate: black;

    --pagination-active-color: #115E3A;
    --pagination-active-bg: #F9F9F9;
    --pagination-active-border: #115E3A;
    --pagination-color-hover: #000000;
    --pagination-bg-hover: #F9F9F9;
    --pagination-border-hover: #D4D4D4;

    /* Variables de tabla */
    --thead-bg-color: #ECECEC;
    --thead-color: var(--default-text-color);
    --background-hover-tr: #ECECEC;
    --background-hover-border: #8F8F8F;


    /* Variables de botones genéricos */
    --btn-datatable-color: #1C3D36;

    /* Variables de botones de acción - Activos */
    --btn-default-color: var(--default-text-color);
    --btn-default-background: #FFFFFF;
    --btn-default-border-color: #D4D4D4;
    --btn-default-color-hover: var(--default-text-color);
    --btn-default-background-hover: #F9F9F9;
    --btn-default-border-color-hover: #D4D4D4;
    --btn-default-color-active: var(--default-text-color);
    --btn-default-background-active: #F9F9F9;
    --btn-default-border-color-active: #115E3A;

    --btn-primary-color: var(--default-text-color);
    --btn-primary-background: var(--primary-color);
    --btn-primary-border-color: var(--primary-color);
    --btn-primary-color-hover: var(--default-text-color);
    --btn-primary-background-hover: var(--primary-color-hover);
    --btn-primary-border-color-hover: var(--primary-color-hover);
    --btn-primary-color-active: var(--default-text-color);
    --btn-primary-background-active: var(--primary-color-active);
    --btn-primary-border-color-active: var(--primary-color-active);

    --btn-secondary-color: #FFFFFF;
    --btn-secondary-background: var(--secondary-color);
    --btn-secondary-border-color: var(--secondary-color);
    --btn-secondary-color-hover: #FFFFFF;
    --btn-secondary-background-hover: var(--secondary-color-hover);
    --btn-secondary-border-color-hover: var(--secondary-color-hover);
    --btn-secondary-color-active: #FFFFFF;
    --btn-secondary-background-active: var(--secondary-color-active);
    --btn-secondary-border-color-active: var(--secondary-color-active);



    --btn-success-color: var(--default-text-color);
    --btn-success-background: var(--success-color);
    --btn-success-border-color: var(--success-color);
    --btn-success-color-hover: var(--default-text-color);
    --btn-success-background-hover: var(--success-color-hover);
    --btn-success-border-color-hover: var(--success-color-hover);
    --btn-success-color-active: var(--default-text-color);
    --btn-success-background-active: var(--success-color-active);
    --btn-success-border-color-active: var(--success-color-active);

    --btn-danger-color: #FFFFFF;
    --btn-danger-background: var(--danger-color);
    --btn-danger-border-color: var(--danger-color);
    --btn-danger-color-hover: var(--default-text-color);
    --btn-danger-background-hover: var(--danger-color-hover);
    --btn-danger-border-color-hover: var(--danger-color-hover);
    --btn-danger-color-active: #FFFFFF;
    --btn-danger-background-active: var(--danger-color-active);
    --btn-danger-border-color-active: var(--danger-color-active);

    --btn-warning-color: var(--default-text-color);
    --btn-warning-background: var(--warning-color);
    --btn-warning-border-color: var(--warning-color);
    --btn-warning-color-hover: var(--default-text-color);
    --btn-warning-background-hover: var(--warning-color-hover);
    --btn-warning-border-color-hover: var(--warning-color-hover);
    --btn-warning-color-active: var(--default-text-color);
    --btn-warning-background-active: var(--warning-color-active);
    --btn-warning-border-color-active: var(--warning-color-active);

    --btn-info-color: #FFFFFF;
    --btn-info-background: var(--info-color);
    --btn-info-border-color: var(--info-color);
    --btn-info-color-hover: var(--default-text-color);
    --btn-info-background-hover: var(--info-color-hover);
    --btn-info-border-color-hover: var(--info-color-hover);
    --btn-info-color-active: #FFFFFF;
    --btn-info-background-active: var(--info-color-active);
    --btn-info-border-color-active: var(--info-color-active);


    /* Variables de labels */
    --label-primary-color: #666666;
    --label-primary-background: #ECECEC;
    --label-primary-border-color: #666666;

    --label-success-color: #2DBF7A;
    --label-success-background: #DDFEE9;
    --label-success-border-color: #2DBF7A;

    --label-danger-color: #CA2121;
    --label-danger-background: #FCDEDE;
    --label-danger-border-color: #F5A9A9;

    --label-warning-color: #F80;
    --label-warning-background: #FFF0DE;
    --label-warning-border-color: #FFDDAA;

    --label-info-color: #2976C6;
    --label-info-background: #DBDDFF;
    --label-info-border-color: #003EE3;
}