/* ==========================================================================
   VetGestión — Ajustes responsivos (tablet y celular)
   ========================================================================== */

/* Tablets (ej. Android en horizontal/vertical) */
@media (max-width: 1100px) {
  .grid-dos-columnas { grid-template-columns: 1fr; }
  .topbar__buscador { width: 240px; }
}

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    width: 250px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 90;
  }
  .sidebar--abierto { transform: translateX(0); box-shadow: var(--sombra-flotante); }

  .topbar__buscador { display: none; }
  .pagina { padding: 18px; }
  .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
}

/* Celulares */
@media (max-width: 600px) {
  .topbar { padding: 0 14px; }
  .topbar__usuario-info { display: none; }
  .pagina__encabezado { flex-direction: column; align-items: flex-start; }
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .tarjeta-kpi__valor { font-size: 1.5rem; }
  .modal { padding: 18px; }
  .login-caja { padding: 0 6px; }
  table.tabla { font-size: 0.8rem; }
  table.tabla th, table.tabla td { padding: 8px; }
}

/* Tablas adaptables: en pantallas muy chicas se transforman en tarjetas apiladas */
@media (max-width: 480px) {
  table.tabla--adaptable thead { display: none; }
  table.tabla--adaptable, table.tabla--adaptable tbody, table.tabla--adaptable tr, table.tabla--adaptable td {
    display: block; width: 100%;
  }
  table.tabla--adaptable tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radio-chico);
    margin-bottom: 10px;
    padding: 8px 12px;
  }
  table.tabla--adaptable td {
    border-bottom: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  table.tabla--adaptable td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.76rem;
  }
}