/**
 * Colores y estilos predefinidos para la suite S360.
 *
 * Este archivo define las variables de color, tipografía y otros estilos que
 * deben ser utilizados en toda la suite para mantener la consistencia visual.
 *
 * Estos son los únicos colores y estilos aprobados para su uso dentro de la
 * suite. El uso de estos valores garantiza una apariencia coherente en todos
 * los temas, tanto en modo claro como en modo oscuro.
 *
 * Todas estas variables ya están disponibles a través de un CDN y se pueden
 * importar directamente en los proyectos que lo requieran.
 *
 * Temas disponibles:
 * - `light`: Tema claro con colores de fondo claros y texto oscuro.
 * - `dark`: Tema oscuro con colores de fondo oscuros y texto claro.
 */

:root {
    --suite-primary-S360: rgb(209, 163, 60);
    --suite-secundary-S360: #eddab1;
    --suite-tertiary-S360: #c7b693;
    --suite-quaternary-S360: #FFFFFF;

    --color-border-S360:#A4A4A4;
    --color-border-secundary-S360:#8a8a8a;

    --border-radius-S360: 5px;
    --time-transition-S360: 0.3s;

    --font-size-normal-S360: 12px;
    --font-size-small-S360: 10px;
    --font-size-large-S360: 14px;
    --font-size-extra-large-S360: 16px;

    --font-weight-small-S360:400;
  	--font-weight-large-S360:600;

    /* Colores */
    --color-error-S360: rgb(202, 45, 45);
    --color-error-hover-S360: rgb(179, 41, 41);
    --color-error-active-S360: rgb(209, 69, 69);

    --color-success-S360: #28A745;
    --color-success-hover-S360: #27a144;
    --color-success-active-S360: #2aac48;

    --color-primary-S360: #007bff;
    --color-primary-hover-S360: #0069d9;
    --color-primary-active-S360: #0056b3;

    --color-secondary-S360: #6c757d;
    --color-secondary-hover-S360: #5a6268;
    --color-secondary-active-S360: #494f54;

    --color-info-S360: #17a2b8;
    --color-info-hover-S360: #138496;
    --color-info-active-S360: #117a8b;

    --color-warning-S360: #ffc107;
    --color-warning-hover-S360: #e0a800;
    --color-warning-active-S360: #c69500;

    --color-danger-S360: #dc3545;
    --color-danger-hover-S360: #c82333;
    --color-danger-active-S360: #bd2130;

    --color-light-S360: #f8f9fa;
    --color-light-hover-S360: #e2e6ea;
    --color-light-active-S360: #dae0e5;

    --color-dark-S360: #343a40;
    --color-dark-hover-S360: #23272b;
    --color-dark-active-S360: #1d2124;

    --color-bnt-consult-S360: var(--suite-primary-S360);
	--color-bnt-consult-hover-S360: #9b7627;
	--color-bnt-consult-active-S360:  var(--suite-primary-S360);

    --color-bnt-suscess-S360: #28A745;
	--color-bnt-suscess-active-S360:  #2aac48;
	--color-bnt-suscess-hover-S360: #27a144;

    --color-bnt-danger-S360: #dc3545;
	--color-bnt-danger-active-S360:  #c82333;
	--color-bnt-danger-hover-S360: #bd2130;

    --color-btn-borrar-filter-S360: #dc3545;
	--color-btn-borrar-filter-hover-S360: #dc3545;
	--color-btn-borrar-filter-active-S360: #dc3545;

    --color-text-contraste-S360:white;

    --color-band-LIR: rgb(244, 194, 199, 0.8);
    --color-band-LIE:  rgb(255, 236, 180, 0.8);
    --color-band-TG: rgb(190, 228, 199, 0.8);
    --color-band-LSE:  rgb(255, 236, 180, 0.8);
    --color-band-LSR:  rgb(244, 194, 199, 0.8);

    --color-serieGraph1: #f3ad1c;
    --color-serieGraph2: #c58841;
    --color-serieGraph3: #d2a649;
    --color-serieGraph4: #ffc97a;     
    
    


    --color-text-main: var(--suite-primary-S360);
    --background-disabled-S360: #dbdbdb;  
    
    --color-item-selected: #eddab1;

    --color-border-module: var(--suite-primary-S360);
}

