:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #efc18a;
  background: #321404 url('./assets/nogal_textura_aprobada.jpg') repeat;
  background-size: 418px 418px;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.mobile {
  max-width: 600px;
  min-height: 100dvh;
  margin-inline: auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) calc(80px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
  container-type: inline-size;
}
img { display: block; max-width: 100%; height: auto; }
.common-header { position: relative; margin: 0 3px; aspect-ratio: 5; }
.header-panel { width: 100%; }
.sprite-button { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; display: grid; place-items: center; touch-action: manipulation; }
.sprite-button:focus-visible, input:focus-visible { outline: 2px solid #87fff2; outline-offset: 2px; }
.common-header .sprite-button { position: absolute; top: 50%; transform: translateY(-50%); width: 12%; min-height: 44px; }
.sync-button { left: 12.3%; }
.sync-button img { width: 78%; }
.settings-button { right: 3.5%; }
.settings-button img { width: 82%; }
.sync-light { position: absolute; left: 24.5%; top: 37%; width: 5.2%; }
.crt { position: absolute; left: 35%; top: 17%; width: 30%; height: 66%; display: grid; place-items: center; text-align: center; color: #88f7ed; overflow: hidden; }
#crt-home { display: grid; gap: 2px; }
#crt-home strong { font-size: clamp(13px, 3.55cqw, 21px); line-height: 1.15; }
#crt-home > span { font: clamp(15px, 4.1cqw, 24px)/1.1 Georgia, 'Times New Roman', serif; }
#crt-message { font-size: clamp(10px, 2.8cqw, 16px); line-height: 1.15; overflow-wrap: anywhere; }
.meter { position: absolute; left: 72.1%; top: 18%; width: 11.8%; }
.meter img { width: 100%; }
.needle { position: absolute; inset: 0; transform-origin: 49.7137% 54.0797%; transform: rotate(-52deg); transition: transform 260ms ease-out; }
.search-band { display: block; padding: 5px 5px 0; }
.search-piece { display: block; position: relative; }
.search-piece > img { width: 100%; }
.search-piece input { position: absolute; left: 10.7%; top: 15%; width: 84%; height: 70%; border: 0; padding: 0; border-radius: 0; background: transparent; color: #dccbb6; font-size: clamp(16px, 3.65cqw, 21px); letter-spacing: .025em; }
.search-piece input::placeholder { color: #bdb59e; opacity: 1; }
.search-piece input::-webkit-search-cancel-button { display: none; }
.columns-band { height: clamp(49px, 14cqw, 61px); padding-inline: 8px; display: flex; align-items: center; gap: 0; }
.collection-button { flex: 0 0 48px; min-height: 44px; margin-right: auto; }
.collection-button img { width: clamp(35px, 9.67cqw, 42px); justify-self: start; margin-left: 3px; }
.columns-group { display: flex; align-items: center; gap: clamp(5px, 1.8cqw, 8px); }
#columns-label { font-weight: 700; font-size: clamp(10px, 2.8cqw, 11px); white-space: nowrap; }
.column-buttons { display: flex; align-items: center; }
.column-button { position: relative; width: clamp(37px, 10.4cqw, 45px); height: 44px; flex-shrink: 0; }
.column-button img { width: clamp(34px, 9.4cqw, 41px); }
.column-button > span { position: absolute; font-size: clamp(19px, 5.1cqw, 23px); line-height: 1; font-weight: 700; }
.column-button[aria-pressed='true'] { color: #9bfff2; }
.separator { width: 1px; height: 25px; background: #99501e; margin-inline: clamp(11.3px, 2.65cqw, 12px); flex-shrink: 0; }
.filters-button { flex: 0 0 44px; height: 44px; }
.filters-button img { width: clamp(35px, 9.8cqw, 42px); }
.collection-strip { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; background: #1c0701; border-top: 1px solid #7e3f12; }
.collection-strip h1 { margin: 0; font-size: clamp(11px, 2.8cqw, 14px); letter-spacing: .025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#item-count { flex-shrink: 0; font-size: clamp(9px, 2.15cqw, 11px); color: #bd8f58; }
.gallery { --columns: 4; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 4px; padding: 3px 5px 5px; align-items: start; }
.gallery figure { margin: 0; min-width: 0; display: grid; place-items: center; }
.gallery img { width: 100%; height: auto; object-fit: contain; }
.no-photo { width: 100%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; overflow-wrap: anywhere; font-size: 12px; padding: 4px; }
.empty-message { padding: 12px; margin: 0; line-height: 1.5; }
.add-article-button {
  position: fixed;
  right: calc(max(12px, (100vw - 600px) / 2 + 12px) + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  padding: 4px;
  z-index: 20;
}
.add-article-button img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* System forms: no unapproved sprites, panels, decorative frames or themes. */
dialog { color-scheme: light; color: CanvasText; background: Canvas; border: revert; max-width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; font: 16px/1.4 system-ui, sans-serif; padding: 18px; }
dialog h2 { margin-top: 0; font-size: 1.2rem; }
dialog label { display: block; margin-block: 12px; }
dialog select, dialog input[type='file'] { max-width: 100%; }
dialog select { display: block; width: 100%; padding: 6px; }
dialog button { min-height: 40px; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#transfer-status { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .needle { transition: none; } }
html[data-motion='reduce'] .needle { transition: none; }
@media (max-width: 359px) {
  .columns-band { padding-inline: 3px; }
  .collection-button, .filters-button { flex-basis: 37px; }
  .collection-button img, .filters-button img { width: 32px; }
  .column-button { width: 34px; }
  .column-button img { width: 31px; }
  .columns-group { gap: 4px; }
  #columns-label { font-size: 9px; }
  .separator { margin-inline: 4px; }
}