/* Estilos del feature Cubas */

#productForm {
    max-width: 640px;
}

#productForm label { 
    font-weight: 600; 
    color: var(--texto); }

#productTable { 
    width: 100%; 
    border-collapse: collapse; }


#productTable th, 
#productTable td { 
    padding: 0.65rem 0.85rem; 
    vertical-align: middle; }

#productTable {
  width: 100%;
}

#productTable .col-accion {
  min-width: 150px;
  text-align: right;
  white-space: nowrap;
}

#productTable thead th {
  text-align: center;
}

#productTable td:not(.col-accion) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Evitar que textos largos rompan el diseño en columnas grandes */
#productTable .col-nombre,
#productTable .col-formulacion,
#productTable .col-toxicologia,
#productTable .col-fabricante {
  min-width: 140px;
}

.product-table-wrapper { 
    max-height: 60vh; 
    overflow-y: auto; 
  }

.product-table-wrapper.table-responsive-sm { 
  -webkit-overflow-scrolling: touch; 
  scrollbar-gutter: stable both-edges; 
}

/* Pequeño ajuste visual para los botones de acción */
.btn-product-action { 
  padding: 0.25rem 0.5rem; 
  font-size: .85rem; 
}

/* Responsive Mobile Table */
@media screen and (max-width: 768px) {
    #productTable thead {
        display: none;
    }

    #productTable,
    #productTable tbody,
    #productTable tr,
    #productTable td {
        display: block;
        width: 100%;
    }

    #productTable tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    #productTable td {
        text-align: right;
        padding: 0.75rem;
        position: relative;
        padding-left: 50%;
        /* Leave space for label */
        border-bottom: 1px solid #eee;
    }

    #productTable td:last-child {
        border-bottom: none;
        text-align: center;
        padding-left: 0.75rem;
        /* Reset padding for actions */
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    #productTable td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--texto);
    }

    /* Initial fallback labels if JS doesn't add data-label (though we will update JS) */
    /* Or use nth-of-type if we want pure CSS solution, but data-label is cleaner */
}