/*
 * TINTIN — Capa global de adaptación fluida
 * Regla transversal: ningún contenido debe salir del viewport, superponerse,
 * desaparecer ni depender de un tamaño fijo. Cuando el espacio disminuye,
 * los componentes envuelven, apilan o usan scroll interno controlado.
 */

html,
body {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body {
  overflow-x: clip;
}

:where(main, header, footer, section, article, aside, nav, form, fieldset, div) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(h1, h2, h3, h4, h5, h6, p, a, span, strong, em, small, label, li, dt, dd, td, th, button) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(img, picture, video, canvas, svg, iframe, object, embed) {
  max-inline-size: 100%;
}

:where(input, select, textarea, button) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.container, .tt-container, .section, .section-sm, .tt-section, .adm-content, .adm-main, .ck-wrap, .perfil-wrap, .login-form-side) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.adm-table-wrap, .tt-table-wrap, .table-responsive, [class*="table-wrap"]) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.tt-cart-drawer, .tt-mobile-menu, .tt-search-panel, .tt-collections-sheet, .tt-account-panel, .adm-sidebar) {
  max-inline-size: 100vw;
  max-block-size: 100dvh;
}

:where(dialog, .adm-modal-content, .modal-content, .tt-modal-content, .ck-modal-content, [role="dialog"] > :first-child) {
  max-inline-size: calc(100vw - 24px);
  max-block-size: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

:where(.adm-filter-row, .adm-card-head, .adm-bulk-toolbar, .adm-statistics-toolbar, .adm-diagnostic-toolbar, .adm-topbar, .cont-section-actions, .correos-tabs, .ship-tabs, .user-tabs, .ck-actions, .perfil-actions, .tt-actions, .tt-button-row, .tt-filter-row) > * {
  min-inline-size: 0;
}

/* Panel administrativo: encabezados con buscadores y acciones siempre fluidos. */
#section-productos .adm-card-head > div:last-child,
#section-colecciones .adm-card-head > div:last-child {
  min-inline-size: 0;
  max-inline-size: 100%;
}

#prod-search,
#prod-filter-cat,
#coll-search,
#coll-picker-search {
  max-inline-size: 100%;
}

/* Las grillas inline de formularios administrativos bajan a una columna cuando
   el espacio real ya no permite dos campos legibles. */
@media (max-width: 640px) {
  :where(.adm-filter-row, .adm-card-head, .adm-bulk-toolbar, .adm-statistics-toolbar, .adm-diagnostic-toolbar, .adm-topbar, .cont-section-actions, .ck-actions, .perfil-actions, .tt-actions, .tt-button-row, .tt-filter-row) {
    flex-wrap: wrap;
  }

  #section-productos .adm-card-head > div:last-child,
  #section-colecciones .adm-card-head > div:last-child {
    flex: 1 1 100%;
    inline-size: 100%;
    align-items: stretch !important;
  }

  #prod-search,
  #prod-filter-cat,
  #prod-export-all-btn,
  #btn-nuevo-producto,
  #coll-search,
  #btn-nueva-coleccion,
  #coll-picker-search {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  #section-productos [style*="grid-template-columns:1fr 1fr"],
  #section-productos [style*="grid-template-columns: 1fr 1fr"],
  #section-colecciones [style*="grid-template-columns:1fr 1fr"],
  #section-colecciones [style*="grid-template-columns: 1fr 1fr"],
  #section-configuracion [style*="grid-template-columns:1fr 1fr"],
  #section-configuracion [style*="grid-template-columns: 1fr 1fr"],
  #section-correos [style*="grid-template-columns:1fr 1fr"],
  #section-correos [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #coll-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .adm-card-head > :where(div, button, a),
  .adm-filter-row > *,
  .adm-bulk-toolbar > * {
    max-inline-size: 100%;
  }
}

@media (max-width: 480px) {
  :where(.adm-btn, .ck-btn, .perfil-btn, .login-google, .login-email-btn, .tt-btn, button:not(.adm-mobile-tab):not(.adm-nav-item)) {
    white-space: normal;
  }

  #ship-panel-delivery > div:first-child,
  #ship-panel-encomienda > div:first-child {
    align-items: stretch !important;
  }

  #ship-panel-delivery > div:first-child > div,
  #ship-panel-encomienda > div:first-child > div {
    flex: 1 1 100% !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }

  #ship-delivery-add,
  #ship-encomienda-add {
    inline-size: 100% !important;
  }

  .adm-header {
    padding-inline: 10px !important;
    gap: 8px;
  }

  .adm-header .adm-logo {
    min-inline-size: 0;
  }

  .adm-header .adm-logo span {
    display: none;
  }

  .adm-header .adm-back-btn {
    padding-inline: 10px;
    text-align: center;
    white-space: normal;
  }

  .adm-toast {
    inline-size: calc(100vw - 24px);
    max-inline-size: calc(100vw - 24px);
    white-space: normal !important;
    text-align: center;
  }
}

@media (max-width: 360px) {
  :root {
    --tt-fit-gutter: 8px;
  }

  .adm-content,
  .adm-main,
  .ck-main,
  .perfil-wrap,
  .login-form-side {
    padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
  }
}