/*! Mágico Hogar · patrones para celular (POS y tienda) · v1
   Clases con prefijo mh- para no chocar con los estilos actuales. Ver sistema-de-diseno.html. */
/* Variables que usan estos patrones (si el tema no las trae) */
:root{--tap-min:44px;--font-size-input:16px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--ease:cubic-bezier(.22,.7,.2,1);--dur:180ms}
/* 1. Toques cómodos y campos que no hacen zoom en iPhone */
@media (max-width: 768px){
  input,select,textarea{font-size:var(--font-size-input)!important}
  .mh-toque,button,.btn,a.btn,[role="button"]{min-height:var(--tap-min)}
  .mh-icono-boton{min-width:var(--tap-min);min-height:var(--tap-min);display:inline-grid;place-items:center}
}
/* 2. Tablas que se vuelven tarjetas en el celular.
   <table class="mh-tabla-tarjetas"> … <td data-label="Cliente">…</td> */
@media (max-width: 640px){
  .mh-tabla-tarjetas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mh-tabla-tarjetas,.mh-tabla-tarjetas tbody,.mh-tabla-tarjetas tr,.mh-tabla-tarjetas td{display:block;width:100%}
  .mh-tabla-tarjetas tr{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:12px 14px;margin:0 0 10px;box-shadow:var(--shadow-sm)}
  .mh-tabla-tarjetas td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border:0;text-align:right;font-size:14px}
  .mh-tabla-tarjetas td::before{content:attr(data-label);color:var(--color-text-muted);text-align:left;font-weight:500;flex:none}
  .mh-tabla-tarjetas td[data-principal]{display:block;text-align:left;font-weight:600;font-size:16px;color:var(--color-text);padding-bottom:8px;border-bottom:1px solid var(--color-border);margin-bottom:4px}
  .mh-tabla-tarjetas td[data-principal]::before{content:none}
  .mh-tabla-tarjetas td[data-acciones]{justify-content:flex-end;padding-top:10px}
  .mh-tabla-tarjetas td[data-acciones]::before{content:none}
  .mh-tabla-tarjetas td[data-ocultar-movil]{display:none}
}
/* 3. Barra de acción fija abajo (Cobrar, Agregar al carrito, Guardar) */
.mh-barra-accion{position:sticky;bottom:0;z-index:30;display:flex;gap:10px;align-items:center;justify-content:space-between;
  background:var(--color-surface);border-top:1px solid var(--color-border);padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.06)}
/* 4. Hoja inferior (filtros, opciones) */
.mh-hoja-fondo{position:fixed;inset:0;background:var(--color-overlay);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);z-index:90}
.mh-hoja{position:fixed;left:0;right:0;bottom:0;z-index:91;background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:86vh;overflow:auto;
  padding:8px var(--space-4) calc(16px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .32s var(--ease);box-shadow:var(--shadow-lg)}
.mh-hoja::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:var(--color-border);margin:6px auto 14px}
.mh-hoja.abierta{transform:none}.mh-hoja.abierta+.mh-hoja-fondo,.mh-hoja-fondo.abierta{opacity:1;pointer-events:auto}
@media (min-width: 769px){.mh-hoja{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:var(--radius-xl);transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:all .25s var(--ease)}.mh-hoja.abierta{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}.mh-hoja::before{display:none}}
/* 5. Menú inferior del POS en celular */
.mh-nav-inferior{display:none}
@media (max-width: 768px){
  .mh-nav-inferior{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:var(--color-surface);
    border-top:1px solid var(--color-border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mh-nav-inferior a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:var(--tap-min);justify-content:center;font-size:12px;color:var(--color-text-muted);text-decoration:none;border-radius:12px}
  .mh-nav-inferior a.activo{color:var(--color-primary-text);font-weight:600}
  .mh-nav-inferior a.principal{background:var(--color-primary);color:var(--color-on-primary);margin:0 6px}
  body.mh-con-nav-inferior{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* 6. Fila de chips desplazable (filtros rápidos, categorías) */
.mh-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--space-4);margin:0 calc(var(--space-4) * -1);scroll-snap-type:x proximity}
.mh-chips::-webkit-scrollbar{display:none}
.mh-chips>*{flex:none;scroll-snap-align:start;min-height:36px}
/* 7. Esqueleto de carga */
.mh-esqueleto{background:linear-gradient(90deg,var(--color-skeleton) 25%,var(--color-surface-alt) 37%,var(--color-skeleton) 63%);background-size:400% 100%;animation:mh-brillo 1.3s ease infinite;border-radius:8px;color:transparent!important}
@keyframes mh-brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* 8. Puntos del carrusel con área de toque de 44 px */
.mh-puntos button{position:relative;width:8px;height:8px;border-radius:9px;border:0;background:currentColor;opacity:.45;margin:0 6px}
.mh-puntos button[aria-current="true"]{width:22px;opacity:1}
.mh-puntos button::before{content:"";position:absolute;inset:-18px -10px}
/* 9. Márgenes seguros en celulares con muesca */
.mh-seguro{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}

/* ===== Ajustes propios del sistema (sobre los patrones base) ===== */
/* Toques: los botones pequeños (btn-sm) quedan en 40 px para no deformar las filas */
@media (max-width: 768px){
  .btn-sm{min-height:40px}
  .mh-tabla-tarjetas td .btn-sm{min-height:36px}
  .modal-footer{position:sticky;bottom:0;background:var(--color-surface);padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:2}
}
/* Tablas en tarjetas: se pulen los casos de la tabla del sistema */
@media (max-width: 640px){
  .table-responsive:has(> .mh-tabla-tarjetas){overflow:visible;border:0;background:transparent;box-shadow:none;max-height:none}
  .mh-tabla-tarjetas{min-width:0!important;width:100%;border:0;background:transparent}
  .mh-tabla-tarjetas tbody{background:transparent}
  .mh-tabla-tarjetas tr{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg,14px);padding:12px 14px;margin:0 0 10px;box-shadow:var(--shadow-sm)}
  .mh-tabla-tarjetas td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0!important;border:0!important;text-align:right;font-size:14px;background:transparent!important;width:100%;min-width:0}
  .mh-tabla-tarjetas td[data-label]::before{content:attr(data-label);color:var(--color-text-muted,var(--color-gray));text-align:left;font-weight:500;flex:none;font-size:13px}
  .mh-tabla-tarjetas td[data-principal]{display:block;text-align:left;font-weight:700;font-size:16px;color:var(--color-text);padding-bottom:8px!important;border-bottom:1px solid var(--color-border)!important;margin-bottom:4px}
  .mh-tabla-tarjetas td[data-principal]::before{content:none}
  .mh-tabla-tarjetas td[data-acciones]{justify-content:flex-end;padding-top:10px!important}
  .mh-tabla-tarjetas td[data-acciones]::before{content:none}
  .mh-tabla-tarjetas td[data-completa]{display:block;text-align:center}
  .mh-tabla-tarjetas td[data-ocultar-movil]{display:none}
  .mh-tabla-tarjetas td > *{max-width:100%}
  .tabla-cols-barra{justify-content:flex-start}
}
@media (max-width: 640px){
  .mh-filtros-prod:not(.mh-abiertos) .prod-filtros-grid{display:none}
  .mh-filtros-prod .prod-filtros-grid{grid-template-columns:1fr 1fr}
}
/* Barras de filtros: buscador + botón «Filtros (n)»; el resto se abre al tocarlo */
.mh-filtros-btn .mh-filtros-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary,#fff);font-size:11.5px}
.mh-filtros-btn .mh-filtros-n[hidden]{display:none}
@media (min-width: 641px){ .mh-filtros-btn{display:none} }
@media (max-width: 640px){
  .mh-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .mh-filtros > .input-search{flex:1 1 0;min-width:0}
  .mh-filtros:not(.mh-abiertos) > :not(.input-search):not(.mh-filtros-btn):not(.btn-primary):not(.btn-secondary){display:none!important}
  .mh-filtros.mh-abiertos > .input-filter, .mh-filtros.mh-abiertos > select, .mh-filtros.mh-abiertos > input:not(.input-search){flex:1 1 100%;max-width:none}
  .mh-filtros.mh-abiertos > .btn{flex:1 1 calc(50% - 8px)}
}

