/* Nautrato 0.5.1 — intrinsic image sizes and responsive layout.
   The approved artwork is unchanged. No background sprites are used for branding
   or product photographs. This file follows the original visual stylesheet. */
:root {
  --header-height: 106px;
  --page-gutter: clamp(12px, 2.2vw, 32px);
  --bottom-space: 0px;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
main, section, article, aside, form, fieldset, .row, .field-grid > *, .detail-grid > *,
.account-grid > *, .admin-content, .admin-split > *, .setting-row > div { min-width: 0; }
img { max-inline-size: 100%; }
a, p, dd, h1, h2, h3, .notice, .form-error, .product-title, .setting-row strong, td {
  overflow-wrap: anywhere;
}
.site-header {
  height: var(--header-height);
  padding-inline: var(--page-gutter);
  gap: clamp(10px, 1.7vw, 24px);
}
.brand {
  display: block;
  width: clamp(230px, 28vw, 390px);
  max-width: none;
  flex: 0 1 390px;
  min-width: 0;
  overflow: visible;
}
.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 128;
  object-fit: contain;
}
.header-actions { flex: 0 0 auto; }
.header-user span:last-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.page-header > div, .admin-top > div { min-width: 0; }
.desktop-nav { flex: 0 0 auto; gap: clamp(18px, 2vw, 30px); }
.mobile-menu { top: var(--header-height); max-height: calc(100dvh - var(--header-height) - 80px); overflow-y: auto; }

