/* custom.css */
:root {
  /* Tipografía limpia y técnica */
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Bordes ligeramente más cuadrados para la tabla y los botones */
  --pico-border-radius: 0.25rem;
  --cabecera-radio: 5rem;
}

/* --- FUSIÓN DE GRID.JS CON PICO CSS --- */

/* Ajustar el color del texto general */
.gridjs-container {
  color: var(--pico-color);
  padding: 0px !important;
}

/* Permitir que los encabezados fijos (sticky) funcionen y ajustar color */
.gridjs-container {
  color: var(--pico-color);
  overflow: visible !important;
}

/* Quitar el fondo blanco por defecto de Grid.js para que respete a Pico */
.gridjs-table {
  background-color: transparent;
  /* Fuerza a la tabla a recalcular el ancho de las columnas en cada página,
     evitando el overflow cuando el contenido de páginas posteriores es más largo. */
  table-layout: auto !important;
}

/* Aplicar los colores de celda y bordes nativos de Pico CSS */
.gridjs-td, .gridjs-th {
  background-color: var(--pico-background-color);
  border-color: var(--pico-muted-border-color);
  border-left: none !important;
  border-right: none !important;
  font-weight: 300;
  
  /* Modifica el padding interior (Arriba/Abajo - Izquierda/Derecha) */
  padding: 0.4rem 0.75rem !important; 
  /* Modifica el tamaño del texto de las celdas */
  font-size: 0.8rem; 
  /* Prohibir el salto de línea en todas las celdas */
  white-space: nowrap;
}

/* Cabecera sólida y más oscura para evitar que se transparenten las filas al hacer scroll */
.gridjs-th {
    background-color: var(--pico-dropdown-hover-background-color) !important;
    /* Usamos una sombra interior (inset) para garantizar que las filas de datos no la tapen */
    box-shadow: inset 0 -1px 0 0 var(--pico-muted-border-color) !important;
    border-bottom: none !important;
}

/* Filas alternas (striped) usando la variable nativa de Pico CSS */
.gridjs-tbody .gridjs-tr:nth-child(odd) .gridjs-td {
  background-color: var(--pico-table-row-stripped-background-color);
}

/* Ajustar el borde exterior de la tabla */
.gridjs-wrapper {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: none !important;
  max-height: calc(100vh - 110px); /* Otorga scroll vertical interno a la tabla adaptándose a la pantalla */
  overflow-y: auto;
}

/* Ajuste específico de altura para la tabla cuando está dentro de un modal para evitar doble scroll */
dialog .gridjs-wrapper {
  max-height: calc(100vh - 220px);
}

/* Controles superiores (Toolbar HTML) */
.toolbar-container {
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  padding: 0 0 0.5rem 0;
}
.toolbar-left, .toolbar-right {
  flex: 1; /* Obliga a los extremos a ocupar el mismo espacio para centrar el bloque medio */
}
.toolbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.toolbar-center {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.table-info {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  font-weight: 300;
  opacity: 0.8;
  padding-left: 10px;
}
.search-wrapper {
  flex-grow: 0;
  position: relative;
  display: flex;
}
.search-wrapper input[type="search"] {
  border-radius: var(--cabecera-radio);
  width: 400px;
  max-width: 100%;
  margin-bottom: 0; /* Anula el margen por defecto de Pico para alinear con el botón */
  padding-right: 3.5rem; /* Añade margen interior derecho para que el texto no se superponga al botón */
}
input, textarea, select {
  font-weight: 300;
}

/* Hacemos que toda la cabecera (thead) sea el elemento "pegajoso" */
.gridjs-thead {
  position: sticky;
  top: 0; 
  z-index: 5;
}

/* Anulamos el 'position: sticky' que Grid.js añade a cada celda 'th' para evitar conflictos. */
th.gridjs-th-fixed {
  position: static;
  padding: 0.75rem 0.75rem !important; 
}

/* Ocultar las flechas de ordenación de las cabeceras manteniendo la funcionalidad de clic en toda la celda */
/* button.gridjs-sort {
  display: none !important;
} */

body { padding: 0px 20px; }
header { margin-bottom: 2rem; }
/* Quitamos overflow-x para no limitar y romper el funcionamiento de los elementos sticky */
#wrapper-tabla { width: 100%; } 

/* Estilos específicos para los metadatos del modal */
.meta-auditoria {
    font-size: 0.85em;
    color: var(--pico-muted-color);
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--pico-form-element-background-color);
    border-radius: var(--pico-border-radius);
    border: 1px solid var(--pico-muted-border-color);
}

main {
  padding-top: 10px !important;
  padding-bottom: 0px !important;
}

.topicons {
  background: transparent;
  border: none;
  color: var(--pico-contrast);
  padding: 10px !important;
}
.helpoldver {
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  margin: 0px 5px 0px 5px;
}
/* Efecto hover sutil para los botones de acción en la tabla */
.btn-accion {
  opacity: 0.4;
  filter: grayscale(100%);
}
.btn-accion:hover {
  opacity: 1;
  filter: grayscale(0%);
  outline: none;
  box-shadow: none;
}
.btn-accion:focus {
  outline: none;
  box-shadow: none;
}

/* Evitar que el badge herede la opacidad y escala de grises de los botones superiores */
.topicons.btn-accion {
  opacity: 1 !important;
  filter: none !important;
}
.topicons.btn-accion > svg {
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all 0.2s ease-in-out;
}
.topicons.btn-accion:hover > svg {
  opacity: 1;
  filter: grayscale(0%);
}

