/* Variables de colores */

/*Plateado (fondo metálico):
Un gris claro alrededor de #D7D7D7 a #EAEAEA
Un gris un poco más oscuro que podría rondar #BFBFBF
En la imagen hay un efecto degradado/reflectivo, así que no es un solo color uniforme.
Borde ovalado (teal/azulado metálico):
Un tono aproximado podría ser #0088A8 o #0090B3
Podríamos ver variaciones más claras y oscuras debido al brillo metálico, por lo que oscila entre algo como #006E89 (más oscuro) y #27BDD1 (más claro).
Texto “DI POLVERE” (azul/teal fuerte):
Podría rondar #037F9B o #0286A3*/

:root {
    --color-primario: #00b34b; /* Verde vibrante */
    --color-secundario: #e2e2e2; /* Gris suave */
    
    --color-exito: #28A745; /* Verde */
    --color-exito-hover: #1d7832; 
    --color-advertencia: #FFC107; /* Amarillo */
    
    --color-peligro: #DC3545; /* Rojo */
    --color-peligro-hover: #a82532; /* Rojo */
    --color-info: #17b832; /* Azul claro */
    --color-fondo: #d0d0d9; /* Gris claro */
    --color-fondo-secciones: #f7f7fc;
    
    --color-texto-oscuro: #343A40; /* Gris oscuro */
    --color-texto-claro: #FFFFFF; /* Blanco */
    --color-text-principal: var(--color-primario);
    
    /*tablas*/
    --color-celda-encabezado: #b5b5b5;
    
    
    /*botones*/
    --color-boton-disable: #ccc;
    --color-boton: #00b32d;
    --color-boton-hover:#0e8134;
  
    /* Sombra y bordes */
    --color-borde: #9f9f9f; 
    --color-sombra: rgba(0, 0, 0, 0.1); /* Sombra ligera */
    
    /*hover*/
    --color-gris-hover: #656565;;
  
    /* Variables de unidades */
    --espaciado-pequeno: 0.5rem; /* 8px */
    --espaciado-mediano: 1rem; /* 16px */
    --espaciado-grande: 2rem; /* 32px */
    --radio-borde: 0.375rem; /* 6px */
    --ancho-maximo: 1200px; /* Máxima anchura para diseño centrado */
  
    /* Tipografía */
    --fuente-principal: 'Arial', sans-serif;
    --tamano-texto-pequeno: 0.875rem; /* 14px */
    --tamano-texto-normal: 1rem; /* 16px */
    --tamano-texto-grande: 1.25rem; /* 20px */
    --tamano-titulo: 2rem; /* 32px */
  }
  
[data-theme="dark"] {
  --color-fondo: #121212;
  --color-fondo-secciones: #292929;
  --color-texto: #ffffff;
  --color-primario: #00b34b; /* Verde vibrante */
  --color-secundario: #292929; /* Gris suave */
  --color-texto-oscuro: #FFFFFF; /* Gris oscuro */
  
  --color-text-principal: var(--color-texto);
  
  --color-borde: #5d5d5d;
  
  /*tabla*/
   --color-celda-encabezado: #212121;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--gris-contenedor);
  border-radius: 5px;
}
  
  /* Estilos generales */
  body {
    font-family: var(--fuente-principal);
    font-size: var(--tamano-texto-normal);
    color: var(--color-texto-oscuro);
    background-color: var(--color-fondo) ; 
    margin: 0;
    padding: 0;
  }
  
  a {
  text-decoration: none; /* Sin subrayado por defecto */
    }
    
    a:hover,
    a:focus {
      text-decoration: none; /* Sin subrayado al pasar el ratón o al enfocar */
    }
  
  
  h1, h2, h3, h4, h5, h6 {
    margin: var(--espaciado-mediano) 0;
    color: var(--color-texto-oscuro);
  }
  
  p {
    margin: var(--espaciado-mediano) 0;
    line-height: 1.6;
  }
  
  #modalmensajeMensaje{
      text-align: center;
  }
  
  /* Botones */
  button {
    min-width: 32px;
    min-height: 32px;
    display: inline-block;
    font-size: var(--tamano-texto-normal);
    color: var(--color-texto-claro);
    background-color: var(--color-boton);
    border: none;
    border-radius: var(--radio-borde);
    padding: var(--espaciado-pequeno) var(--espaciado-mediano);
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: var(--color-boton-hover)
  }
  
  button:disabled{
    background-color: var(--color-boton-disable);
  }
  
  button:disabled:hover{
    background-color: var(--color-boton-disable);
    cursor: not-allowed;
  }
  
  .button--incremental{
      background-color: var(--color-exito) !important;
  }
  
  .button--reductor{
      background-color: var(--color-peligro)!important;
  }
  
  /* Inputs y formularios */
  input, select, textarea {
    font-size: var(--tamano-texto-normal);
    background-color: var(--color-fondo-secciones);
    padding: var(--espaciado-pequeno);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    width: 100%;
    box-sizing: border-box;
    color: var(--color-texto-oscuro);
  }
  
  .versionp{
     margin: 0;
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 50;
    color: var(--color-texto-oscuro);  
  }
  
  input[type=checkbox]{
      width: 20px;
      height: 20px;
      margin: 10px 20px;
      
      scale: 1.5;
  }
  
  .icono-titulo{
      font-size: 1.5rem;
  }
  
  input:focus, select:focus, textarea:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 5px var(--color-sombra);
    outline: none;
  }
  
  .input_checkboxProductos{
    min-width: 15px;
    min-height: 15px;
    display: inline-block;
    font-size: var(--tamano-texto-normal);
    color: var(--color-texto-claro);
    background-color: var(--color-primario);
    border: none;
    border-radius: var(--radio-borde);
    padding: var(--espaciado-pequeno) var(--espaciado-mediano);
    cursor: pointer;
    transition: background-color 0.3s ease; 
    transition: transform 0.3s ease; 
  }
  
  /* Tablas */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--espaciado-grande) 0;
  }
  
  table th, table td {
    border: 1px solid var(--color-borde);
    padding: var(--espaciado-pequeno);
    text-align: left;
  }
  
