@import url('./header.css');
@import url('./body.css');
:root {
	--font-family: 'Libre Franklin', 'Arial', sans-serif;
	--color-suite-primary: #d1a33c;
	--color-suite-secundary: #eddab1;
	--color-suite-tertiary: #c7b693;
	--color-border: #A4A4A4;
	--color-text: #464040;
	--color-text-Alt: #FFFFFF;
	--color-text-secundary: #A6A6A6;
	--color-error: rgb(202, 45, 45);
	--color-error-hover: rgb(179, 41, 41);
	--color-error-active: rgb(209, 69, 69);
	--color-bnt-suscess: #28A745;
	--color-bnt-suscess-active: #2aac48;
	--color-bnt-suscess-hover: #27a144;
	--color-bnt-consult: var(--color-suite-primary);
	--color-bnt-consult-hover: #9b7627;
	--color-bnt-consult-active: var(--color-suite-primary);
	--color-th-dark: #000000;
	--color-background-box: #D7D7D7;
	--color-title-box: #4d4d4d;
	--color-background-mobile: white;
	--color-backgorund-lineas-mobile: #b17f0f40;
	--color-backgroundBody-box: #fff;
	--color-loader: #0359a7;
	--color-text-planta: #383737;
	--color-strokeText-Impact: unset;
	--color-border-sync: #bfbfbf;
	--color-check-column: #EBEBEB;
	--color-hierarchy_1: #2c2e31;
	--color-hierarchy_2: #FFFFFF;
	--color-hierarchy_3: #FFFFFF;
	--color-hierarchy_4:#f5f5f5;


	--color-btn-dateRange: #e6e6e6;
	--color-btn-dateRange-border: #cecece;
	--color-btn-dateRange-hover: #c0bdbd;

	--color-bacckground-linea: #737373;

	--color-icono-location: #361c09;
	--color-box: #ececec;
	--color-box-text: #5d5d5d;
	--color-btn-back: var(--color-text);
	--color-btn-back-hover: var(--color-text-secundary);
	--color-graph-border: #45444473;
	--color-graph-border-Alt: #525151;

	--color-stroke-text: unset;

	--color-btn-filter: #6c757d;
	--color-btn-filter-hover: #545b62;
	--color-btn-filter-active: #4e555b;

	--color-btn-borrar-filter: #dc3545;
	--color-btn-borrar-filter-hover: #dc3545;
	--color-btn-borrar-filter-active: #dc3545;
	--height-pixels-1: 10px;
	--height-pixels-2: 10px;

	--border-radius: 4px;
	--font-size-normal: 0.8125rem;
	--font-weight-small: 600;
	--font-weight-large: 400;
	--font-size-small: 0.6875rem;
	--font-size-large: 0.85rem;
	--brightness-filter: 1;
	--color-table-odd-rows: #f2f2f2;
	--color-table-even-rows: white
}

:root[data-theme="light"] {
	--color-suite-background: #FFFFFF;
	--color-primary: #FFFFFF;
	--color-disabled: #6d6868;
	/*original:#E6E6E6 new:#6d6868*/
	--color-disabled-secundary: #dcdce2;
	--color-suite-tertiary: #E0E0E0;
	--color-suite-tertiary-hover: #dadada;
	--color-page-button: #f1f3f4;
	--color-switch: #6c757d;

	--opc-color-item-select: rgba(209, 162, 61, 0.4);
	--item-hover: rgba(128, 128, 128, 0.102);
	--color-date-in-range: rgba(209, 163, 60, 0.2);
	--color-date-hover: rgba(209, 163, 60, 0.4);
	--color-text-contraste: white;
	--color-border-secundary: #A4A4A4;

	--color-title-icon: #1c1b1f;
	--color-value-green: green;
	--color-value-red: red;
	--color-custome-text: black;

  --color-alert-row: rgba(194, 0, 0, 0.1);

  --color-td-level-1: rgb(216, 216, 216);
  --color-td-level-2: rgb(234, 234, 234);
  --color-td-level-3: rgb(247, 247, 247);

  --color-hover-row: rgb(200, 200, 200);
}

