/* =======================================================
   Mobile/Tablet ≤991.98px:
   - Fila 1: [hide] [      producto       ]
   - Fila 2: [sel][photo][current][fill][action]
   ======================================================= */
@media (max-width: 991.98px) {
  /* 1) Oculta encabezado y pie */
  #tabla3 thead,
  #tabla3 tfoot {
    display: none;
  }

  /* 2) Grid de 2 filas × 5 columnas:
       - fila 1: sel | producto (col2–5)
       - fila 2: hide | photo | current | fill | action
  */
  #tabla3 tbody tr {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "sel   product product product product"
      "hide  photo   current  fill    action";
    gap: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    margin-bottom: .75rem;
    padding: .5rem;
    box-sizing: border-box;
  }

  /* 3) Zonas del grid */
  td.col-sel {
    grid-area: sel;
    justify-self: start;
    align-self: start;
    font-weight: 600;
  }
  td.col-product {
    grid-area: product;
    justify-self: end;
    align-self: center;
    text-align: right;
    word-wrap: break-word;
  }
  td.col-hide {
    grid-area: hide;
    justify-self: start;
    align-self: center;
    width: 1.5rem;
    padding-left: 0 !important;
  }
  td.col-photo   { grid-area: photo;   justify-self: center; align-self: center; }
  td.col-current { grid-area: current; justify-self: center; align-self: center; }
  td.col-fill    { grid-area: fill;    justify-self: center; align-self: center; }
  td.col-action  { grid-area: action;  justify-self: center; align-self: center; }
}

   /*
@media (max-width: 991.98px) {
  #tabla3 thead,
  #tabla3 tfoot {
    display: none;
  }
  #tabla3 tbody tr {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "hide product product product product"
      "sel  photo   current  fill   action";
    gap: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    margin-bottom: .75rem;
    padding: .5rem;
    box-sizing: border-box;
  }  td.col-hide {
    grid-area: hide;
    justify-self: start;
    align-self: start;
    width: 1.5rem;
    padding-left: 0 !important;
  }
  td.col-product {
    grid-area: product;
    justify-self: end;
    align-self: center;
    text-align: right;
    word-wrap: break-word;
  }
  td.col-sel     { grid-area: sel;     justify-self: start;  align-self: center; }
  td.col-photo   { grid-area: photo;   justify-self: center; align-self: center; }
  td.col-current { grid-area: current; justify-self: center; align-self: center; }
  td.col-fill    { grid-area: fill;    justify-self: center; align-self: center; }
  td.col-action  {
    grid-area: action;
    justify-self: center;
    align-self: center;
  }
}
*/
/* =========================
   Tus estilos extra
   ========================= */
p.roto {
  word-wrap: break-word;
}
.hoveracc {
  cursor: pointer;
}
.hoveracc:hover {
  background-color: #28a745;
  color: white;
  border-radius: 5px;
}
.hoverinfo:hover {
  background-color: #17a2b8;
  color: white;
  border-radius: 5px;
}