td input[type="checkbox"] {
      display: block;
      margin: 0 auto;
      
    }
    th[data-tipo], .tdFiltro{
      cursor: pointer;
      user-select: none;
    }
    
    th[data-tipo]:hover, .tdFiltro:hover{
      background-color: var(--color-secundario);
    }

  
  table th {
    background-color: var(--color-celda-encabezado);
    color: var(--color-texto-claro);
  }
  
  table tr:nth-child(even) {
    background-color: var(--color-fondo);
  }
  
  /* Contenedores */
  .container {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: var(--espaciado-mediano);
  }
  
  /* Enlaces */
  a {
    color: var(--color-primario);
    text-decoration: none;
  }
  i {
    color: var(--color-primario);
    
  }
  
  
  .field-invalid {
  border: 1px solid red !important;
}

.field-valid {
  border: 1px solid green !important;
}

#btnFiltrar{
    margin: 23px 0 0 0;
}

.main-container{
    margin: 0 auto;
  }
  
 /**********************************************
 * Modales 
 **********************************************/
.modal {
  display: none; /*flex o none*/
  position: fixed;
  padding-top: 1%;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
}

.modal-content {
  background-color: var(--color-fondo-secciones);
  padding: var(--espaciado-mediano);
  border-radius: var(--radio-borde);
  width: 80%;
  max-width: 90%;
  max-height: 88%;
  box-shadow: 0 2px 6px var(--color-sombra);
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-mediano); /* Controla el espacio entre secciones */
}

/* Elimina márgenes innecesarios */
.modal-content h3 {
  color: var(--color-texto-oscuro);
  margin: 0;
}

/* Input de búsqueda */
.modal-content-search {
  display: flex;
  justify-content: center;
}

#searchInput {
  width: 100%;
  padding: var(--espaciado-pequeno);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  font-size: var(--tamano-texto-normal);
}

.modal-content-message{
  display: none; /*flex o none*/
  justify-content: center;
}

.modal-content-message p{
  font-weight: bold;
  margin: 0px;
}
/*barra de desplazamiento de tabla*/
.modal-content-table {
  width: 100%;
  max-height: 400px; /* Ajusta según tu preferencia */
  overflow-y: auto;
}

/* Scrollbar personalizada solo para .modal-content-table */
.modal-content-table::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modal-content-table::-webkit-scrollbar-track {
    background: var(--color-fondo-secciones); /* fondo acorde a tu tema */
    border-radius: var(--radio-borde);
}

.modal-content-table::-webkit-scrollbar-thumb {
    background-color: var(--color-primario); /* color principal coherente */
    border-radius: var(--radio-borde);
}

.modal-content-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-info); /* efecto hover con azul más claro */
}


/* Tabla de usuarios */
.modal-content-table {
  display: none; /*block o none*/
  width: 100%;
  border-top: 1px solid var(--color-borde);
  overflow-x: auto;
  max-height: 900px; /* o height: 400px; */
  overflow-y: auto;  /* muestra la barra de desplazamiento vertical cuando el contenido es mayor */
  padding: 0px;
}

.btn-modal-icono {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0px var(--espaciado-pequeno) 0px var(--espaciado-pequeno);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    cursor: pointer;
}




/* Estilos base de la tabla */
.listado {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* Cabecera sticky */
.listado thead th {
  position: sticky;
  top: 0;
  z-index: 2; /* Asegura que quede por encima de las celdas */
  background-color: var(--color-secundario); 
  color: var(--color-texto-oscuro);
  border-top: none; /* Esto quita la línea superior */
}

/* Restantes estilos */
.listado th,
.listado td {
  border: 1px solid var(--color-borde);
  padding: var(--espaciado-pequeno);
  text-align: left;
}

/* Sección de filtros */
.seccion-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-mediano);
  justify-content: center; /* Centra los filtros cuando hay pocos */
  align-items: center;
  padding: var(--espaciado-mediano);
  border-radius: var(--radio-borde);
  background-color: var(--color-secundario);
  max-width: 100%; /* Limita el ancho máximo de la sección */
  margin: 0 auto; /* Centra la sección en el modal */
}