:root[data-theme="dark"] {
	--color-suite-background: #282828;
	--color-primary: #1F1F1F;
	--color-disabled: #ebe3e3;
	/*original:#545454 new: #ebe3e3*/
	--color-disabled-secundary: #2d2d2d;
	/*original:#FFFFFF new: #75757a*/
	--color-text: #FFFFFF;
	--color-text-Alt: #464040;
	--color-suite-secundary: #5A5A5A;
	--color-backgorund-lineas-mobile: #d1a33c7d;
	/* new*/
	--color-suite-tertiary: #484848;
	--color-background-mobile: #353333;
	--color-cell-linea-mobile: #121212;
	--color-custome-text: white;
	--color-check-column: #4d4d4d;

	/* new*/
	--color-suite-tertiary-hover: #525252;
	--color-table-odd-rows: #616060;
	--color-table-even-rows: #8d8b8b;
	--color-page-button: #484848;
	--color-switch: var(--color-disabled-secundary);
	--color-box-text: #ffffff;
	--opc-color-item-select: #dddddd50;
	--item-hover: rgba(128, 128, 128, 0.1);
	--color-stroke-text: #000000;
	--color-icono-location: #ffffff;
	--color-loader: #034785;
	--color-background-mobile: #3F3F3F;

	--color-date-in-range: rgba(209, 162, 60, 0.4);
	--color-date-hover: rgba(209, 162, 60, 0.5);
	--color-text-contraste: white;
	--color-border-secundary: rgba(107, 107, 107, 0.527);
	--brightness-filter: 1.5;
	--color-btn-dateRange-hover: #3c3b3b;
	--color-th-dark: #1f1f1f;
	--color-border-sync: #464646;

	--color-box: #3d3d3d;

	--color-bacckground-linea: #FFF;

	--color-separator: #565656;
	--color-worstData: #373737;
	--color-text-planta: #FFF;
	--color-title-box: #FFF;
	--color-backgroundBody-box: #353535;
	--color-background-box: #737373;
	--color-btn-dateRange: #616161;
	--color-btn-dateRange-border: #939393;

	--color-title-icon: #ffffff;

  --color-alert-row: rgb(255 0 0 / 24%);

  --color-td-level-1: rgb(68, 68, 68);
  --color-td-level-2: rgb(58, 58, 58);
  --color-td-level-3: rgb(48, 48, 48);

  --color-hover-row: rgb(72, 72, 72);

	& .map-image {
		filter: invert(1) brightness(2);
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-family);
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--color-primary);
	transition: background-color .3s;
}

body {
	overflow: hidden;
	height: 100%;
}


#root {
	background-color: var(--color-suite-background) !important;
	height: 100%;
}

.mainContainer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;

}

.btn{
  .button-opc{
    .icon-button{
      padding-right: 7px !important;
    }
  }
}

/*** MODAL COnfirm ***/
.component-modal-alert{
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 105px 50px 1.5fr 1fr;

  & .component-modal-info-icon{
    font-size: 100px;
    justify-self: center;
    align-self: center;
    margin-top: -25px;

    &.success{
      color: #28a745;
    }
    &.warning{
      color: #FFC000;
    }
    &.error{
      color: #dc3545;
    }
    &.info{
      color: #3fc3ee;
    }
  }

  & .component-modal-title-text{
    justify-self: center;
    width: 370px;
    height: 30px;
    text-align: center;
    font-weight: bolder;
    font-size: x-large;
    color:  var(--color-text-S360);
  }

  & .component-modal-content-text{
    justify-self: center;
    text-align: center;
    color:  var(--color-text-S360);
    font-size: var(--font-size-large-S360);
    word-wrap: break-word;
    max-width: 370px;
  }
}


/* Estilización del scrollbar en todos los elementos de la página */
*::-webkit-scrollbar {
  width: 8px;  /* Ancho de la barra de desplazamiento */
  height: 8px; /* Alto de la barra de desplazamiento horizontal */
}

*::-webkit-scrollbar-track {
  background: #f1f1f1;  /* Color de fondo de la pista del scroll */
  border-radius: 10px;   /* Bordes redondeados */
}

*::-webkit-scrollbar-thumb {
  background: var(--color-border-S360);  /* Color del pulgar (parte deslizante del scroll) */
  border-radius: 10px;
  border: 1px;  /* Borde alrededor del pulgar */
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-S360);  /* Color del pulgar cuando se pasa el ratón sobre él */
}