/* =====================================================
   MOBILE COMPACT GLOBAL V8
   Solo afecta celulares. No cambia el diseño de PC.
   ===================================================== */
@media (max-width: 820px){
  body{font-size:13px;overflow-x:hidden;background:#0f1728;}
  .app{margin-left:0;min-height:100vh;}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,88vw);height:100vh;z-index:50;transform:translateX(-104%);transition:.22s ease;padding:18px;background:linear-gradient(180deg,#10182a,#0d1527);box-shadow:18px 0 45px rgba(0,0,0,.35);}
  body.menu-open .sidebar{transform:translateX(0);}
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(2,6,23,.62);z-index:40;}
  #menu{gap:5px;padding-right:2px;}
  .nav-btn{padding:10px 12px;border-radius:11px;font-size:14px;}
  .brand{padding:4px 4px 12px;}
  .brand b{font-size:20px}.logo{width:48px;height:48px;font-size:28px}
  .side-footer .btn{height:40px;padding:0 12px;}

  .topbar{height:auto;min-height:66px;padding:10px 16px;gap:10px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;background:#121b30;position:sticky;top:0;z-index:20;}
  .topbar > :nth-child(2){min-width:0;}
  .mobile-menu-btn{display:grid!important;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--input);color:var(--text);font-size:22px;font-weight:900;}
  .topbar h1{font-size:24px;line-height:1.08;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
  .topbar p{font-size:13px;line-height:1.12;margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
  body[data-page="internet"] .topbar p{display:none;}
  body[data-page="internet"] .topbar h1{max-width:220px;}
  .top-actions{gap:8px;justify-self:end;flex-wrap:nowrap;}
  .top-actions .btn,.user-pill{height:42px;padding:0 12px;border-radius:14px;display:inline-flex;align-items:center;}
  body[data-page="internet"] .topbar{grid-template-columns:42px minmax(0,1fr) auto;padding-right:12px;}
  body[data-page="internet"] .topbar h1{max-width:none;}
  body[data-page="internet"] .top-actions{gap:6px;}
  body[data-page="internet"] .top-actions .btn,
  body[data-page="internet"] .user-pill{height:40px;padding:0 10px;border-radius:13px;}
  #content{padding:12px 14px 56px;min-height:calc(100vh - 66px);}

  /* Tarjetas resumen en barra horizontal */
  .cards,.inventory-header-grid,.expense-cards,.internet-summary-strip,.compact-strip{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;margin:0 0 10px!important;padding-bottom:4px;scroll-snap-type:x proximity;}
  .cards::-webkit-scrollbar,.inventory-header-grid::-webkit-scrollbar,.expense-cards::-webkit-scrollbar,.internet-summary-strip::-webkit-scrollbar{height:4px;}
  .cards .card,.inventory-header-grid .card,.expense-cards .card,.internet-summary-strip>div{min-width:118px!important;max-width:150px!important;min-height:64px!important;padding:10px 12px!important;border-radius:12px!important;box-shadow:none!important;scroll-snap-align:start;}
  .card small,.internet-summary-strip small{font-size:10px!important;margin-bottom:4px!important;line-height:1.15;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
  .card strong,.internet-summary-strip b{font-size:17px!important;line-height:1.1;}
  .delta{font-size:11px!important;margin-top:4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* Paneles y buscadores compactos */
  .panel{border-radius:14px;box-shadow:none;margin-bottom:12px;}
  .panel-head{padding:12px 14px!important;gap:9px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .panel-head h2{font-size:22px!important;line-height:1.08;margin:0;}
  .panel-subtitle{font-size:13px;line-height:1.16;margin-top:3px;}
  .tools{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;}
  .tools .search,.search{min-width:0!important;width:100%!important;height:42px!important;padding:0 12px!important;border-radius:12px!important;}
  .tools .btn,.compact-add{height:42px!important;min-width:92px!important;padding:0 12px!important;border-radius:12px!important;white-space:nowrap;}
  .crud-panel .panel-head .tools{display:grid!important;grid-template-columns:1fr 108px!important;}
  .crud-panel .panel-head .btn{width:100%;}
  .inventory-toolbar{min-width:0!important;width:100%!important;}
  .inventory-toolbar-row{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:8px!important;width:100%!important;}
  .inventory-toolbar-row .search{width:100%!important;}
  .inventory-summary{display:none;grid-template-columns:1fr 1fr;}
  .inventory-summary.show{display:grid;}
  .inventory-summary-toggle{display:inline-flex;}

  /* Tabs siempre en fila con scroll */
  .tabs{flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;margin-bottom:10px!important;padding-bottom:3px;}
  .tab{height:42px!important;padding:0 14px!important;border-radius:12px!important;white-space:nowrap!important;flex:0 0 auto!important;font-size:14px!important;}

  /* Tablas compactas */
  .table-wrap{overflow:auto;max-width:100%;}
  th,td{padding:8px 9px!important;font-size:12px!important;line-height:1.15!important;}
  th{font-size:10px!important;letter-spacing:.02em;}
  .badge{padding:5px 7px!important;font-size:11px!important;}
  .actions,.table-icon-actions,.tiny-actions,.compact-row-actions{display:flex!important;gap:4px!important;white-space:nowrap;}
  .actions .btn{height:28px!important;padding:0 8px!important;border-radius:8px!important;font-size:11px!important;}
  .mini-icon,.tiny-actions button{width:26px!important;height:26px!important;border-radius:7px!important;font-size:12px!important;padding:0!important;}

  /* Estado vacío más pequeño */
  .compact-empty,.empty-state{min-height:120px!important;padding:26px 14px!important;border-radius:14px!important;}
  .compact-empty b,.empty-state h3{font-size:20px!important;margin:0 0 6px!important;}
  .compact-empty span,.empty-state p{font-size:13px!important;line-height:1.25!important;}

  /* Formularios modal compactos */
  .modal{padding:0!important;place-items:stretch!important;background:#121b30!important;z-index:90!important;}
  .modal-card{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative;}
  .modal-head{height:60px!important;min-height:60px!important;padding:0 16px!important;position:sticky;top:0;z-index:4;background:var(--panel);}
  .modal-head h2{font-size:21px!important;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
  .icon-btn{font-size:28px!important;width:38px;height:38px;}
  .form-grid{display:block!important;overflow:auto!important;padding:12px 16px 84px!important;}
  .form-grid label{gap:5px!important;margin-bottom:10px!important;font-size:13px!important;line-height:1.1;color:var(--muted);font-weight:900;}
  input,select,textarea{min-height:40px!important;padding:9px 12px!important;border-radius:11px!important;font-size:14px!important;}
  textarea{min-height:78px!important;}
  .two-field-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .compact-section{border:1px solid var(--line);border-radius:12px;padding:0;margin:8px 0;background:rgba(255,255,255,.02);}
  .compact-section summary{padding:12px 12px;font-weight:900;cursor:pointer;list-style:none;}
  .compact-section summary::after{content:'+';float:right;color:var(--primary2);}
  .compact-section[open] summary::after{content:'−';}
  .compact-section label,.compact-section .two-field-row{margin:0 10px 10px!important;}
  .form-actions{position:sticky!important;bottom:0!important;background:linear-gradient(180deg,rgba(18,27,48,.92),var(--panel));border-top:1px solid var(--line)!important;padding:10px 16px!important;margin:0 -16px -84px!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;z-index:5;}
  .form-actions .btn{height:42px!important;padding:0 14px!important;border-radius:12px!important;}
  .mobile-compact-form{padding-bottom:16px!important;}
  .mobile-compact-form label{min-width:0;}
  .mobile-compact-form .two-field-row{grid-template-columns:1fr!important;}
  .mobile-compact-form select,.mobile-compact-form input,.mobile-compact-form textarea{max-width:100%;}
  .mobile-compact-form .sticky-actions{position:static!important;bottom:auto!important;left:auto!important;right:auto!important;margin:12px 0 0!important;padding:0 0 calc(10px + env(safe-area-inset-bottom,0px))!important;box-shadow:none!important;background:transparent!important;}
  .media-preview span{color:var(--muted);font-weight:800;text-align:center;}

  /* Inventario visual compacto */
  .admin-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:10px!important;}
  .admin-product-card{min-height:0!important;padding:9px!important;border-radius:14px!important;}
  .product-img-wrap{height:72px!important;margin:6px 0 7px!important;}
  .product-img-wrap img{max-height:70px!important;}
  .product-brand{font-size:10px!important;letter-spacing:3px!important;}
  .product-sku{font-size:10px!important;margin-top:4px!important;}
  .admin-product-card h3{font-size:11px!important;line-height:1.12!important;min-height:24px!important;margin:3px 0!important;}
  .product-mode{font-size:9px!important;padding:4px 7px!important;margin:1px 0 4px!important;}
  .sale-price{font-size:15px!important;}
  .product-stock,.product-details,.product-notes,.price-lines{font-size:10px!important;}
  .product-notes{max-height:22px!important;}
  .product-actions{gap:5px!important;padding-top:4px!important;}
  .product-actions .btn{height:30px!important;padding:0 8px!important;font-size:11px!important;border-radius:10px!important;}
  .media-field-body{grid-template-columns:1fr!important;}
  .media-preview{min-height:120px!important;}

  /* Reportes y mini listas */
  .report-grid{display:block!important;}
  .mini-row{padding:8px 0!important;font-size:12px!important;}
  .wa-admin-page{gap:12px!important;}
  .wa-hero-card{padding:12px!important;gap:10px!important;}
  .wa-hero-top{display:block!important;}
  .wa-hero-top h2{font-size:24px!important;}
  .wa-status-pill{margin-top:10px!important;}
  .wa-hero-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .wa-hero-stat{padding:10px!important;border-radius:13px!important;}
  .wa-action-bar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .wa-action-bar .btn{height:40px!important;padding:0 10px!important;}
  .wa-grid-2{grid-template-columns:1fr!important;gap:12px!important;}
  .wa-qr-body{padding:12px!important;min-height:220px!important;}
  .wa-qr-box{width:min(260px,100%)!important;padding:10px!important;border-radius:15px!important;}
  .wa-test-box{padding:12px!important;grid-template-columns:1fr!important;}
  .wa-test-box .btn{width:100%!important;}
  .wa-test-output{margin:0 12px 12px!important;min-height:70px!important;font-size:12px!important;}
  .wa-toggle-row{padding:0 12px 12px!important;align-items:flex-start!important;}
  .wa-command-grid{padding:12px!important;grid-template-columns:1fr!important;gap:10px!important;}
  .wa-command-card{padding:12px!important;border-radius:14px!important;}
  .wa-reminder-list{padding:12px!important;grid-template-columns:1fr!important;gap:10px!important;}
  .wa-reminder-card{padding:12px!important;border-radius:14px!important;}
  .wa-reminder-grid{grid-template-columns:1fr!important;}
}

@media (min-width: 821px){
  .mobile-menu-btn{display:none!important;}
}