&[data-theme='light'] {
    --background-S360: #FFFFFF;
    --background-secundary-S360: #E0E0E0;
    --background-tertiary-S360: #a5a5a5;

    --background-element: #FFFFFF;

    --color-icon-S360: gray;

    --color-text-main: var(--suite-primary-S360);
    --color-text-module: #2E2E2E;
    --color-text-S360: #000000;
    --color-text-contrast-S360: #FFFFFF;
    --color-text-secundary-S360: #313131;
    --color-text-tertiary-S360: #000000;
    --color-text-disabled-S360: #a8a8a8;

    --background-disabled-S360: #dbdbdb;
    --background-disabled-secundary-S360: #ebebeb;

    --background-item-select-S360: #d3c19b;
    --background-item-select-secundary-S360: #a1a1a1;

    --background-item-hover-S360: #dadada;
    --background-item-hover-secundary-S360: #f8eed7;

    --color-suite-tertiary-S360: #E0E0E0;
    --color-suite-tertiary-hover-S360: #dadada;

    --item-hover-S360: rgba(128, 128, 128, 0.102);

	--color-disabled-secundary-S360: #dcdce2;
    --color-date-hover-S360:rgba(209, 163, 60, 0.4);
    --color-date-in-range-S360:rgba(209, 163, 60, 0.2);
    --color-item-select-S360: rgba(209, 162, 61, 0.4);

    --color-band-LIR: rgb(244, 194, 199, 0.8);
    --color-band-LIE:  rgb(255, 236, 180, 0.8);
    --color-band-TG: rgb(190, 228, 199 , 0.8);
    --color-band-LSE:  rgb(255, 236, 180, 0.8);
    --color-band-LSR:  rgb(244, 194, 199, 0.8);

    --color-btn-text: #464646;
    --color-btn-limit-disabled: #9E9E9E;
    --color-btn-limit-ok: #DDF5D4;
    --color-btn-limit-nok: #FFD9D9;
    --color-btn-limit-text-ok: #0F5319;
    --color-btn-limit-text-nok: #AB0000;

    --filter-img-app: none;

    --color-title-primary: #D1A33C;
    --scroll-color-1: #cccccc80;
    --scroll-color-2: #FFFFFF;

    /* Sidebar */
    --sidebar-selected-color: rgba(209, 162, 61, 0.4);
    --sidebar-icon-color: gray;
    --sidebar-text-color: #2E2E2E;
    --sidebar-arrow-color: #000000;
    --sidebar-arrow-hover-color: #414141;
    --sidebar-disabled-color: #efefef;
    --sidebar-text-active-color: #2e2e2e;
    --sidebar-icon-active-color: gray;
}

&[data-theme='dark'] {
    --background-S360: #1f1f1f;
    --background-secundary-S360: #5A5A5A;
    --background-tertiary-S360: #484848;
    
    --background-element: #1F1F1F;
    
    --color-icon-S360: rgb(209, 163, 60);
    
    --color-text-main: var(--suite-primary-S360);
    --color-text-module: #FFFFFF;
    --color-text-S360: #FFFFFF;
    --color-text-contrast-S360: #000000;
    --color-text-secundary-S360: #cacaca;
    --color-text-tertiary-S360: #161616;
    --color-text-disabled-S360: #a8a8a8;
    
    
    --background-disabled-S360: #383838;
    --background-disabled-secundary-S360: #313131;
    
    --background-item-select-S360: #777777;
    --background-item-select-secundary-S360: #c7b693;
    --background-item-hover-S360: #696969;
    --background-item-hover-secundary-S360: #c7b693;
    
    /* Colores ajustados para modo oscuro */
    --color-error-S360: rgb(202, 45, 45);
    --color-error-hover-S360:rgb(179, 41, 41);
    --color-error-active-S360:rgb(209, 69, 69);
    
    --color-success-S360: #218838;
    --color-success-hover-S360: #1e7e34;
    --color-success-active-S360: #1c7430;
    
    --color-primary-S360: #0069d9;
    --color-primary-hover-S360: #0056b3;
    --color-primary-active-S360: #004494;
    
    --color-secondary-S360: #5a6268;
    --color-secondary-hover-S360: #4e555b;
    --color-secondary-active-S360: #3e4449;
    
    --color-info-S360: #138496;
    --color-info-hover-S360: #117a8b;
    --color-info-active-S360: #0f697a;
    
    --color-warning-S360: #e0a800;
    --color-warning-hover-S360: #c69500;
    --color-warning-active-S360: #a38300;
    
    --color-danger-S360: #c82333;
    --color-danger-hover-S360: #b21f2d;
    --color-danger-active-S360: #9e1a28;
    
    --color-light-S360: #e2e6ea;
    --color-light-hover-S360: #cfd3d8;
    --color-light-active-S360: #bcc0c4;
    
    --color-dark-S360: #23272b;
    --color-dark-hover-S360: #1d2124;
    --color-dark-active-S360: #16191c;
    
    --color-suite-tertiary-S360: #484848; /* new*/
    --color-suite-tertiary-hover-S360: #525252;
    
    --item-hover-S360: rgba(128, 128, 128, 0.1);
    
    --color-disabled-secundary-S360: #2d2d2d;/*original:#FFFFFF new: #75757a*/
    --color-date-hover-S360:rgba(209, 162, 60, 0.5);
    --color-date-in-range-S360:rgba(209, 162, 60, 0.4);
    
    --color-item-select-S360: #dddddd50;
    
    --color-band-LIR: rgb(244, 194, 199, 0.8);
    --color-band-LIE:  rgb(255, 236, 180, 0.8);
    --color-band-TG: rgb(190, 228, 199, 0.8);
    --color-band-LSE:  rgb(255, 236, 180, 0.8);
    --color-band-LSR:  rgb(244, 194, 199, 0.8);
    
    --color-btn-text: #B3B3B3;
    --color-btn-limit-disabled: #626262;
    --color-btn-limit-ok: #225a0da1;
    --color-btn-limit-nok: #9b1113a1;
    --color-btn-limit-text-ok: #7AD388;
    --color-btn-limit-text-nok: #FF8E8E;
    
    --color-title-primary: #D1A33C;
    --scroll-color-1: #dddddd50;
    --scroll-color-2: #1f1f1f;

    /* Sidebar */
    --sidebar-selected-color: #dddddd50;
    --sidebar-icon-color: var(--suite-primary-S360);
    --sidebar-text-color: #FFFFFF;
    --sidebar-arrow-color: #aaaaaa;
    --sidebar-arrow-hover-color: #FFFFFF;
    --sidebar-disabled-color: #303030;
    --sidebar-text-active-color: #FFFFFF;
    --sidebar-icon-active-color: var(--suite-primary-S360);
}