/* ============================================================
   LEGÁLIS PARAGUAY — Mejoras Mobile
   Agregar al final de assets/css/legalis.css
   O subir como archivo separado y linkear en header.php
   ============================================================ */

/* ── Variables globales de spacing mobile ─────────────────── */
:root {
  --mobile-px: 1rem;       /* padding horizontal base en mobile */
  --mobile-gap: .875rem;   /* gap entre elementos en mobile    */
}

/* ════════════════════════════════════════════════════════════
   BREAKPOINT MOBILE — max 768px
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Contenedor global ──────────────────────────────────── */
  .container,
  .container-fluid {
    padding-left: var(--mobile-px) !important;
    padding-right: var(--mobile-px) !important;
  }

  /* ── Navbar ─────────────────────────────────────────────── */
  #mainNavbar .container {
    padding-left: .875rem !important;
    padding-right: .875rem !important;
  }
  .navbar-brand {
    margin-left: .25rem;
  }
  /* Menú desplegable mobile: más espacio */
  .navbar-collapse {
    padding: .75rem .25rem .5rem;
  }
  .navbar-nav .nav-link {
    padding: .55rem .5rem !important;
    font-size: .9rem;
  }

  /* ── Panel de usuario ───────────────────────────────────── */
  .panel-content {
    padding: 1.25rem var(--mobile-px) !important;
  }

  /* ── Cards ──────────────────────────────────────────────── */
  .card-body {
    padding: 1.1rem !important;
  }
  .card-header {
    padding: .85rem 1.1rem !important;
  }

  /* ── Tablas responsive ──────────────────────────────────── */
  .table-responsive {
    margin-left: calc(-1 * var(--mobile-px));
    margin-right: calc(-1 * var(--mobile-px));
    padding-left: var(--mobile-px);
    padding-right: var(--mobile-px);
  }
  /* Celdas de tabla más compactas */
  .table td, .table th {
    padding: .6rem .75rem !important;
    font-size: .82rem;
  }

  /* ── Stat cards ─────────────────────────────────────────── */
  .stat-card {
    padding: .9rem 1rem !important;
  }
  .stat-num {
    font-size: 1.3rem !important;
  }
  .stat-label {
    font-size: .72rem !important;
  }

  /* ── Formularios ────────────────────────────────────────── */
  .form-control,
  .form-select {
    font-size: .9rem !important;
    padding: .55rem .75rem !important;
  }
  .input-group-text {
    font-size: .85rem !important;
    padding: .5rem .75rem !important;
  }

  /* ── Botones ────────────────────────────────────────────── */
  .btn {
    font-size: .875rem !important;
    padding: .5rem .9rem !important;
  }
  .btn-lg {
    font-size: .9rem !important;
    padding: .65rem 1.1rem !important;
  }
  .btn-sm {
    font-size: .78rem !important;
    padding: .35rem .65rem !important;
  }

  /* ── Títulos ────────────────────────────────────────────── */
  h1 { font-size: 1.6rem !important; }
  h4 { font-size: 1.1rem !important; }
  h5 { font-size: 1rem  !important; }

  /* ── Página pública de aviso ────────────────────────────── */
  .aviso-contenido .card-body {
    padding: 1.1rem !important;
    font-size: .93rem !important;
    line-height: 1.75 !important;
  }

  /* ── FAQ acordeón ───────────────────────────────────────── */
  .faq-btn {
    padding: .85rem 1rem !important;
    font-size: .9rem !important;
  }
  .faq-resp-inner {
    padding: .75rem 1rem !important;
    font-size: .87rem !important;
  }

  /* ── Footer ─────────────────────────────────────────────── */
  footer .container {
    padding-left: var(--mobile-px) !important;
    padding-right: var(--mobile-px) !important;
  }
  footer .row {
    row-gap: 2rem !important;
  }

  /* ── Páginas estáticas ──────────────────────────────────── */
  .page-content {
    font-size: .93rem !important;
    line-height: 1.75 !important;
  }
  .page-content h3 {
    font-size: 1.1rem !important;
  }
  .page-content h4 {
    font-size: 1rem !important;
  }

  /* ── Página de contacto ─────────────────────────────────── */
  .card-body.p-4,
  .card-body.p-5 {
    padding: 1.25rem !important;
  }

  /* ── Hero sections ──────────────────────────────────────── */
  [style*="padding:3rem 0"],
  [style*="padding: 3rem 0"] {
    padding: 2rem 0 !important;
  }
  [style*="padding:2.5rem 0"],
  [style*="padding: 2.5rem 0"] {
    padding: 1.75rem 0 !important;
  }

  /* ── Buscador mobile ────────────────────────────────────── */
  .d-xl-none form {
    padding: .5rem var(--mobile-px) !important;
  }

  /* ── Tabs (perfil, mis-pagos, etc.) ─────────────────────── */
  .nav-tabs .nav-link {
    padding: .5rem .65rem !important;
    font-size: .82rem !important;
  }

  /* ── Sidebar panel usuario (oculto en mobile, ya está OK) ── */

  /* ── Paginación ─────────────────────────────────────────── */
  .pagination .page-link {
    padding: .35rem .6rem !important;
    font-size: .82rem !important;
  }

  /* ── Alerts / Flash messages ────────────────────────────── */
  #flashWrap {
    left: var(--mobile-px) !important;
    right: var(--mobile-px) !important;
    min-width: unset !important;
    max-width: unset !important;
  }

  /* ── Widget QR verificación ─────────────────────────────── */
  [id^="qrw_"] {
    font-size: .82rem !important;
  }
  [id^="qrw_"] img {
    width: 100px !important;
    height: 100px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   BREAKPOINT EXTRA PEQUEÑO — max 480px (smartphones chicos)
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  :root { --mobile-px: .875rem; }

  /* Panel: reducir padding adicional */
  .panel-content {
    padding: 1rem var(--mobile-px) !important;
  }

  /* Tabs en una sola línea con scroll */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-item {
    flex-shrink: 0;
  }

  /* Stat cards: 2 columnas forzadas */
  .row > [class*="col-6"] {
    padding-left: .4rem !important;
    padding-right: .4rem !important;
  }

  /* Botones apilados */
  .d-flex.gap-3 > .btn,
  .d-flex.gap-2 > .btn {
    font-size: .8rem !important;
  }

  /* Tabla: font más pequeño */
  .table td, .table th {
    padding: .45rem .5rem !important;
    font-size: .78rem !important;
  }

  /* Hero titles */
  h1 { font-size: 1.4rem !important; }

  /* Logo del navbar más pequeño */
  .navbar-brand div:first-child {
    font-size: 1.25rem !important;
    letter-spacing: 2px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MEJORAS TÁCTILES (todos los dispositivos touch)
════════════════════════════════════════════════════════════ */
@media (hover: none) {

  /* Targets táctiles mínimos 44×44px (recomendación Apple/Google) */
  .btn,
  .nav-link,
  .list-group-item-action,
  .dropdown-item,
  .sidebar-link {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* Sin hover effects que queden "pegados" en touch */
  a:hover,
  .btn:hover {
    opacity: 1;
  }

  /* Formularios: sin zoom en iOS (font-size ≥ 16px) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}