@import "styles.css";
@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

.bg-white .rounded-lg .shadow-lg .w-full {
  width: 50%;
}


.custom-panel .p-panel-header {
    background-color: #0065761a; /* Cambia este valor al color deseado */
    color: #043841cc; /* Cambia el color del texto si es necesario */
    font-weight: bold; /* Opcional: estiliza el texto */
    padding: 10px; /* Opcional: ajusta el padding */
  }

  
  
  /*********************** nuevos estilos ****************/
  div.p-paginator.p-paginator-bottom {
    background-color: #1494A9 !important;
  }
  
  /* Estilo para el pie de la tabla (paginador inferior) */
  .p-paginator-bottom {
    background-color: #D0A00B !important; /* Cambia a tu color deseado */
    border-top: 1px solid #D0A00B;
  }
  
  /* Estilo para los botones del paginador */
  .p-paginator .p-paginator-element {
    background-color: transparent;
    color: #333;
    border: none;
  }

  /* Hover en los botones del paginador */
.p-paginator .p-paginator-page:hover {
    background-color: #c4c4c2 !important; /* Amarillo suave en hover */
    color: #000 !important; /* Texto negro para contraste */
    cursor: pointer;
  }
  
  /* Página activa (seleccionada) */
  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background-color: #D0A00B !important; /* Amarillo fuerte al estar activo */
    color: #000 !important; /* Texto negro */
    font-weight: bold;
    border-radius: 25px;
  }

  .p-inputtext-sm .p-inputtext .p-component {
    width: 100% !important;
}

/****************** estilos para el dialog ***********/
  /* Estilo general del diálogo */
  .p-dialog-footer {
    border-top: 1px solid #ccc; /* Línea gris separadora */
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; /* Uno a la izquierda, otro a la derecha */
    padding: 1rem;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  /* Estilo para el botón "Sí" */
  .custom-confirm-dialog .accept-button {
    background-color: #407881 !important; /* Verde */
    color: white !important;
    border: none;
  }
  
  /* Estilo para el botón "No" */
  .custom-confirm-dialog .reject-button {
    background-color: #407881 !important; /* Rojo */
    color: white !important;
    border: none;
  }

  /***************** cambiar colores del datepicker ************/
  /* Cambia el fondo y el color del texto del encabezado */
.p-datepicker .p-datepicker-header {
  background-color: #1494A9;  /* Azul indigo */
  color: #ffffff;
  border-bottom: 1px solid #3b3b3b;
}

.p-datepicker-title{
  margin: auto;
  color: #ffffff !important;
}

.p-datepicker .p-datepicker-calendar thead th {
  background-color: #1494A9;  /* Azul índigo */
  color: white;
  border: none; /* Opcional: quita bordes */
}

/* Cambia color del botón "Hoy" y "Limpiar" */
.p-datepicker .p-datepicker-buttonbar .p-button {
  background-color: #1494A9;  /* Verde */
  border-color: #1494A9;
  color: white;
}

.p-datepicker .p-datepicker-buttonbar .p-button:hover {
  background-color: #1494A9;  /* Verde oscuro al pasar el mouse */
  border-color: #1494A9;
}

/* Fuerza el texto blanco para el mes y el año */
.p-datepicker-month {
  color: white;
}

/* A veces el span dentro necesita estilo directo también */
.p-datepicker-year {
  color: white;
}


/********************************centrar nombre de las columnas *******************/
.p-column-title{
  text-align: center;
  margin: auto;
}

.p-dropdown-panel{
  z-index: 9999999999999999999 !important;
}

.p-sidebar-mask .p-sidebar-left .p-component-overlay .p-component-overlay-enter .p-sidebar-visible{
  z-index: 9999999999999999999999 !important;
}