/* Botón de Filtro (Stock/Reservados) */
#btn-filtro-estado {
/*   background-color: var(--pico-form-element-background-color);
  border-color: var(--pico-form-element-border-color); */
  display: flex;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%) scale(0.9); /* Centrado vertical y ligeramente reducido para encajar */
  align-items: center;
  justify-content: center;
  /* Usamos la fórmula nativa de Pico CSS para emparejarlo exactamente con el input */
  width: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
  /* border: 1px solid var(--pico-muted-border-color); */
  background: transparent;
  border: none;
  border-radius: var(--cabecera-radio);
  color: var(--pico-contrast);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 0;
  flex-shrink: 0;
}
#btn-filtro-estado:focus, .topicons:focus {
  /* background-color: var(--pico-form-element-background-color); */
  outline: none;
  box-shadow: none;
}
#btn-filtro-estado:hover {
  /* background-color: var(--pico-dropdown-hover-background-color); */
  outline: none;
  box-shadow: none;
}

/* Obligamos a que el botón en sí NUNCA cambie su opacidad global */
#btn-filtro-estado,
#btn-filtro-estado.activo,
#btn-filtro-estado.inactivo {
  opacity: 1 !important;
  filter: none !important;
}

/* Cuadrícula 2x2 rígida y en píxeles para evitar que colapse en una sola columna */
.filtro-grid {
  display: grid;
  grid-template-columns: 18px 18px;
  grid-template-rows: 18px 18px;
  gap: 3px;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}
.filtro-item svg {
  width: 18px !important;
  height: 18px !important;
  display: block; /* Evita márgenes invisibles debajo de los SVGs */
}
.filtro-togglable {
  transition: all 0.1s ease-in-out;
}

/* Cuando el filtro está ACTIVO (por defecto), apagamos SOLO Instalados y Eliminados */
#btn-filtro-estado.activo .filtro-togglable {
  filter: grayscale(100%) !important;
  opacity: 0.25 !important;
}
/* Cuando el filtro está INACTIVO, los 4 iconos brillan al máximo */
#btn-filtro-estado.inactivo .filtro-togglable {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* Ajuste de tamaño para el botón de portapapeles */
.btn-clipboard svg {
  width: 14px;
  height: 14px;
}

/* Notificación flotante (Toast) */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--pico-contrast);
  color: var(--pico-primary-inverse);
  padding: 0.5rem 1rem;
  border-radius: var(--pico-border-radius);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hacer fijas (sticky) las cabeceras y pies de los modales al hacer scroll */
dialog article header {
  position: sticky;
  top: calc(var(--pico-block-spacing-vertical) * -1);
  z-index: 10;
}

dialog article footer {
  position: sticky;
  bottom: calc(var(--pico-block-spacing-vertical) * -1);
  z-index: 10;
}

fieldset legend, label {
  margin-bottom: 0px;
}

/* Ocultar flecha del dropdown contextual de usuario para que el avatar quede circular y limpio */
#user-menu > summary::after {
    display: none !important;
}
#user-menu {
    margin-bottom: 0;
}
#user-menu > summary {
    list-style: none; /* Fallback para Safari */
    width: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    margin-left: 20px;
    /* Personalización de colores del avatar */
    background-color: var(--pico-form-element-background-color);
    border: 1px solid var(--pico-primary);
    color: var(--pico-primary);
    transition: all 0.2s ease-in-out;
}
/* Efecto al pasar el ratón o hacer clic para abrir el menú */
#user-menu > summary:hover,
#user-menu[open] > summary {
    background-color: var(--pico-primary);
    color: var(--pico-primary-inverse);
}
#user-menu > summary::-webkit-details-marker {
    display: none;
}
#user-menu > summary:focus,
#user-menu > summary:active {
    outline: none;
    box-shadow: none;
}

/* Rejilla personalizada asimétrica (3/4 y 1/4) para pantallas medianas o grandes */
@media (min-width: 768px) {
  /* 20% - 80% (1 parte + 4 partes) */
  .grid.grid-1-4 { grid-template-columns: 1fr 4fr; }
  
  /* 25% - 75% (1 parte + 3 partes) */
  .grid.grid-1-3 { grid-template-columns: 1fr 3fr; }
  
  /* 33% - 66% (1 parte + 2 partes) */
  .grid.grid-1-2 { grid-template-columns: 1fr 2fr; }
  
  /* 40% - 60% (2 partes + 3 partes) */
  .grid.grid-2-3 { grid-template-columns: 2fr 3fr; }
  
  /* 75% - 25% (Inversa) */
  .grid.grid-3-1 { grid-template-columns: 3fr 1fr; }
}

/* Botón flotante para "Volver Arriba" */
.btn-flotante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 5rem;
  background-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.6;
}
.btn-flotante:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Texto de ayuda en la barra de herramientas (Toolbar right) */
.help-text-toolbar {
  margin-right: 15px;
  font-size: 0.85rem;
  font-weight: 200;
  color: var(--pico-muted-color);
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: none; /* Para que no interfiera con el ratón */
}

/* Badge para notificaciones (ej. equipos en tránsito) */
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #ee616f; /* Rojo de alerta estándar */
  color: white;
  font-size: 0.5rem;
  border-radius: 50%;
  font-weight: 500;
  width: 18px;
  height: 18px;
  padding: 0 4px; /* Para que quede bien si el número tiene 2 o más dígitos */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none; /* No bloquear clics del botón que está debajo */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Estilos para la lista de descripción en el modal de ayuda */
dialog dl {
  margin-top: 1.5rem;
}
dialog dt {
  font-weight: 500;
  margin-top: 0.5rem;
}
dialog dd {
  margin-left: 0.6rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--pico-muted-color);
  border-left: 1.5px solid var(--pico-muted-border-color);
  padding-left: 0.6rem;
  line-height: 1.5;
}
code {
  padding: .175rem .375rem
}