/* ============================================================
   VERSIÓN CELULAR / TABLET — Estudio Neme & Asociados
   En pantallas chicas el menú lateral se esconde y se abre con ☰.
   ============================================================ */
.v2-hamb { display: none; }
.v2-menu-velo { display: none; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .v2-hamb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 8px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff; font-size: 20px; cursor: pointer; flex-shrink: 0;
  }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(0,0,0,.25); width: 270px; }
  body.v2-menu-abierto .sidebar { transform: none; }
  body.v2-menu-abierto .v2-menu-velo { display: block; position: fixed; inset: 0; background: rgba(5,14,18,.45); z-index: 99; }
  .main-content { margin-left: 0; min-width: 0; }
  .topbar { padding: 0 12px; height: 56px; }
  .topbar-title { display: flex; align-items: center; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right > span.text-muted, #fbStatus { display: none !important; }
  .topbar-right { gap: 6px; }
  .v2-modo-prueba { font-size: 10px; padding: 2px 7px; }
  #btnSincronizar { padding: 4px 8px !important; font-size: 0 !important; }
  #btnSincronizar::before { content: '🔄'; font-size: 14px; }
  .page-body { padding: 14px 12px 40px; }
  .section-header { flex-wrap: wrap; gap: 10px; }
  .section-header h1 { font-size: 20px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .kpi-card { padding: 12px !important; gap: 8px; }
  .kpi-value { font-size: 18px !important; }
  .kpi-icon { display: none; }
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrapper table { min-width: 640px; }
  .modal { width: 100% !important; max-width: 100% !important; max-height: 92vh !important; border-radius: 14px 14px 0 0; }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .card-body, .card-header { padding-left: 12px; padding-right: 12px; }
  input, select, textarea { font-size: 16px !important; } /* evita el zoom automático del iPhone */
  .btn { min-height: 38px; }

  /* Datos clientes: primero la lista; al elegir un cliente, la ficha a pantalla completa */
  .v2-crm { grid-template-columns: 1fr !important; }
  .v2-crm.v2-con-sel .v2-side { display: none; }
  .v2-crm:not(.v2-con-sel) .v2-detail { display: none; }
  .v2-side { max-height: none !important; position: static !important; }
  .v2-volver { display: inline-flex !important; }
  .v2-key { grid-template-columns: 1fr 1fr !important; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .v2-key-h { display: none !important; }
  .v2-bar { position: sticky; bottom: 0; }
  .v2-otra input[data-of="nombre"] { min-width: 100%; }

  /* Cumplimiento: cada obligación como tarjeta */
  .v2-cu-tabla table { min-width: 0 !important; }
  .v2-cu-tabla thead { display: none; }
  .v2-cu-tabla tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .v2-cu-tabla td { display: block; padding: 0 !important; border: 0 !important; }
  .v2-cu-tabla td:first-child { grid-row: 1 / span 6; padding-top: 2px !important; }
  .v2-cu-tabla td:last-child { margin-top: 6px; }
}
.v2-volver { display: none; }