.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  pointer-events: none;
}

body, button, input, select, textarea {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

.x-grid-cell, .x-column-header-text{
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

.x-btn-inner, .x-btn-text {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px !important;
    color: #000000 !important;
}

.x-form-item-label, .x-field .x-form-item-label {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

.x-boundlist .x-boundlist-item {
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000 !important;
    font-size: 11px;
    padding: 5px;
    text-transform:uppercase;                   
}

.x-tab-bar .x-tab .x-tab-inner, .x-tab-bar .x-tab-default .x-tab-inner, .x-header-text  {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 550;
}

.fondo_containers_vhbox {
	background: #DFE8F6;
}
.button-inspeccion-activo{
	border: 3px solid #4d4dff;
}

.button-permiso-activo{
    border: 3px solid #D86464; 
}

.updateColor .x-form-label,.updateColor .x-form-field{
    border: 1px solid #D86464; 
}

.fondo_containers_config {
	background: #708CB2;
}

.gridBgcolorB .x-grid-cell {     
    color: #4d4dff; 
}

.gridBgcolorD .x-grid-cell {     
    color: #D86464; 
}

.gridBgcolorMD .x-grid-cell {     
    color: #00664d; 
}

.abierto-cell { 
    color: #6464D8 !important;
}
.cerrado-cell { 
    color: #D86464 !important;
}

.statusPending .x-grid-cell{ 
    background-color: #C2EAFD;    
    color: #000; 
}   

.statusComplete .x-grid-cell{ 
    background-color: #B9EBD9;    
    color: #000; 
}   

.statusWaiting .x-grid-cell{ 
    background-color: #FFF4C2;    
    color: #000; 
}   

.color-circle-pending {
    display: inline-block;
    background-color: #08abf7;        
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-right: 5px;
}

.color-circle-complete {
    display: inline-block;
    background-color: #38c793;        
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-right: 5px;
}

.color-circle-waiting {
    display: inline-block;
    background-color: #ffd000;        
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-right: 5px;
}

.fondo_escritorio {
  background-image: url('img/fondo-escritorio.png');
}

/*.fondo_escritorio {
  background-image: url('img/fondo.png');
  background-size: cover; 
  background-position: center; 
  height: 100vh;
  width: 100vw; 
}*/


.customButton {
    color: #15498b !important;
}

.input-style {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 1px;
    color: #333;
/*    font-size: 14px;*/
    width: 130px;
}

.boton_escritorio {
	background-image:none;
    background-color:none;
    padding-top: 36px;
    display: inline-block;
    position: relative;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
/*    color: #595959;*/
    *display: inline;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    height: 32px;
    width 32px;
    text-shadow: 1px 1px #000000;
	color: #ffffff;
    bottom: auto
}

.boton_reportes-icon-el {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position:center;  
    text-align: center;    
    width: 35px;
    height: 25px;
    background-size: 100% 100%;
}

.boton_pedido { 
    background-image:none;     
    background-color:#d0def0; 
    display: inline-block;
    position: relative;
    color: #000000;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    bottom: auto
}

.toolbar_escritorio {
	background: #AFBED4;/* Navegadores viejos */
	background: -moz-linear-gradient(top, #ECEEF4 0%, #D7DEEA 20%, #AFBED4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ECEEF4), color-stop(20%,#D7DEEA), color-stop(100%,#AFBED4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* IE10+ */
	background: linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ECEEF4', endColorstr=’#AFBED4’,GradientType=0 ); /* IE6-9 */
	border-bottom:1px solid #EBEEF4 !important;
	border-top:1px solid #042658 !important;
    margin: 0;
    padding: 0;
}
.boton_escritorio-icon-el {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position:center;  
    text-align: center;    
    background-size: 100% 100%;
}
.tex_totales{
	font-size: 14px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#E8F4FD!important;

}

.texTotalGrid
{
	color:#0066CC!important;
	/* font-weight:bolder; */
}

.texFilaGridTotal
{
	color:#000000!important;
}

.texColumnaTotalGrid
{
	font-size: 12px!important;
	font-style: bold!important;
	font-weight: bolder!important;
}

.tex_debe{
	font-size: 14px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#D86464; 
}
.tex_haber{
	font-size: 14px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#E9F8E7; 
}
.tex_alertas{
	font-size: 12px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#D86464; 
}
.tex_ok{
	font-size: 12px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#E9F8E7; 
}
.tex_totalesfield{
	padding-top:3px!important;
	font-size: 14px!important;    
    font-style: bold!important;
	font-weight: bolder!important;
	color:#E8F4FD; 
}
.div_tope, .div_piso {
	background: #AFBED4;/* Old browsers */
	background: -moz-linear-gradient(top, #ECEEF4 0%, #D7DEEA 20%, #AFBED4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ECEEF4), color-stop(20%,#D7DEEA), color-stop(100%,#AFBED4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED40 100%); /* IE10+ */
	background: linear-gradient(top, #ECEEF4 0%,#D7DEEA 20%,#AFBED4 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ECEEF4', endColorstr=’#AFBED4’,GradientType=0 ); /* IE6-9 */
	border-bottom: 1px solid #EBEEF4;
    margin: 0;
    padding: 0;
}
.div_piso h1{
/*    font-family:"bavaria extended"!important;*/
    font-family: 'Poppins', Arial, sans-serif;
	font-size: 8px!important;    
    font-style: normal!important;
	font-weight: normal!important;
	padding:8px 30px 5px;
	color:#E8F4FD; 
	text-shadow:-1px -1px 2px #EBEEF4;
    margin: 0!important;
}
#login-page{
	 position:fixed; /*Se establece una posición fija para el DIV*/
	 top:2px; /*Establezco una distancia de 2px desde la parte superior del navegador, al inicio del DIV en la parte superior */
	 left:2px; /*Establezco una distancia de 2px desde la parte izquierda del navegador al inicio del div en la parte izquierda */
	 right:2px; /*Establezco una distancia de 2px desde la parte derecha del navegador 	al final del div en la parte derecha */
	 bottom:2px; /*Establezco una distancia de 2px desde la parte de abajo del navegador al final del div en la parte de abajo */
	 border:solid 1px #B79F58; /* Establezco el estilo border para visualizar la posición del DIV, lo quitaré posteriormente */
	 background-color: #E0D6B8;
	 background-image: url('img/fondo-escritorio.webp'); /*Indico que el DIV tendrá de fondo una imagen, específicamente la imagen fondo-pantalla.png que se encuentra en la carpeta img */
	 background-size:cover; /*Indico que el tamaño de imagen de fondo cubrirá toda la ventana del navegador */
	 background-repeat:no-repeat; /*Indico que no se repetirá la imagen de fonto del div.*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	}
	
.grid-total .x-grid-cell { 
    background-color: #DFE8F6; 
    border-bottom-color: #DFE8F6; 
    border-top-color: #DFE8F6; 
    color:#000000;
	
}	

/*PARA EL GRID QUE APARECE EN EL TOTALIZADOR DE CITA*/
.grid-total .x-grid-view-default{ 
    background-color: #DFE8F6; 
    border-bottom-color: #DFE8F6; 
    border-top-color: #DFE8F6; 
    color:#000000;
	
}	

.custom-mask .x-mask-msg-text {
    background: transparent !important;
    padding: 5px !important
}


/*FILA DESHABILITADA EN UN GRID*/ 
.fila-pedido-grid .x-grid-cell{ 
    background-color: #ffff9b;
	
}	

.fila-recibido-grid .x-grid-cell{ 
    background-color: #cbffa1;    
} 

.fila-deshabilitada-grid .x-grid-cell{ 
    background-color: #DDDDDD;    
}   

.fila-materialFaltante-grid .x-grid-cell{ 
    background-color: #ffb3b3;
    /*border-bottom-color: #DFE8F6; 
    border-top-color: #DFE8F6; 
    color::#000000;*/
	
}	

.fila-deshabilitada-grid .x-grid-view-default{ 
    background-color: #DDDDDD;
    /*border-bottom-color: #DFE8F6; 
    border-top-color: #DFE8F6; 
    color::#000000;*/
	
}

/*ESTILOS PARA LOS REPORTES*/
.nombreEmpresa {
    font-size:13.5px;
    color: #000;
    text-transform:uppercase;                   
}

.nombreDpto {
    font-size:14px;
    color: #000;
    font-weight:bold;
}

.nombreReporte {
    font-size:12px;
    color: #000;
    font-weight:bold;
}

.textoReporteNormal {
    font-size: 10px;
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: uppercase;

}

.search-trigger { 
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/svgs/solid/magnifying-glass.svg') no-repeat center center;
    background-size: 16px;
}


.textoReporteNormalPequenio{
    font-size:9px;
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: uppercase;
    font-weight: bolder;
}

.textoReporteNormalPequenio2{
    font-size:8.5px;
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: uppercase;
    font-weight: bolder;
}

.textoReporte{
    font-size:10px;
    font-family: opensans-regular;
    /*    font-family: 'LexendDeca-Regular', sans-serif;*/
    color: #000;
    text-transform: uppercase;
    /* font-weight: bolder; */
}

.tablaReporte {
    width: 100%;                  
    border-collapse: collapse;    
    table-layout: fixed;          
    word-wrap: break-word;        
    overflow: hidden;             
    font-size: 9pt;               
    font-family: opensans-regular;
}

.textoReporte2{
    font-size:10px;
    font-family: opensans-regular;
/*    font-family: 'LexendDeca-Regular', sans-serif;*/
    color: #000;
    white-space: nowrap; 
    text-transform: uppercase;
    font-weight: bolder;
}

.fieldBackgroundColor {
    border-radius: 6px;    
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: bold;
    background-color: #FFFACD !important;
    color: #000000 !important;
    background-image: none !important;
}

.textoNegrita {
    font-weight:bold;    
}

.backgroundMenu {
    background-color:#e6e6e6;   
}

.borderTdTop {
    border-top: 1px solid; 
}

.borderTdBottom {
    border-bottom: 1px solid; 
}

.borderTdLeft {
    border-left: 1px solid; 
}

.borderTdRight {
    border-right: 1px solid; 
}

.textoReporteMatriz {
    color: #000;  
}

.textoNegritaMatriz {
    color: #000000;     
}

.fondoCeldaTitulo {             
    background-color:#999999;
}

.backgroundLS {
    position: absolute; 
    text-align: center;
    top: 35%;
    left: 35%; 
    transform: translate(-50%, -50%);
}

.backgroundImage {
    filter: opacity(0.3);
}

.textoReportePequenio{
    font-size:9px;
/*    font-family: 'LexendDeca-Regular', sans-serif;*/
    font-family: opensans-regular;
    color: #000;
    text-transform: uppercase;
    font-weight: bolder;
}
.textoReportePequenio2{
    font-size:8px;
/*    font-family: 'LexendDeca-Regular', sans-serif;*/
    font-family: opensans-regular;
    color: #000;
    text-transform: uppercase;
    font-weight: bolder;
}

.mensajePiePagina{
    font-size:9px;
/*    font-family: 'LexendDeca-Regular', sans-serif;*/
    font-family: opensans-regular;
    color: #000;
    text-transform: uppercase;
    font-weight: bolder;
}

.buttomBorder{              
    border-bottom:2pt solid black;
}

.textFieldTotalizador {
    border-radius: 6px;
    color: #000000;
    text-align: right;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 550;
    background-color: #dfe8f6;
    background-image:none;
}

.displayfield-style {
    color: #000000;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 550;
}

.textField {
    /*border-radius: 6px;
    color: #4c5067;*/
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 5px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
    width: 130px;
    text-transform: uppercase;
    font-weight: 550;
}

.textFieldOnFocus:focus {
    border-radius: 6px;
    font-family: 'Poppins', Arial, sans-serif;
    border: 1px solid #0099cc;
    color: #000000;
}

.textFieldDisabled {
    background-color: #d9d9d9;
    background-image:none;
}

.combobox {
    border-radius: 6px 0px 0px 6px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
    text-transform: uppercase;
    font-weight: 550;
}

.comboboxOnFocus:focus {
    border-radius: 6px 0px 0px 6px;
    border: 1px solid #0099cc;
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
}

.numberfield {
    border-radius: 6px 0px 0px 6px;
    text-align: right;
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
    text-transform: uppercase;
    font-weight: 550;
}

.numberfieldOnFocus:focus {
    border-radius: 6px 0px 0px 6px;
    border: 1px solid #0099cc;
    text-align: right;
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
}        

.borderTrTd {
    border: 1pt solid #ff000d;
}
    
.menuBc { background-color: #e6e6e6; text-transform: uppercase; }

.page-break {
    display: block;
    page-break-before: always;
}

.custom-btn {
    width: 150px;
    height: 30px;
    line-height: 30px; 
}

.custom-btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.custom-btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}





    .chat-widget {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #f8f9fa;
      border-radius: 4px;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      width: 500px !important;
      height: 50vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      display: none;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .chat-close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px 10px;
      cursor: pointer;
      background: #f44336;
      color: white;
      border: none;
      border-radius: 0 0 0 10px;
    }

    .chat-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      width: 120px;
      height: auto;
      cursor: pointer;
    }

    #chat-messages {
      display: flex;
      flex-direction: column;
      align-items: flex-end; 
      overflow-y: auto;
      max-height: 500px; 
    }

    .input-area form {
      display: flex;
      align-items: flex-start;
    }

    .input-area button {
      margin-left: 10px; 
    }

    .message {
      max-width: 70%; 
      min-width: 20%; 
      margin-bottom: 5px;
      padding: 10px;
      border-radius: 15px;
      color: white;
      font-family: 'Poppins', Arial, sans-serif;
      word-wrap: break-word;
    }

    .user-message {
      text-align: left;
      background-color: #00997d;
    }

    .bot-message {
      align-self: flex-start;
      text-align: left;
      background-color: #3b515e;
    } 

    .spinner {
      margin: 10px auto;
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-radius: 50%;
      border-top: 4px solid #3498db;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #assistant-logo {
      display: block;
      margin: 0 auto; 
      width: 100px; 
      height: 100px; 
      object-fit: cover; 
    }

    .watermarkChatArea iframe {
        background-image: url('img/soporteia.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 20%; 
        background-attachment: scroll; 
    }

    .messageStyle {
        background-color: #e0eaff;
        border-radius: 5px;
        padding: 3px;
        margin: 5px 0;
        display: block;
        white-space: pre-wrap;
    }

    .icon-leaf {
        background-image: url('iconos/add.png') !important;
    }

    .icon-parent {
        background-image: url('iconos/add.png') !important;
    }

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

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px #d9d9d9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #b3b3b3;
    border-radius: 10px;
    border: 1px solid white;

}

.myCustomTreePanel .x-tree-node-text {
    font-size: 13px;  

    font-family: 'Poppins', Arial, sans-serif;
    font-weight: bold;  
}

.myCustomTreePanel, .myCustomTreePanel .x-tree-node-text {

    font-family: 'Poppins', Arial, sans-serif;
    color: #04408c;
    font-weight: bold;
}

canvas {
    display: block;
    width: 100% !important; 
    height: 100% !important; 
}

.swal2-z-index-high {
    z-index: 2147483647  !important; 
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12px;
}

.swal2-confirm {
    border: none;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }

  .btn-opcion1 { background-color: #C6E2FF; border: 1px solid #FAD0C9; color: #333; }
  .btn-opcion1:hover { background-color: #97CEFF; }
  .btn-opcion2 { background-color: #C6E2FF; border: 1px solid #C6E2FF; color: #333; }
  .btn-opcion2:hover { background-color: #97CEFF; }
  .btn-opcion3 { background-color: #C6E2FF; border: 1px solid #C1FFC1; color: #333; }
  .btn-opcion3:hover { background-color: #97CEFF; }
  .btn-opcion4 { background-color: #C6E2FF; border: 1px solid #E3C6FF; color: #333; }
  .btn-opcion4:hover { background-color: #97CEFF; }

  .swal-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
  }

  .swal2-z-index-high {
    padding-bottom: 70px; 
  }

  .btn-cancel {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #FFB3B3; 
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .btn-cancel:hover {
    background-color: #FFA0A0;
  }

.x-grid {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    color: #000000; 
    background-color: #D7E4F3;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.x-column-header {
    font-family: 'Poppins', Arial, sans-serif;
    color: white !important;
}

.x-column-header .x-column-header-text {
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 550;
    color: #000000; 
}

.inner-button-font .x-btn-inner {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 550;
    color: #000000; 
}


.x-column-header * {
    font-family: 'Poppins', Arial, sans-serif;
    color: white;
}


/* Row styling */
.x-grid-item {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Alternate row colors */
.x-grid-item:nth-child(odd) {
    background-color: #ffffff;
}

.x-grid-item:nth-child(even) {
    background-color: #f2faff;
}

.x-grid-item:hover {
    background-color: #e0f7fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.x-grid-item-selected {
    background-color: #ffecb3 !important;
    border-left: 4px solid #ffa000;
}

.x-grid-cell {
    padding: 2px; 
    color: #000000;
    border-bottom: 1px solid #ddd;
    text-align: left;
    line-height: 1.5;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11.5px; 
    text-transform: uppercase;
}

.normal-text {
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
    font-size: 11px; 
}

.normal-bolder-text {
    font-family: 'Poppins', Arial, sans-serif;
    color: #000000;
    font-size: 11px; 
    font-weight: 550;
}

@media (max-width: 768px) {
    .x-grid {
        font-size: 12px;
    }

    .x-column-header {
        font-size: 14px;
        padding: 8px;
    }

    .x-grid-cell {
        padding: 8px;
    }
} 

.custom-combo-box .x-form-trigger {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%20000003"><path d="M7 10l5 5 5-5H7z"/></svg>') no-repeat center center;
    background-size: 18px 18px; 
    border: none;
    width: 20px;
    height: 22px;
    cursor: pointer;
}

.custom-combo-box.bg-color .x-form-trigger {
    background-color: #D0DEF0 !important;
}

.custom-combo-box .x-form-text {
    padding-right: 10px; 
}

.custom-number-field .x-form-spinner-up {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%20000003"><path d="M12 8l6 6H6z"/></svg>') no-repeat center center;
    background-size: 18px 18px;
    border: none;
    height: 10px;
    cursor: pointer;
}

.custom-number-field .x-form-spinner-down {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%20000003"><path d="M12 16l-6-6h12z"/></svg>') no-repeat center center;
    background-size: 18px 18px;
    border: none;
    height: 10px;
    cursor: pointer;
}

.custom-number-box .x-form-spinner:hover {
    background-color: #f0f0f0; 
}

.custom-number-field .x-form-trigger-wrap {
    border-radius: 4px;
}

.custom-number-field .x-form-text {
    padding-right: 5px;
    height: 23px;
}

#toast-container {
    position: fixed;
    top: 60px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 9999999;
}

.toast {
    background-color: rgba(230, 247, 255, 0.8); 
    color: #333;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px; 
    font-family: Arial, sans-serif;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    text-align: center; 
}

.toast.show {
    animation: fadeIn 0.5s forwards;
}

.toast.hide {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Estilo para los botones de navegación (prev, next, today) */
.fc-prev-button,
.fc-next-button,
.fc-today-button {
    background-color: #8B0000 !important; /* Fondo rojo oscuro */
    color: #FFFFFF !important; /* Texto blanco */
    border: 1px solid #5A0000 !important; /* Borde más oscuro para contraste */
    border-radius: 4px !important; /* Bordes redondeados */
    padding: 5px 10px !important; /* Espaciado interno */
}

/* Estilo al pasar el mouse (hover) */
.fc-prev-button:hover,
.fc-next-button:hover,
.fc-today-button:hover {
    background-color: #A00000 !important; /* Fondo rojo más claro al pasar el mouse */
    border: 1px solid #700000 !important;
}

/* Estilo cuando el botón está activo (clic) */
.fc-prev-button:active,
.fc-next-button:active,
.fc-today-button:active {
    background-color: #700000 !important; /* Fondo más oscuro al hacer clic */
}

/* Asegurarse de que el contenedor del calendario ocupe el espacio */
#fullcalendar-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc {
    width: 100% !important;
    height: 100% !important;
}

.fc-event {
    color: #04468C !important; 
    font-weight: bold;
  }
  
  .fc-event .fc-event-title,
  .fc-event .fc-event-time {
    color: #04468C !important; 
    font-weight: bold;
  }
  
  

.fc-view-container,
.fc-view-harness,
.fc-daygrid,
.fc-timegrid {
    width: 100% !important;
    height: 100% !important;
}

.fc-header-toolbar {
    padding: 5px;
}

.fc-daygrid-day {
    min-height: 80px;
}

.fc {
    position: relative;
  }
  
.fc::before {
    content: "";
    background-image: url('img/logo_sgaw.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto; 
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.fc .fc-toolbar-title {
    color: #04468C; /* Rojo */
    font-weight: bold;
}
  
.fc .fc-col-header-cell-cushion {
    color: #04468C; /* Azul */
    font-weight: bold;
}  

.fc-prev-button,
.fc-next-button,
.fc-today-button {
    background-color: #CED9E7 !important; /* Fondo azul */
    color: #04468C !important; /* Texto blanco */
    border: 1px solid #CED9E7 !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    margin-right: 5px !important;
    font-weight: bolder !important;
}

.fc-prev-button:hover,
.fc-next-button:hover,
.fc-today-button:hover {
    background-color: #CED9E7 !important;
    border: 1px solid #CED9E7 !important;
}

.fc-prev-button:active,
.fc-next-button:active,
.fc-today-button:active {
    background-color: #aabcd5 !important;
}

.fc-header-toolbar .fc-dayGridMonth-button,
.fc-header-toolbar .fc-timeGridWeek-button,
.fc-header-toolbar .fc-timeGridDay-button,
.fc-header-toolbar .fc-yearView-button {
    background-color: #CED9E7 !important;
    color: #04468C !important;
    border: 1px solid #aabcd5 !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    margin-right: 5px !important;
    font-weight: bolder !important;
}

.boton_escritorio-icon-el-custom {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    width: 100%;
}
  
.boton_escritorio-text {
    text-align: center;
    font-weight: bold;
    display: block;
    margin-top: 75px; 
}