/* ============================================================
   mobile-fixes.css — Ajustes para WebView Android (Capacitor)
   Inyectado en todas las páginas via app.py after_request
   ============================================================ */

/* ─── 1. BARRA DE ESTADO: padding fijo para Android WebView ─── */
/* env(safe-area-inset-top) no funciona en WebView Android,
   usamos padding fijo de 36px que cubre la barra de estado */
@media (max-width: 768px) {

  body {
    padding-top: 36px !important;
  }

  /* Toolbar sticky debe empezar debajo del padding */
  .filters-toolbar {
    top: 36px !important;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.85rem;
  }

  /* thead sticky debajo del toolbar (~36px body + ~48px toolbar) */
  thead th {
    top: 84px !important;
  }

  /* ─── 2. LISTADOS: convertir tabla a tarjetas en móvil ─── */
  /* Ocultar cabecera de tabla */
  .table-responsive table thead {
    display: none;
  }

  /* Cada fila se convierte en un bloque/tarjeta */
  .table-responsive table tbody tr {
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem;
    background: #fff;
  }
  .table-responsive table tbody tr.table-danger {
    background: #f8d7da;
    border-color: #f1aeb5;
  }
  .table-responsive table tbody tr.table-warning {
    background: #fff3cd;
    border-color: #ffe69c;
  }

  /* Cada celda se muestra en bloque con su label */
  .table-responsive table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    border: none;
    font-size: 0.85rem;
  }

  /* Poner label automático antes de cada celda */
  .table-responsive table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    color: #6c757d;
    min-width: 90px;
    flex-shrink: 0;
  }

  /* Celda de acciones: centrar botones */
  .table-responsive table tbody td:last-child {
    justify-content: flex-start;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding-top: 0.4rem;
    border-top: 1px solid #eee;
    margin-top: 0.3rem;
  }
  .table-responsive table tbody td:last-child::before {
    display: none;
  }

  /* Semáforo (primera celda con dot): integrar en la tarjeta */
  .table-responsive table tbody td:first-child {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0;
    justify-content: flex-end;
  }
  .table-responsive table tbody td:first-child::before {
    display: none;
  }
  .table-responsive table tbody tr {
    position: relative;
  }

  /* Botones de acción: tamaño táctil adecuado */
  td .btn-sm, td .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
  }

  /* ─── 3. TOOLBAR: compacto ─── */
  .filters-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.3rem !important;
  }
  .filters-toolbar > div {
    width: 100%;
  }
  .filters-toolbar input[type="search"] {
    width: 100% !important;
  }

  /* ─── 4. CONTENEDORES: menos padding lateral ─── */
  .container-fluid, .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ─── 5. FORMULARIOS: mejor UX táctil ─── */
  .form-control, .form-select {
    min-height: 42px;
    font-size: 0.9rem;
  }
  .form-check-input {
    width: 1.3em;
    height: 1.3em;
  }

  /* Topbar actions: apilar */
  .topbar-actions {
    flex-direction: column;
    width: 100%;
  }
  .topbar-actions .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  /* Títulos más compactos */
  h3, .h3 { font-size: 1.1rem; }
  h5, .h5 { font-size: 0.95rem; }

  /* Input groups: wrap */
  .input-group { flex-wrap: wrap; }
  .input-group > .form-control,
  .input-group > .btn { flex: 1 1 auto; min-width: 100px; }

  /* Field-box compacto */
  .field-box {
    padding: 0.6rem !important;
    margin-bottom: 0.7rem !important;
  }

  /* Thumbnails de fotos */
  .thumb {
    width: 72px !important;
    height: 55px !important;
  }

  /* Paginación compacta */
  .pagination .page-link {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* ─── Desktop: sin cambios ─── */
@media (min-width: 769px) {
  /* Solo aplicar safe-area si es standalone (PWA) */
  @media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top, 0px); }
  }
}