.filtro {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 250px;
  flex: 2; /* Se distribuye en la fila sin expandirse demasiado */
  text-align: center; /* Centra el texto de la etiqueta */
}

.filtro label {
  font-weight: bold;
  color: var(--color-texto-oscuro);
}

.filtro select {
  padding: var(--espaciado-pequeno);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  font-size: var(--tamano-texto-normal);
  background-color: var(--color-fondo-secciones);
  cursor: pointer;
}

.filtro input[type="checkbox"] {
  position: relative;
  left: 85px;
  top: 2px;
  will-change: top, left;
}


.filtro select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 5px var(--color-sombra);
  outline: none;
}

/* Botones */
.modal-content-buttons {
  display: flex;
  justify-content: flex-end;
}

.modal-content button {
  background-color: var(--color-primario);
  color: var(--color-texto-claro);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radio-borde);
  cursor: pointer;
  font-size: 1rem;
  margin: 0px var(--espaciado-pequeno) 0px var(--espaciado-pequeno);
  
}

.btn-contenedor {
  position: relative;
  display: inline-block;
}

.btn-contenedor img.icono-superpuesto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0; /* Oculto por defecto */
  transition: opacity 0.3s ease;
}


.modal-content button:hover {
  background-color: var(--color-info);
}

/*modal de mensaje y opcion*/
.modal, modalMensajeOpcion{
    padding-top: 5%;
}

 .mensajeOpcion{
    width: 60%;
    justify-content: center;
}

.modal-content h2{
    display: flex;
    justify-content: center;
}

.modal-mensaje-opcion-button{
    justify-content: center;
}

/* Filas de formulario */
.form-row.barra-herramientas {
  /* ya viene de form-row: display:flex */
  justify-content: flex-start; /* todos los hijos a la izquierda por defecto */
  align-items: center;         /* centrados verticalmente */
}

/* El primer icono se separa todo lo que haga falta (auto‑push) */
.form-row.barra-herramientas img:first-of-type {
  margin-left: auto;
}

/* Espacio pequeño entre iconos */
.form-row.barra-herramientas img + img {
  margin-left: var(--espaciado-pequeno);
}


/*pantalla de carga inicial*/
/* Pantalla de carga: cubre toda la pantalla */
#pantallaCarga {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo-secciones);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté por encima de todo */
    transition: opacity 0.5s ease-out;
}
#pantallaCarga p{
    color: var(--color-texto-oscuro);
}

/* Contenedor de la animación */
.loader-container {
    text-align: center;
    font-size: 18px;
    color: #333;
}

/* Imagen de carga */
.loader {
    width: 80px; /* Ajusta el tamaño según sea necesario */
    height: 80px;
}

/* Clase para ocultar la pantalla de carga con efecto de difuminado */
.fade-out {
    opacity: 0;
    pointer-events: none; /* Evita interacciones una vez oculta */
}

.hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.inputError{
    border-color: var(--color-peligro) !important; 
}
.inputError:focus{
    border-color: var(--color-peligro) !important;
}

.inputSuccess{
    border-color: var(--color-exito) !important;
}
.inputSuccess:focus{
    border-color: var(--color-exito) !important;
}

/*mensajes en login*/
.alerta-formulario{
    display: none;
    margin: 0;
    font-size: 0.8rem;
    text-align: center;
    
}

.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-top: 2rem; }


/* Responsividad */
@media (max-width: 500px) {
  /* Ajustes generales */
  body {
    font-size: 14px;
  }

  /* Modal adaptado */
  .modal-content {
    width: 95%;
    padding: var(--espaciado-pequeno);
    margin-top: 5%;
  }
  
  .form-row {
  display: flex;
  gap: var(--espaciado-mediano);
  flex-wrap: wrap;
  margin-bottom: var(--espaciado-pequeno);
}

  /* Ajustes específicos para inputs y botones */
  input,
  select,
  textarea,
  button {
    font-size: 14px;
    padding: var(--espaciado-pequeno);
  }

  /* Ajustes en tablas y listado */
  .modal-content-table {
    max-height: 250px;
    overflow-x: auto;
  }

  .listado th,
  .listado td {
    padding: 4px;
    font-size: 12px;
  }

  /* Filtros ajustados para móvil */
  .seccion-filtros {
    flex-direction: column;
    gap: var(--espaciado-pequeno);
  }

  .filtro {
    width: 100%;
    min-width: auto;
  }

  /* Botones inferiores */
  .modal-content-buttons {
    flex-direction: column;
    gap: var(--espaciado-pequeno);
  }

  .modal-content-buttons button {
    width: 100%;
    margin: 0;
  }

  /* Encabezado del modal más compacto */
  .modal-content h3,
  .modal-content h2 {
    font-size: 16px;
    text-align: center;
  }

  /* Mejor visualización general */
  * {
    scale: none;
  }
  
  .main-container{
    margin-top: 0 auto;
  }

.form-row{
        flex-direction: column;
    }

}


@media (max-width: 600px) {
    .form-actions {
        justify-content: center;
        flex-direction: column-reverse;
    }
    
    /* Botones de la derecha */
    .right-buttons {
      margin-bottom: 10px;
    }
}