/* (1-oct Diego) Panel /bot en el celular: la tabla de usuarios se vuelve tarjetas, campos y botones comodos.
   Columnas de la tabla: 1 seleccion, 2 Nombre, 3 Telefono, 4 Rol, 5 Creditos, 6 Fecha de registro, 7 Acciones. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  input, select, textarea { font-size: 16px !important; }            /* iPhone no hace zoom al escribir */
  .overflow-x-auto { overflow-x: visible !important; border: 0 !important; }

  table.w-full.text-sm, table.w-full.text-sm tbody { display: block; width: 100%; }
  table.w-full.text-sm thead { display: none; }
  table.w-full.text-sm tr {
    display: block; position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 10px 12px 8px 40px; margin: 0 0 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }
  table.w-full.text-sm td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 3px 0 !important; border: 0 !important; font-size: 14px; text-align: right; white-space: normal !important;
  }
  table.w-full.text-sm td::before { font-weight: 600; color: #6b7280; font-size: 12px; text-align: left; flex-shrink: 0; }
  table.w-full.text-sm td:nth-child(1) { position: absolute; left: 10px; top: 12px; padding: 0 !important; }
  table.w-full.text-sm td:nth-child(2) { font-weight: 700; font-size: 15px; color: #111827; }
  table.w-full.text-sm td:nth-child(2)::before { content: "Nombre"; }
  table.w-full.text-sm td:nth-child(3)::before { content: "Teléfono"; }
  table.w-full.text-sm td:nth-child(4)::before { content: "Rol"; }
  table.w-full.text-sm td:nth-child(5) { font-weight: 700; color: #047857; }
  table.w-full.text-sm td:nth-child(5)::before { content: "Créditos"; }
  table.w-full.text-sm td:nth-child(6)::before { content: "Registro"; }
  table.w-full.text-sm td:nth-child(7) { justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 8px !important; border-top: 1px solid #f1f2f6 !important; }
  table.w-full.text-sm td:nth-child(7) button { min-height: 40px; min-width: 40px; }

  /* ventanas (acreditar, editar): que quepan en la pantalla */
  .fixed .max-w-md, .fixed .max-w-lg, .fixed .max-w-xl, .fixed .max-w-2xl, [role="dialog"] {
    max-width: calc(100vw - 20px) !important; width: calc(100vw - 20px) !important; margin-left: auto; margin-right: auto;
  }
  .fixed .p-6, .fixed .p-8 { padding: 16px !important; }
  .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  .fixed button { min-height: 42px; }
}