/* ============================================================
   Costaluz — MODO MÓVIL (overrides)
   Archivo real: /assets/styles.mobile.css
   - Aplica si:
     body.view-mobile  (forzado)  o  body.dev-mobile (auto)
   ============================================================ */

body.view-mobile main,
body.dev-mobile main{
  max-width:100% !important;
  padding:10px !important;
  margin:0 auto !important;
}

/* Header: en columna y links más cómodos */
body.view-mobile header,
body.dev-mobile header{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
}

body.view-mobile nav,
body.dev-mobile nav{
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

body.view-mobile .nav-link,
body.dev-mobile .nav-link{
  padding:10px 12px !important;
  border-radius:10px !important;
  font-size:1rem !important;
}

/* Formularios a ancho completo */
body.view-mobile form,
body.dev-mobile form{
  width:100% !important;
  max-width:none !important;
}

body.view-mobile input,
body.view-mobile textarea,
body.dev-mobile input,
body.dev-mobile textarea{
  width:100% !important;
  font-size:16px !important;
}

/* Cards / grids */
body.view-mobile .grid-menu,
body.dev-mobile .grid-menu{
  grid-template-columns:1fr !important;
}

/* Footer a columna */
body.view-mobile .site-footer__wrap,
body.dev-mobile .site-footer__wrap{
  max-width:100% !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

/* ============================================================
   ADMIN PEDIDOS (mobile): tabla a tarjetas (ya lo tenías en base,
   pero lo reforzamos aquí SOLO si es móvil)
   ============================================================ */
body.view-mobile.admin-pedidos .tabla thead,
body.dev-mobile.admin-pedidos .tabla thead{
  display:none !important;
}

body.view-mobile.admin-pedidos .tabla,
body.view-mobile.admin-pedidos .tabla tbody,
body.view-mobile.admin-pedidos .tabla tr,
body.view-mobile.admin-pedidos .tabla td,
body.dev-mobile.admin-pedidos .tabla,
body.dev-mobile.admin-pedidos .tabla tbody,
body.dev-mobile.admin-pedidos .tabla tr,
body.dev-mobile.admin-pedidos .tabla td{
  display:block !important;
  width:100% !important;
}

body.view-mobile.admin-pedidos .tabla tr,
body.dev-mobile.admin-pedidos .tabla tr{
  border-bottom:1px solid var(--line) !important;
  background:#fff !important;
  padding:10px 12px !important;
}

body.view-mobile.admin-pedidos .tabla td,
body.dev-mobile.admin-pedidos .tabla td{
  border-bottom:none !important;
  padding:8px 6px !important;
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
}

body.view-mobile.admin-pedidos .tabla td::before,
body.dev-mobile.admin-pedidos .tabla td::before{
  content: attr(data-label);
  font-weight:900;
  opacity:.75;
  margin-right:12px;
  white-space:nowrap;
}

body.view-mobile.admin-pedidos .acciones .btn,
body.dev-mobile.admin-pedidos .acciones .btn{
  width:100% !important;
  min-width:0 !important;
}
.btn-abonar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background: rgba(16,185,129,.12);
  color:#064e3b;
  font-weight:950;
  text-decoration:none;
}
.btn-abonar:hover{ filter:brightness(0.98); }

.pill-ok{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  font-weight:950;
  color:#065f46;
}