#mobile-header {
  /* El padding superior será el valor que sea MAYOR: 
     nuestro padding base de 1rem O la altura del notch dee iOS. */
  padding-top: max(0.5rem, env(safe-area-inset-top));
}
#safe-area-top-spacer {
  height: env(safe-area-inset-top);
}
.tabulator-row:nth-child(even):not(.fila-instalado) {
  background-color: #f1f1f1;
}
.tabulator-row:nth-child(odd):not(.fila-instalado) {
  background-color: #ffffff;
}
.fila-instalado {
  background-color: #cdffb7 !important;
}
.fila-eliminado {
  background-color: #fddede !important; /* rojo claro */
  color: #bc6363;            /* rojo oscuro */
}
.fila-eliminado .tabulator-cell {
  text-decoration: line-through;
}


  /* background-color: rgb(160, 250, 255) !important; */
.tabulator-row:hover {
  background-color: #e0f0ff !important;
}

.tabulator .tabulator-row.expandida {
  /*background-color: rgb(245, 241, 143) !important; /* amarillo suave */
  background-color: #bae6fd !important;
}
.tabulator-cell.col-id {
  font-size: 0.7rem;
  color: #555;

  /* Añadidos para alinear visualmente con el resto de filas */
  line-height: 1.35rem;       /* mismo alto de línea que las demás celdas */
  vertical-align: middle;    /* centra verticalmente */
  padding-bottom: 0.2rem;
}
/* Comento esta propiedad porque creo que no se usa */
/* .detalle-fila td {
  border-left: 5px solid #facc15;
  background: #f8fafc;
  padding: 1rem;
  border-top: none;
  border-bottom: 1px solid #ccc;
} */
.detalle-fila {
  overflow: visible;
}
.detalle-formulario {
  width: 99%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.detalle-input {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #83bfff;
  border-radius: 4px;
  width: 100%;
}

.detalle-formulario label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#stock-control-table {
  overflow-x: visible  !important;
  border-radius: 0.25rem; /* Equivale a rounded-md */
}
/* Estilos para las filas de alerta en la tabla de control de stock */
.tabulator-row.fila-alerta {
  color: red;
  /* font-weight: bold; */
}
#tabla-inventario {
  overflow-x: visible  !important;
  border-radius: 0.25rem; /* Equivale a rounded-md */
}
.detalle-input:disabled {
  background-color: #f3f4f6; /* Un gris claro, similar a bg-gray-100 de Tailwind */
  cursor: not-allowed;
  border-color: #d1d5db; /* Un borde gris */
}
aside.panel-abierto {
  transform: translateX(0);
}
/* Estilos para las pestañas del panel de admin móvil */
/* Estilo base para todos los botones de pestaña */
.tab-btn {
  /* Hacemos el borde transparente por defecto */
  border-color: transparent;
  color: #6b7280; /* text-gray-500 */
}
/* --- ESTILO PARA LA PESTAÑA ACTIVA --- */
.tab-btn.active-tab {
  /* Fondo blanco para que se fusione con el contenido */
  /* background-color: white !important; */
  /* Borde gris en los lados y arriba, pero blanco (invisible) en la parte de abajo */
  /* border-color: #d1d5db #d1d5db white !important; */
  /* Color de texto más llamativo */
  color: #000000 !important; /* text-blue-600 */
  font-weight: 600 !important; /* Negrita */
}
.no-right-border {
  border-right: none !important;
}
.sombra-interior {
  box-shadow: inset -0.5px -0.5px 0 0 #73b0e5;
}
/* Estilo para la fila seleccionada en Tabulator */
/* .tabulator-row.tabulator-selected {
    background-color: #dbeafe !important;
    Azul claro, como blue-200 de Tailwind
    Lo borro porque da conflicto con tabulator.min.css
} */


/* Animación de destello azul para el panelInformacion volviendo a gray-200 */
@keyframes flash-blue {
    0% { background-color: #E5E7EB; /* gray-200 (color original del panel) */ }
    50% { background-color: #bfdbfe; /* blue-200 de Tailwind */ } /* Azul más intenso en el medio */
    100% { background-color: #E5E7EB; /* Vuelve a gray-200 */ }
}

.flash-panel-blue {
    animation: flash-blue 0.3s ease-out; /* Duración de 0.3 segundos */
    /* Asegúrate de que el color final coincida con el color original de tu panel. */
    background-color: #E5E7EB; /* Se queda en el color original después de la animación */
}


/* Por defecto, ocultar el panel de información en pantallas pequeñas */
/* Forzar oculto en el movil */
/* #panelInformacion {
    display: none !important;
} */

/* Mostrar el panel de información en pantallas de escritorio (a partir de 768px, que es el 'md' de Tailwind) */
 /* Forzar visible como bloque en escritorio */
/* @media (min-width: 768px) {
    #panelInformacion {
        display: block !important;
    }
} */

/* Nuevo estilo para el estado "Reservado" */
.fila-reservado {
    background-color: #fff9d9 !important; /* Lemon Chiffon: amarillo muy suave */
}