/* FABIAN-STORE — ajustes adaptativos globales. Conserva la identidad visual existente. */
:root { --sr-safe-bottom: env(safe-area-inset-bottom, 0px); }
html { width:100%; min-width:0; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { width:100%; min-width:0; max-width:100%; overflow-x:clip; }
img, video, canvas, svg, iframe { max-width:100%; }
img, video { height:auto; }
input, select, textarea, button { max-width:100%; font:inherit; }
input, select, textarea { min-width:0; }
button, a, input, select, textarea { touch-action:manipulation; }
/* Layouts and cards must shrink rather than push the viewport sideways. */
.container, .wrapper, .page, .page-container, .content, .content-wrap, .main-wrap,
.admin-container, .admin-content, .dashboard, .catalog-container, .category-page,
.cat-page, .checkout-container, .cart-container, .auth-container {
  box-sizing:border-box; max-width:100%; min-width:0;
}
*, *::before, *::after { box-sizing:border-box; }
.grid, .products-grid, .product-grid, .catalog-grid, .stats-grid, .dashboard-grid {
  min-width:0;
}
/* Tables preserve columns and scroll inside their own wrapper on narrow screens. */
.table-responsive, .table-wrap, .table-container, .responsive-table, .overflow-x-auto {
  display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
.table-responsive table, .table-wrap table, .table-container table, .responsive-table table {
  max-width:none;
}
/* Tablet landscape/portrait and small laptops */
@media (max-width: 1024px) {
  .container, .wrapper, .page-container, .content-wrap, .admin-container, .catalog-container {
    width:100%; max-width:100%;
  }
  .sidebar, .admin-sidebar { max-width:100%; }
  .main-wrap, .main-content, .admin-main, .content-area { min-width:0; }
  .filters, .filter-row, .toolbar, .actions-row { flex-wrap:wrap; }
  .filters > *, .filter-row > * { min-width:0; }
}
/* Tablets and iPads */
@media (max-width: 820px) {
  .admin-layout, .admin-shell, .dashboard-layout { min-width:0; }
  .admin-header, .topbar, .page-header { flex-wrap:wrap; gap:10px; }
  .admin-nav { max-width:100%; }
  .main-wrap main, .main-content, .content-area { min-width:0; }
  .products-grid, .product-grid, .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats-grid, .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal, dialog, .drawer { max-width:calc(100vw - 24px); }
}
/* Phones */
@media (max-width: 600px) {
  body { font-size:15px; }
  .container, .wrapper, .page, .page-container, .content, .content-wrap,
  .main-wrap, .admin-container, .admin-content, .catalog-container,
  .checkout-container, .cart-container, .auth-container {
    width:100%; max-width:100%; margin-left:auto; margin-right:auto;
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
  .products-grid, .product-grid, .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stats-grid, .dashboard-grid, .form-grid { grid-template-columns:minmax(0,1fr); }
  .card, .panel, .product-card, .auth-card { min-width:0; max-width:100%; }
  .admin-header, .topbar, .page-header { align-items:stretch; }
  .admin-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; }
  .admin-nav a, .admin-nav button { min-width:0; overflow-wrap:anywhere; }
  .filters, .filter-row, .toolbar, .actions-row { display:flex; flex-wrap:wrap; gap:8px; }
  .filters > *, .filter-row > *, .toolbar > * { flex:1 1 100%; width:100%; }
  .btn, button, input[type="submit"] { min-height:40px; }
  input, select, textarea { width:100%; }
  .table-responsive table, .table-wrap table, .table-container table,
  .responsive-table table, body.admin-layout .table-responsive > table { min-width:700px; }
  .modal, dialog, .drawer { width:calc(100vw - 20px); max-width:calc(100vw - 20px); }
  .modal-body, dialog, .drawer { max-height:calc(100dvh - 24px); overflow:auto; }
  .cart-actions, .checkout-actions { flex-wrap:wrap; }
  .cart-actions > *, .checkout-actions > * { flex:1 1 100%; }
  .footer, footer { padding-bottom:calc(16px + var(--sr-safe-bottom)); }
}
@media (max-width: 380px) {
  .products-grid, .product-grid, .catalog-grid { grid-template-columns:minmax(0,1fr); }
  .admin-nav { grid-template-columns:minmax(0,1fr); }
  h1 { font-size:clamp(1.35rem, 7vw, 1.8rem); }
}
/* Wide monitors: use available space without changing the brand styling. */
@media (min-width: 1440px) {
  .container, .wrapper, .page-container, .catalog-container { margin-left:auto; margin-right:auto; }
}


/* Corrección prioritaria del panel admin: evita que el contenido colapse en una columna estrecha.
   Se mantiene el menú oscuro y la paleta original de FABIAN-STORE. */
body.admin-layout {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden;
}
body.admin-layout > .admin-header {
  position:fixed !important;
  inset:0 auto 0 0 !important;
  width:248px !important;
  max-width:248px !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body.admin-layout > .main-wrap {
  display:block !important;
  position:relative !important;
  width:calc(100% - 248px) !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 0 0 248px !important;
  padding:0 !important;
}
body.admin-layout > .main-wrap > .topbar,
body.admin-layout > .main-wrap > main {
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
body.admin-layout > .main-wrap > main {
  margin:0 auto !important;
  padding:24px clamp(16px, 2.2vw, 32px) 36px !important;
}
body.admin-layout .hero,
body.admin-layout .dashboard-stats,
body.admin-layout .grid,
body.admin-layout .card,
body.admin-layout section {
  min-width:0;
  max-width:100%;
}
body.admin-layout .hero {
  width:100%;
  overflow-wrap:anywhere;
}
body.admin-layout .dashboard-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body.admin-layout .grid {
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
body.admin-layout table { max-width:100%; }

/* Tablets e iPad: navegación arriba y contenido a todo el ancho. */
@media (max-width: 1024px) {
  body.admin-layout > .admin-header {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.admin-layout > .main-wrap {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  body.admin-layout > .main-wrap > main {
    padding:20px clamp(14px, 3vw, 28px) 32px !important;
  }
  body.admin-layout .admin-nav {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    overflow:visible !important;
  }
  body.admin-layout .dashboard-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Celulares: controles apilados, navegación compacta y tablas desplazables. */
@media (max-width: 600px) {
  body.admin-layout > .main-wrap > main {
    padding:14px 12px 26px !important;
  }
  body.admin-layout .admin-nav {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.admin-layout .dashboard-stats {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  body.admin-layout .topbar {
    padding:16px 14px 12px !important;
  }
  body.admin-layout .hero { padding:20px !important; }
  body.admin-layout .card { padding:16px; }
  body.admin-layout .table-responsive,
  body.admin-layout .table-wrap,
  body.admin-layout .table-container {
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
  }
  body.admin-layout .table-responsive table,
  body.admin-layout .table-wrap table,
  body.admin-layout .table-container table {
    min-width:700px;
  }
}