/* A full-width photograph supplies its own height at every breakpoint. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  padding: 0;
  isolation: isolate;
  background: linear-gradient(#d6f2fc, #f3f8fd);
}
.hero-photo {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  background: none;
  overflow: visible;
}
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}
.hero-content {
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  max-width: 1540px;
  padding: 0 var(--page-gutter) clamp(50px, 5vw, 92px);
  margin-inline: auto;
}
.search-bar { max-width: 1110px; width: 100%; min-width: 0; }
.search-bar input { width: 0; min-width: 0; flex: 1 1 0; font-size: 17px; }
.search-bar:focus-within { outline: 3px solid #80c9f4; outline-offset: 3px; }
.search-mode { flex: 0 0 auto; }
.search-mode select { min-height: 44px; max-width: 145px; }
.quick-filters { flex-wrap: wrap; gap: 10px; margin-right: 0; padding-right: 0; overflow: visible; }
.quick-filters .more-filter { position: static; order: 0; }
.filter-pill { min-height: 44px; }
.category-ribbon {
  grid-area: 2 / 1;
  position: relative;
  inset: auto;
  width: calc(100% - var(--page-gutter) * 2);
  max-width: 1536px;
  margin: -24px auto 0;
  min-height: 96px;
}
.catalog-container { padding-top: 26px; }

/* Contain keeps both portrait and landscape photos complete and undistorted. */
.product-card > a { display: block; }
.product-photo {
  height: auto;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5fb;
}
.product-photo img, .detail-photo img, .upload-thumb img, .detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.product-photo .photo-placeholder { width: 100%; }
.product-info { min-width: 0; }
.product-title {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.4;
  height: auto;
  min-height: 2.8em;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-bottom { flex-wrap: wrap; align-items: baseline; gap: 9px; }
.product-location { max-width: 100%; white-space: normal; }
.product-meta, .product-reference { line-height: 1.5; }
.heart-button { width: 44px; height: 44px; right: 9px; top: 9px; }
.card-badge { max-width: calc(100% - 62px); }
.card-demo { max-width: calc(100% - 12px); left: 6px; font-size: 10px; }
.active-filter { max-width: 100%; min-height: 40px; overflow-wrap: anywhere; text-align: left; }
.active-filter .icon { flex-shrink: 0; }
.results-heading { flex-wrap: wrap; }
.results-actions { flex-wrap: wrap; margin-left: auto; }
.sort-label { display: block; }
.sort-label select { min-height: 44px; max-width: 190px; }
.small-chip { min-height: 44px; }
.pagination { flex-wrap: wrap; }

.detail-grid { grid-template-areas: 'media summary' 'information summary'; align-items: start; row-gap: 22px; }
.detail-media { grid-area: media; min-width: 0; }
.detail-summary { grid-area: summary; align-self: start; }
.detail-information { grid-area: information; min-width: 0; }
.detail-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  background: #edf5fb;
}
.photo-open { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.detail-photo-nav { position: absolute; inset: 0; pointer-events: none; }
.detail-photo-nav button { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; background: #fffffff0; box-shadow: 0 2px 8px #092d461a; display: inline-flex; align-items: center; justify-content: center; }
.detail-photo-nav button:first-child { left: 10px; }
.detail-photo-nav button:last-child { right: 10px; }
.photo-counter { position: absolute; bottom: 12px; right: 12px; padding: 4px 9px; border-radius: 16px; color: white; background: #062b4dd9; font-size: 12px; pointer-events: none; }
.photo-hint, .photo-enlarge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; background: #fffffff2; padding: 5px 9px; border-radius: 7px; font-size: 12px; pointer-events: none; }
.photo-enlarge .icon { width: 16px; height: 16px; }
.detail-gallery { flex-wrap: wrap; }
.detail-gallery button { min-width: 56px; min-height: 56px; }
.detail-gallery button.active, .detail-gallery button[aria-pressed=true] { outline: 2px solid var(--blue); outline-offset: 2px; }
.sheet:has(.gallery-viewer) { width: min(1100px, calc(100vw - 24px)); max-height: 94dvh; }
.gallery-viewer { width: 100%; }
.gallery-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: min(220px, 35dvh); background: #edf5fb; border-radius: 12px; overflow: hidden; }
.gallery-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 62dvh; object-fit: contain; }
.gallery-controls, .share-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.gallery-controls .photo-counter { position: static; min-width: 54px; text-align: center; }
.gallery-title { margin-bottom: 12px; font-weight: 700; }
.share-actions .button { min-width: 44px; }
.spec-list { overflow-wrap: anywhere; }
.detail-description { white-space: pre-wrap; overflow-wrap: anywhere; }

label, .field-grid, .field-grid > label { min-width: 0; }
label input:not([type=checkbox]):not([type=radio]), label select, label textarea, .field-input { min-height: 46px; }
.sheet { overscroll-behavior: contain; }
.dialog-heading { flex-shrink: 0; }
.dialog-heading h2 { overflow-wrap: anywhere; }
.dialog-heading .icon-button { flex-shrink: 0; }
.dialog-footer { flex-wrap: wrap; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-actions { flex-wrap: wrap; }
.table-wrap td { max-width: 360px; }
.form-actions > *, .list-row .actions { min-width: 0; }
.bottom-nav { grid-auto-columns: 1fr; grid-auto-flow: column; grid-template-columns: none; }
.bottom-nav a { min-height: 44px; }
.toast { bottom: calc(var(--bottom-space) + 16px); overflow-wrap: anywhere; }
.chat-layout { max-width: 100%; }
.chat-body, .chat-compose, .messages { min-width: 0; }
.chat-compose input { min-width: 0; flex: 1 1 0; }
.message { overflow-wrap: anywhere; }
.device-settings { margin-top: 24px; }
.device-install, .device-push { min-width: 0; }
.device-settings h3 { font-size: 18px; margin-bottom: 10px; }
.device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.device-actions .button { min-height: 44px; flex: 1 1 160px; }
.device-preferences { display: grid; gap: 12px; margin-top: 16px; }
.device-preferences label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.device-preferences input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.installation-steps { margin: 16px 0; padding-left: 24px; line-height: 1.65; }
.installation-steps li + li { margin-top: 8px; }

@media (max-width: 1100px) {
  .hero-content {
    grid-area: 2 / 1;
    padding: 16px var(--page-gutter) 18px;
    background: linear-gradient(#e4f4fc, #f3f8fd);
  }
  .category-ribbon { grid-area: 3 / 1; margin-top: 0; }
  .search-bar { max-width: none; }
  .quick-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 0 0 7px; }
  .filter-pill { flex: 0 0 auto; }
  .quick-filters .more-filter { order: -1; position: sticky; left: 0; z-index: 2; box-shadow: 5px 0 12px #dceef8; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  :root { --header-height: 78px; --bottom-space: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: calc(var(--header-height) + 12px); }
  .site-header { position: sticky; top: 0; height: var(--header-height); }
  .brand { flex: 0 1 300px; width: 300px; }
  .desktop-nav { display: none; }
  .mobile-only { display: inline-flex !important; }
  .header-actions { gap: 8px; }
  .header-user { width: 44px; height: 44px; justify-content: center; }
  .header-user span:last-child { display: none; }
  .publish-header { height: 44px; min-height: 44px; }
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: grid; height: var(--bottom-space); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: white; z-index: 60; border-top: 1px solid var(--line); box-shadow: 0 -3px 15px #163a5710; }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #547189; font-size: 11px; }
  .bottom-nav a.active { color: var(--blue); }
  .bottom-nav .icon { width: 23px; height: 23px; }
  .bottom-publish > span { background: var(--blue); border-radius: 9px; color: white; width: 38px; height: 30px; display: flex; justify-content: center; align-items: center; }
  .site-footer { padding-bottom: calc(var(--bottom-space) + 28px); }
  .admin-sidebar { top: calc(var(--header-height) + 16px); }
}
@media (max-width: 800px) {
  .category-ribbon { display: flex; overflow-x: auto; scrollbar-width: thin; padding: 4px; min-height: 90px; }
  .category-item { flex: 0 0 clamp(92px, 21vw, 132px); min-width: 0; min-height: 80px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-mode { display: flex; }
  .search-mode select { max-width: 137px; }
  .sort-label { display: block; }
  .results-heading { gap: 12px; }
  .results-actions { justify-content: space-between; width: 100%; margin-left: 0; }
  .results-actions .text-link { min-height: 44px; font-size: 13px; }
  .results-actions .text-link span:not([data-icon]) { max-width: none; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'media' 'summary' 'information'; }
  .admin-sidebar { position: relative; top: auto; display: block; padding: 8px; overflow: visible; }
  .admin-sidebar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
  .admin-sidebar nav a { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .admin-sidebar h2 { display: none; }
  .sheet { width: calc(100vw - 20px); max-height: 92dvh; }
  .filters-sheet { width: 100%; max-height: 92dvh; }
  .dialog-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  input, select, textarea, label input:not([type=checkbox]):not([type=radio]), label select, label textarea, .field-input { font-size: 16px; }
  .search-bar input { font-size: 16px; }
  .chat-layout { height: min(650px, calc(100dvh - var(--header-height) - var(--bottom-space) - 110px)); max-height: none; min-height: 370px; }
  .chat-body { min-height: 0; }
  .chat-compose input { font-size: 16px; }
}
@media (max-width: 600px) {
  :root { --header-height: 72px; --page-gutter: 12px; }
  .site-header { gap: 8px; }
  .brand { width: auto; flex: 1 1 auto; max-width: 300px; }
  .header-actions { gap: 4px; }
  .header-user, .header-actions .icon-button { width: 44px; height: 44px; }
  .publish-header { display: none; }
  .hero-content { padding-top: 13px; padding-bottom: 12px; }
  .search-bar { height: auto; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 46px; padding: 5px; gap: 0 5px; border-radius: 15px; }
  .search-leading { display: none; }
  .search-bar input { grid-column: 1; grid-row: 1; width: 100%; min-height: 46px; padding: 0 8px; }
  .search-submit { grid-column: 2; grid-row: 1; height: 46px; width: 46px; padding: 9px; border-radius: 11px; }
  .search-submit > span:last-child { display: none; }
  .search-mode { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; border-top: 1px solid #e4edf4; padding-top: 3px; margin-top: 3px; }
  .search-mode::before { content: 'Buscar por'; color: #5b758d; font-size: 12px; padding-left: 8px; flex: 0 0 auto; }
  .search-mode select { width: auto; flex: 1; max-width: none; min-height: 40px; font-size: 14px; border: 0; padding: 6px 8px; }
  .quick-filters { margin-top: 10px; gap: 8px; padding-bottom: 6px; }
  .filter-pill { min-height: 44px; font-size: 12px; padding: 8px 12px; }
  .category-ribbon { width: calc(100% - 20px); min-height: 84px; border-radius: 17px; }
  .category-item { flex-basis: calc((100vw - 30px) / 4); min-height: 76px; padding: 8px 3px; font-size: 11px; gap: 5px; }
  .category-item .icon { width: 29px; height: 29px; }
  .category-item span { max-width: 100%; overflow-wrap: normal; }
  .catalog-container { padding: 20px 12px 25px; }
  .beta-note { font-size: 10px; align-items: flex-start; gap: 7px; }
  .status-dot { margin-top: 5px; flex: 0 0 auto; }
  .results-heading h2 { font-size: clamp(20px, 5.5vw, 25px); }
  .results-actions { gap: 8px; }
  .sort-label select { font-size: 13px; max-width: 176px; }
  .search-status { font-size: 12px; margin-top: 5px; }
  .product-grid { gap: 12px; }
  .product-photo { border-width: 4px; }
  .product-title { font-size: 14px; min-height: 2.8em; }
  .product-info { padding: 10px 11px 13px; }
  .product-meta { font-size: 11px; }
  .product-reference { font-size: 10px; }
  .price { font-size: clamp(21px, 5.6vw, 27px); }
  .product-location { font-size: 11px; }
  .card-badge { font-size: 10px; padding: 4px 7px; top: 8px; }
  .card-demo { font-size: 8px; bottom: 5px; padding: 2px 4px; }
  .heart-button { width: 44px; height: 44px; right: 4px; top: 4px; background: #fffffff0; }
  .heart-button .icon { width: 22px; height: 22px; }
  .filters-sheet .field-grid { grid-template-columns: minmax(0, 1fr); }
  .filters-sheet label { font-size: 13px; }
  .field-grid, .field-grid.three { grid-template-columns: minmax(0, 1fr); }
  .field-grid.two-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-actions .button { flex: 1 1 140px; }
  .sheet .dialog-heading h2 { font-size: 21px; }
  .dialog-heading { padding: 16px; gap: 10px; }
  .dialog-body { padding: 17px; }
  .dialog-footer { gap: 10px; padding-inline: 17px; }
  .dialog-footer .button { flex: 1; }
  .detail-gallery { gap: 8px; }
  .detail-summary { position: static; }
  .spec-list { grid-template-columns: minmax(0, 1fr); }
  .detail-summary .detail-actions { flex-wrap: wrap; }
  .photo-counter { bottom: 10px; right: 10px; }
  .gallery-image { max-height: 58dvh; }
  .setting-row { align-items: flex-start; }
  .setting-row .toggle { margin-top: 4px; flex-shrink: 0; }
  .table-wrap td, .table-wrap th { padding: 11px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .chat-threads { max-height: 100px; overflow: auto; flex-shrink: 0; }
  .chat-thread { min-width: 180px; }
  .chat-compose .button { min-width: 46px; }
}
@media (max-width: 359px) {
  .brand { max-width: calc(100% - 100px); }
  .category-item { flex-basis: 84px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-title { min-height: 0; font-size: 16px; }
  .product-meta { font-size: 12px; }
  .product-reference { font-size: 11px; }
  .product-location { font-size: 12px; }
  .card-demo { font-size: 10px; }
  .results-actions { align-items: stretch; }
  .results-actions > * { flex: 1 1 100%; }
  .sort-label select { width: 100%; max-width: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .sheet, .filters-sheet { max-height: 96dvh; }
  .gallery-image { max-height: 50dvh; }
  .chat-layout { min-height: 300px; height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  .hero-photo { background: #d6f2fc; }
  .hero-image { width: auto; max-width: 100%; max-height: 35dvh; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Preserve usable controls around camera cutouts in standalone landscape mode. */
@supports (padding: max(0px, 1px)) {
  .site-header, .hero-content, .catalog-container {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
  }
  .page-container, .admin-layout {
    padding-left: max(14px, var(--page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(14px, var(--page-gutter), env(safe-area-inset-right, 0px));
  }
  .bottom-nav {
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
  }
}

/* 0.6.1 — aviso de instalación de la app y opción de mostrar contraseña */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bottom-space, 0px) + 12px); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: #062b4d; color: #fff; border-radius: 16px; box-shadow: 0 10px 34px #031b3655; max-width: 560px; margin: 0 auto; }
.install-banner-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.35; }
.install-banner-text strong { font-size: 15px; }
.install-banner-text span { color: #cfe3f3; }
.install-banner .button { white-space: nowrap; }
.install-banner .icon-button { color: #fff; flex: none; }
.reveal-password { margin: -8px 0 14px; font-weight: 500; color: #33536e; cursor: pointer; }
#auth-form .reveal-password { margin: -8px 0 14px; }