/* ===== Toques de 44 px y letra legible (celular) ===== */
@media (max-width: 768px){
  /* ningún texto por debajo de 12 px */
  th, .badge, .status-badge, .kpi-pie, .lv-hora, .lt-pos, .la-chip, .la-mas, .sidebar-group-label,
  .tienda-card-marca, .tienda-card-add, .tienda-anuncio-items span, .tienda-etq, .tienda-footer-tagline { font-size: 12px !important; }
  .table th, table th, .badge, .status-badge, .kpi-pie, .lv-hora, .lt-pos, .la-chip, .la-mas { font-size: 12px !important; }
  /* áreas de toque */
  .sidebar-sublink, .sidebar-link, .la-sub, .la-mas, .panel-head-link, .tienda-seccion-link,
  .tienda-footer-col a, .tienda-card-nombre-link, .tienda-navbar-brand { min-height: var(--tap-min); display: inline-flex; align-items: center; min-width: 0; }
  .tienda-footer-col a { display: flex; }
  .sidebar-collapse, .btn-action-menu, .tienda-card-fav, .tienda-icono-btn, .tienda-menu-toggle { min-width: var(--tap-min); min-height: var(--tap-min); }
  .tienda-hero-carrusel-puntos button, .tienda-confianza-puntos span { position: relative; }
  .tienda-hero-carrusel-puntos button::before, .tienda-confianza-puntos span::before { content: ""; position: absolute; inset: -18px -10px; }
  .tienda-container a:not(.btn):not([class*="tienda-"]) { padding-block: 4px; }
}
/* Encabezado de la tienda en pantallas angostas: el nombre cede espacio a los iconos */
@media (max-width: 480px){
  .tienda-navbar-inner{gap:8px}
  .tienda-navbar-brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .tienda-navbar-brand .tienda-nombre-marca{min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:6px;font-size:16px}
  .tienda-navbar-acciones{gap:2px}
}
/* Encabezado de la tienda en el celular: el logo manda. La cuenta pasa al menú (☰) para que nada lo tape. */
@media (max-width: 480px){
  .tienda-navbar-acciones .tienda-cuenta-dropdown,
  .tienda-navbar-acciones > a[aria-label="Ingresar"]{display:none}
  .tienda-navbar-brand{flex:1 1 auto;justify-content:center}
  .tienda-navbar-brand img{max-width:100%;height:auto;max-height:38px;width:auto;object-fit:contain}
  .tienda-navbar-brand .tienda-nombre-marca{display:none}
}