.home-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 48px;
}

.app-title-row {
  padding-inline: 48px;
}

.theme-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 12px;
  background: #ededed;
  color: #555;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  color: #ededed;
  background: #1b1b1b;
}

html[data-theme="dark"] body {
  background: #1b1b1b;
}

html[data-theme="dark"] .theme-toggle {
  background: #242424;
  color: #aaa;
}

html[data-theme="dark"] main > p,
html[data-theme="dark"] :is(.categories-heading p, .category-card-progress, .count-output-hint, .back-button, .header-back-button, #progress-text, .item-category, .item-area, .field small, .summary-header p, .section-count, .summary-item-main small, .summary-item-value, .summary-arrow, .summary-empty, .section-heading p, .empty-state p, .modal p) {
  color: #aaa;
}

html[data-theme="dark"] nav a,
html[data-theme="dark"] :is(.category-card, .item-card, .stat-card, .accordion, .summary-item-button, .responsible-section, .empty-state, .modal) {
  border-color: #353535;
  background: #242424;
  color: #ededed;
  box-shadow: none;
}

html[data-theme="dark"] nav a .arrow {
  color: #aaa;
}

html[data-theme="dark"] :is(nav a, .category-card, .back-button, .header-back-button):focus-visible {
  outline-color: #aaa;
}

html[data-theme="dark"] :is(.progress-bar-container, .category-progress-bar) {
  background: #383838;
}

html[data-theme="dark"] .item-drawer-trigger {
  border-color: #353535;
  background: #242424;
  color: #ededed;
  box-shadow: none;
}

html[data-theme="dark"] .item-drawer-trigger-icon span {
  background: #ccc;
}

html[data-theme="dark"] .item-drawer-panel {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(65 65 65 / 42%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 23%), inset 0 1px rgb(255 255 255 / 15%);
}

html[data-theme="dark"] .item-drawer-close,
html[data-theme="dark"] .item-drawer-link {
  color: #ededed;
}

html[data-theme="dark"] .item-drawer-search {
  border-color: #666;
  background: rgb(28 28 28 / 45%);
  color: #ededed;
}

html[data-theme="dark"] .item-drawer-search::placeholder,
html[data-theme="dark"] :is(.item-drawer-group-toggle, .item-drawer-state, .item-drawer-empty) {
  color: #bbb;
}

html[data-theme="dark"] .item-drawer-group-toggle::after {
  color: #aaa;
}

html[data-theme="dark"] .item-drawer-link {
  background: rgb(45 45 45 / 30%);
}

html[data-theme="dark"] .item-drawer-link.is-current {
  box-shadow: inset 3px 0 #aaa;
}

html[data-theme="dark"] :is(.field input, .field textarea) {
  border-color: #424242;
  background: #202020;
  color: #ededed;
}

html[data-theme="dark"] :is(.field input, .field textarea)::placeholder {
  color: #999;
}

html[data-theme="dark"] :is(.field input:focus, .field textarea:focus, .item-drawer-search:focus, .item-drawer-trigger:focus-visible, .item-drawer-close:focus-visible, .item-drawer-link:focus-visible) {
  border-color: #aaa;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 13%);
}

html[data-theme="dark"] .button-primary {
  background: #a7a7a7;
  color: #1b1b1b;
}

html[data-theme="dark"] .button-secondary {
  border-color: #444;
  background: #242424;
  color: #ededed;
}

html[data-theme="dark"] .button-ghost {
  color: #c2c2c2;
}

html[data-theme="dark"] .status-pending {
  background: #472929;
  color: #ffc0c0;
}

html[data-theme="dark"] .status-partial {
  background: #453a23;
  color: #ffe0a5;
}

html[data-theme="dark"] .status-counted {
  background: #25402e;
  color: #b9eac5;
}

html[data-theme="dark"] :is(.stat-pending span, .feedback-error) {
  color: #ffb4b4;
}

html[data-theme="dark"] .stat-partial span {
  color: #ffe0a5;
}

html[data-theme="dark"] :is(.stat-counted span, .feedback-success) {
  color: #b9eac5;
}

html[data-theme="dark"] .accordion-content,
html[data-theme="dark"] .summary-item-button {
  border-color: #353535;
}

html[data-theme="dark"] .modal-icon {
  background: #453a23;
  color: #ffe0a5;
}

/* Superficies compartidas: transparencia contenida y texto siempre legible. */
:root {
  --ui-text: #142b4d;
  --ui-muted: #526c8a;
  --ui-border: rgb(94 88 75 / 12%);
  --ui-surface: rgb(255 254 250 / 88%);
  --ui-solid: #fffefa;
  --ui-accent: #00738e;
  --ui-ring: #007f9d;
  --ui-primary: #08c2d2;
  --ui-shadow: 0 8px 24px rgb(50 43 32 / 6%);
  --ui-progress: #07bfd0;
  color: var(--ui-text);
  background: #faf8f3;
}

html[data-theme="dark"] {
  --ui-text: #f0f6f8;
  --ui-muted: #b1c2cb;
  --ui-border: rgb(181 216 226 / 10%);
  --ui-surface: rgb(29 32 34 / 90%);
  --ui-solid: #1d2022;
  --ui-accent: #38d6e5;
  --ui-ring: #66e4ef;
  --ui-primary: #19c7d8;
  --ui-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  --ui-progress: #1bc9d9;
  color: var(--ui-text);
  background: #111315;
}

body,
html[data-theme="dark"] body {
  color: var(--ui-text);
  background: #faf8f3;
}

html[data-theme="dark"] body {
  background: #111315;
}

.home-header,
.app-header {
  position: relative;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-header { margin-bottom: 24px; }
.home-header .theme-toggle { right: 0; }
.app-title-row.has-search { padding-inline: 92px; }

.app-title-row h1 {
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.header-back-button .back-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.home-header h1,
.app-header h1 { color: var(--ui-text); }

main > p,
html[data-theme="dark"] main > p,
html[data-theme="dark"] :is(.categories-heading p, .category-card-progress, .back-button, .header-back-button, #progress-text, .item-category, .item-area, .field small, .summary-header p, .section-count, .summary-item-main small, .summary-item-value, .summary-arrow, .summary-empty, .section-heading p, .empty-state p, .modal p) {
  color: var(--ui-muted);
}

nav a,
.category-card,
.item-card,
.stat-card,
.accordion,
.responsible-section,
.empty-state,
.modal,
.item-drawer-trigger,
html[data-theme="dark"] nav a,
html[data-theme="dark"] :is(.category-card, .item-card, .stat-card, .accordion, .responsible-section, .empty-state, .modal, .item-drawer-trigger) {
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}

nav a,
.category-card,
.stat-card { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }

.category-card-progress,
.section-count { color: var(--ui-muted); }

.category-progress-bar,
.progress-bar-container,
html[data-theme="dark"] :is(.category-progress-bar, .progress-bar-container) {
  background: rgb(91 92 103 / 22%);
}

.progress-bar,
.category-progress-value { background: #218c4a; }

.progress-bar-partial,
.category-progress-partial { background: #e5b52b; }

.field input,
.field textarea,
.item-drawer-search,
html[data-theme="dark"] :is(.field input, .field textarea, .item-drawer-search) {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-solid);
  color: var(--ui-text);
}

.item-drawer-search,
html[data-theme="dark"] .item-drawer-search {
  border: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 24%);
  box-shadow: none;
}

html[data-theme="dark"] .item-drawer-search {
  background: rgb(255 255 255 / 9%);
}

.button-primary,
html[data-theme="dark"] .button-primary {
  background: var(--ui-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 7px 18px rgb(40 40 49 / 14%), inset 0 1px rgb(255 255 255 / 22%);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

html[data-theme="dark"] .button-primary {
  color: #1b1b1b;
  box-shadow: 0 6px 14px rgb(0 0 0 / 15%), inset 0 1px rgb(255 255 255 / 18%);
}

.button-secondary,
html[data-theme="dark"] .button-secondary {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: inset 0 1px rgb(255 255 255 / 38%);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.button-ghost,
html[data-theme="dark"] .button-ghost { color: var(--ui-accent); }

html[data-theme="dark"] .button-secondary {
  box-shadow: inset 0 1px rgb(255 255 255 / 10%);
}

.button-danger {
  border: 1px solid rgb(120 30 25 / 24%);
  background: rgb(180 35 24 / 94%);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.summary-item-button,
html[data-theme="dark"] .summary-item-button {
  border-color: var(--ui-border);
  background: transparent;
  color: var(--ui-text);
}

.accordion-content,
html[data-theme="dark"] .accordion-content { border-color: var(--ui-border); }

.theme-toggle,
html[data-theme="dark"] .theme-toggle {
  background: transparent;
  color: var(--ui-text);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.theme-toggle > svg,
.header-search-button svg {
  display: block;
  width: 24px;
  height: 24px;
}

.theme-toggle svg { overflow: visible; }
.theme-icon-moon { fill: currentColor; }
.theme-icon-sun { display: none; fill: currentColor; }
.theme-icon-sun path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: inline; }

.header-search-button svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .theme-toggle { color: #fff; }

.header-search-button {
  position: absolute;
  top: 50%;
  right: 48px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
}

.header-search-button[hidden] { display: none; }

.responsible-section { padding: 18px 16px; }
.responsible-section .field { margin-top: 0; }

.summary-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.summary-label-icon { font-size: 1.16em; line-height: 1; }
.stat-card .summary-label-icon { display: inline-block; margin-top: 0; }

.accordion summary .summary-label { justify-content: flex-start; }
.stat-card .summary-label { gap: 7px; }


:is(a, button, input, textarea, summary):focus-visible,
html[data-theme="dark"] :is(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 3px;
}

.item-drawer-search:focus,
.item-drawer-search:focus-visible,
html[data-theme="dark"] .item-drawer-search:focus,
html[data-theme="dark"] .item-drawer-search:focus-visible {
  border: 0;
  outline: none;
  background: var(--ui-solid);
  box-shadow: none;
}

@supports (backdrop-filter: blur(10px)) {
  :is(nav a, .category-card, .item-card, .stat-card, .accordion, .responsible-section, .empty-state, .modal) {
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
  }
}

@media (max-width: 600px) {
  .app-header { padding: 10px 0; }
  .category-card { min-height: 120px; }
  .category-card-title { font-size: .92rem; }
  .stat-card span { white-space: normal; line-height: 1.3; }
  .stat-card .summary-label { gap: 5px; font-size: .68rem; }
  .app-title-row.has-search { padding-inline: 88px; }
  .app-title-row.has-search h1 { font-size: clamp(1rem, 3.8vw, 1.14rem); }
  .header-search-button { right: 44px; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --ui-surface: #f9f9fb;
    --ui-primary: #55565e;
  }
  html[data-theme="dark"] {
    --ui-surface: #242424;
    --ui-primary: #c4c4c4;
  }
  :is(nav a, .category-card, .item-card, .stat-card, .accordion, .responsible-section, .empty-state, .modal, .button-primary, .button-secondary, .button-danger) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .button-danger { background: #b42318; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.summary-transition {
  position: fixed;
  z-index: 20;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-solid);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
}

.summary-transition-mark {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: summary-turn .55s linear infinite;
}

@keyframes summary-turn { to { transform: rotate(360deg); } }

/* Servicio: tarjetas de sector y zona con margen y lectura proporcionados. */
.scope-view {
  padding-inline: clamp(8px, 2.2vw, 16px);
}

.scope-view .category-grid { gap: 12px; }

.scope-view .scope-card {
  min-height: 104px;
  padding: 16px;
  justify-content: center;
}

.scope-view .category-card-title {
  font-size: clamp(.94rem, 3.4vw, 1.03rem);
  line-height: 1.3;
}

.scope-view-zones .categories-heading h2 { font-size: 1.22rem; }
.scope-view-zones .scope-card { min-height: 124px; justify-content: flex-start; }
.scope-view-zones .category-card-progress { margin-top: auto; }

/* Las tres acciones de conteo comunican su propósito con color mate. */
.count-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.count-actions .button { min-height: 48px; padding: 9px 7px; font-size: clamp(.82rem, 2.5vw, .9rem); }

.count-actions .button-out-of-stock,
.count-actions .button-secondary,
.count-actions .button-primary {
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  box-shadow: 0 6px 16px rgb(30 30 30 / 10%), inset 0 1px rgb(255 255 255 / 24%);
}

.count-actions .button-out-of-stock {
  border: 1px solid rgb(117 42 42 / 25%);
  background: rgb(172 75 75 / 91%);
  color: #fff;
}

.count-actions .button-secondary {
  border: 1px solid rgb(133 98 37 / 22%);
  background: rgb(231 190 103 / 91%);
  color: #35270b;
}

.count-actions .button-primary,
html[data-theme="dark"] .count-actions .button-primary {
  border: 1px solid rgb(33 93 57 / 24%);
  background: rgb(52 115 78 / 93%);
  color: #fff;
}

html[data-theme="dark"] .count-actions .button-out-of-stock {
  background: rgb(166 75 75 / 84%);
}

html[data-theme="dark"] .count-actions .button-secondary {
  background: rgb(210 171 90 / 88%);
  color: #211a0d;
}

html[data-theme="dark"] .count-actions .button-primary {
  background: rgb(57 122 84 / 88%);
}

html[data-theme="dark"] .count-actions .button {
  border-color: rgb(255 255 255 / 9%);
  box-shadow: 0 6px 16px rgb(0 0 0 / 14%), inset 0 1px rgb(255 255 255 / 11%);
}

.status-out-of-stock { background: #e3f5ec; color: #146746; }
html[data-theme="dark"] .status-out-of-stock { background: #21493d; color: #9fe6bf; }
.status-dot-out-of-stock { background: #45a573; }

.feedback-toast {
  --toast-surface: 190 239 226;
  --toast-text: #075b55;
  position: fixed;
  z-index: 70;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  width: min(420px, calc(100vw - 28px));
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 14px 22px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 20px;
  background: rgb(var(--toast-surface) / 78%);
  color: var(--toast-text);
  box-shadow: 0 8px 24px rgb(19 91 111 / 9%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transform-origin: center top;
  animation: feedback-slide-down .42s cubic-bezier(.16, 1, .3, 1) both;
}

html[data-theme="dark"] .feedback-toast {
  --toast-surface: 29 111 100;
  --toast-text: #e7fff9;
  border-color: rgb(224 255 250 / 17%);
  background: rgb(var(--toast-surface) / 82%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 17%);
}

.feedback-toast-advance { --toast-surface: 255 232 171; --toast-text: #71500a; }
.feedback-toast-error { --toast-surface: 255 211 222; --toast-text: #912742; }
html[data-theme="dark"] .feedback-toast-advance { --toast-surface: 126 88 31; --toast-text: #fff7da; }
html[data-theme="dark"] .feedback-toast-error { --toast-surface: 137 55 75; --toast-text: #fff0f3; }
.feedback-toast.is-leaving { animation: feedback-slide-up .32s cubic-bezier(.55, 0, 1, .45) both; }

@keyframes feedback-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes feedback-slide-up {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(.98); }
}

@media (max-width: 380px) {
  .count-actions { grid-template-columns: 1fr; }
  .scope-view { padding-inline: 8px; }
  .scope-view .category-grid { gap: 8px; }
  .scope-view .scope-card { padding: 12px; }
}

@media (prefers-reduced-transparency: reduce) {
  .count-actions .button-out-of-stock { background: #8e3838; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .count-actions .button-secondary { background: #d4a451; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .count-actions .button-primary,
  html[data-theme="dark"] .count-actions .button-primary { background: #34734e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .feedback-toast,
  html[data-theme="dark"] .feedback-toast { background: rgb(var(--toast-surface)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* La navegación queda en la posición original del acceso a ítems. */
.item-navigation-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "previous drawer next";
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.item-navigation-top #previous-item { grid-area: previous; }
.item-navigation-top #open-item-drawer { grid-area: drawer; }
.item-navigation-top #next-item { grid-area: next; }

.item-navigation-top > button,
.item-navigation-top .item-drawer-trigger,
html[data-theme="dark"] .item-navigation-top .item-drawer-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 8px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
  box-shadow: none;
  font-size: clamp(.75rem, 2.6vw, .88rem);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.item-navigation-top > button { overflow-wrap: anywhere; }
.item-navigation-top > button:focus-visible,
html[data-theme="dark"] .item-navigation-top > button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--ui-ring);
  outline-offset: -3px;
}
.item-navigation-top .item-drawer-trigger-label { flex: 0 1 auto; }
.item-navigation-top .item-drawer-trigger-icon { width: 19px; gap: 3px; }
.item-navigation-top .item-drawer-trigger-icon span:nth-child(2) { width: 14px; }

.summary-navigation { display: flex; justify-content: center; }
.summary-navigation .button { width: auto; min-width: 160px; }

@media (max-width: 380px) {
  .item-navigation-top > button,
  .item-navigation-top .item-drawer-trigger { font-size: .74rem; }
}

@media (prefers-reduced-transparency: reduce) {
  .item-navigation-top { background: var(--ui-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* En oscuro, contornos discretos y buscador integrado al panel. */
html[data-theme="dark"] .item-drawer-panel {
  border-color: rgb(255 255 255 / 9%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%), inset 0 1px rgb(255 255 255 / 7%);
}

html[data-theme="dark"] .item-drawer-link.is-current {
  box-shadow: inset 2px 0 rgb(255 255 255 / 35%);
}

html[data-theme="dark"] #item-drawer-search {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: rgb(255 255 255 / 6%);
  box-shadow: none;
}

/* Superficies uniformes: blanco crema en claro y carbón profundo en oscuro. */
:root {
  --ui-track: rgb(60 155 190 / 17%);
  --ui-field: rgb(255 254 250 / 92%);
  --ui-nav: rgb(243 240 233 / 88%);
  --ui-nav-active: rgb(9 186 206 / 14%);
  --ui-drawer: rgb(248 246 240 / 86%);
}

html[data-theme="dark"] {
  --ui-track: rgb(177 207 217 / 15%);
  --ui-field: rgb(18 20 22 / 90%);
  --ui-nav: rgb(29 32 34 / 88%);
  --ui-nav-active: rgb(16 194 215 / 17%);
  --ui-drawer: rgb(26 29 31 / 88%);
}

.home-header { margin-bottom: 18px; }
.home-header h1, .app-header h1 { letter-spacing: -.025em; }
.home-header h1 { font-size: clamp(1.5rem, 5vw, 1.85rem); }
.app { width: min(calc(100% - 28px), 680px); }
.app-header { margin-bottom: 18px; }
.app-header.is-summary { margin-bottom: 8px; padding-bottom: 0; }
.app-header.is-summary .app-title-row { margin-bottom: 0; }
.theme-toggle, html[data-theme="dark"] .theme-toggle,
.header-search-button, .header-back-button {
  color: var(--ui-accent);
}
html[data-theme="dark"] .theme-toggle { color: #f0f6f8; }
:is(.theme-toggle, .header-search-button, .header-back-button) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:is(.theme-toggle, .header-search-button, .header-back-button):focus:not(:focus-visible) {
  outline: none;
}
.theme-toggle > svg { width: 25px; height: 25px; }
.progress-bar-container, .category-progress-bar,
html[data-theme="dark"] :is(.progress-bar-container, .category-progress-bar) {
  background: var(--ui-track);
}
.progress-bar, .category-progress-value { background: var(--ui-progress); }
.progress-bar-partial, .category-progress-partial { background: #e7a52c; }

.area-nav { gap: 10px; }
.area-nav .area-link,
html[data-theme="dark"] .area-nav .area-link {
  --area-accent: #00738e;
  --area-tint: rgb(32 200 218 / 13%);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 82px;
  padding: 11px 15px;
  border-color: transparent;
  border-radius: 17px;
  background: var(--area-tint);
  color: var(--ui-text);
}
.area-nav .area-link:focus-visible { outline-color: var(--area-accent); }
.area-nav .area-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--area-tint);
  color: var(--area-accent);
}
.area-nav .area-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.area-nav .area-name { min-width: 0; overflow-wrap: anywhere; }
.area-nav .arrow { color: var(--area-accent); font-size: 1.6rem; }
html[data-theme="dark"] .area-nav .area-link .arrow { color: var(--area-accent); }
.area-nav .area-cocina { --area-accent: #1689d0; --area-tint: rgb(39 167 230 / 13%); }
.area-nav .area-panaderia { --area-accent: #bf7300; --area-tint: rgb(245 179 57 / 19%); }
.area-nav .area-pasteleria { --area-accent: #d63c65; --area-tint: rgb(242 97 139 / 15%); }
.area-nav .area-servicio { --area-accent: #008d7f; --area-tint: rgb(34 192 167 / 17%); }
html[data-theme="dark"] .area-nav .area-link {
  background: var(--area-tint);
  border-color: rgb(255 255 255 / 7%);
}
html[data-theme="dark"] .area-nav .area-principal { --area-accent: #38d6e5; --area-tint: rgb(9 195 217 / 16%); }
html[data-theme="dark"] .area-nav .area-cocina { --area-accent: #52b5ec; --area-tint: rgb(48 157 218 / 16%); }
html[data-theme="dark"] .area-nav .area-panaderia { --area-accent: #ffc05b; --area-tint: rgb(214 146 40 / 17%); }
html[data-theme="dark"] .area-nav .area-pasteleria { --area-accent: #ff769b; --area-tint: rgb(213 65 108 / 17%); }
html[data-theme="dark"] .area-nav .area-servicio { --area-accent: #48d8bb; --area-tint: rgb(14 170 146 / 17%); }

.category-card, .item-card, .stat-card, .accordion, .responsible-section, .empty-state, .modal,
html[data-theme="dark"] :is(.category-card, .item-card, .stat-card, .accordion, .responsible-section, .empty-state, .modal) {
  border-color: var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.category-card-title, .item-card h2, .summary-header h2 { letter-spacing: -.018em; }
.category-card-progress, #progress-text { font-variant-numeric: tabular-nums; }
.status-pending, html[data-theme="dark"] .status-pending { background: rgb(239 84 103 / 15%); color: #b92646; }
.status-partial, html[data-theme="dark"] .status-partial { background: rgb(239 177 50 / 21%); color: #8b5b00; }
.status-counted, html[data-theme="dark"] .status-counted { background: rgb(16 171 132 / 15%); color: #08765e; }
.status-out-of-stock, html[data-theme="dark"] .status-out-of-stock { background: rgb(16 171 132 / 15%); color: #08765e; }
html[data-theme="dark"] .status-pending { color: #ff9fac; }
html[data-theme="dark"] .status-partial { color: #ffd078; }
html[data-theme="dark"] .status-counted,
html[data-theme="dark"] .status-out-of-stock { color: #6ee3c3; }
.status-dot-pending { background: #ed5269; }
.status-dot-partial { background: #e9a632; }
.status-dot-counted, .status-dot-out-of-stock { background: #0fb99b; }
.item-drawer-link.is-out-of-stock .item-drawer-state,
.summary-item-button.is-out-of-stock .summary-item-value { color: #08765e; }
html[data-theme="dark"] .item-drawer-link.is-out-of-stock .item-drawer-state,
html[data-theme="dark"] #app-content .summary-item-button.is-out-of-stock .summary-item-value { color: #6ee3c3; }
.stat-card.stat-pending { background: rgb(255 242 241 / 88%); }
.stat-card.stat-partial { background: rgb(255 247 227 / 88%); }
.stat-card.stat-counted { background: rgb(229 251 246 / 88%); }
html[data-theme="dark"] .stat-card.stat-pending { background: rgb(93 49 58 / 80%); }
html[data-theme="dark"] .stat-card.stat-partial { background: rgb(91 72 46 / 80%); }
html[data-theme="dark"] .stat-card.stat-counted { background: rgb(39 80 75 / 80%); }
.summary-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.summary-overview-ring {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 8px;
  border-radius: 50%;
  position: relative;
}
.summary-overview-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.summary-overview-ring circle { fill: none; stroke: var(--ui-track); stroke-width: 8; }
.summary-overview-ring .summary-ring-value { stroke: var(--ui-progress); }
.summary-overview-ring span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ui-solid);
  color: var(--ui-accent);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.summary-overview-copy { display: grid; flex: 1; min-width: 0; gap: 5px; }
.summary-overview-copy strong { font-size: .95rem; }
.summary-overview-copy > span:not(.summary-overview-track) { color: var(--ui-muted); font-size: .76rem; }
.summary-overview-track { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: var(--ui-track); }
.summary-overview-track span { display: block; height: 100%; border-radius: inherit; background: var(--ui-progress); }
.stat-pending span, html[data-theme="dark"] .stat-pending span { color: #bd344e; }
.stat-partial span, html[data-theme="dark"] .stat-partial span { color: #8e6107; }
.stat-counted span, html[data-theme="dark"] .stat-counted span { color: #087b63; }
html[data-theme="dark"] .stat-pending span { color: #ff9fac; }
html[data-theme="dark"] .stat-partial span { color: #ffd078; }
html[data-theme="dark"] .stat-counted span { color: #6ee3c3; }

.field input, .field textarea,
html[data-theme="dark"] :is(.field input, .field textarea) {
  border-color: var(--ui-border);
  background: var(--ui-field);
  color: var(--ui-text);
}
.field input:focus, .field textarea:focus,
html[data-theme="dark"] :is(.field input:focus, .field textarea:focus) {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-nav-active);
}
.item-navigation-top, html[data-theme="dark"] .item-navigation-top {
  border-color: var(--ui-border);
  background: var(--ui-nav);
  box-shadow: var(--ui-shadow);
}
.item-navigation-top .item-drawer-trigger { color: var(--ui-text); }
.item-navigation-top #next-item { color: var(--ui-accent); }
.item-navigation-top #previous-item:not(:disabled) { color: var(--ui-accent); }
.item-drawer-panel, html[data-theme="dark"] .item-drawer-panel {
  border-color: var(--ui-border);
  background: var(--ui-drawer);
  box-shadow: 0 12px 35px rgb(20 61 80 / 15%);
}
html[data-theme="dark"] .item-drawer-panel { box-shadow: 0 12px 35px rgb(0 0 0 / 25%); }
.item-drawer-link, html[data-theme="dark"] .item-drawer-link { background: rgb(255 255 255 / 24%); }
html[data-theme="dark"] .item-drawer-link { background: rgb(255 255 255 / 5%); }
.item-drawer-link.is-current, html[data-theme="dark"] .item-drawer-link.is-current {
  border-color: var(--ui-accent);
  background: var(--ui-nav-active);
  box-shadow: inset 2px 0 var(--ui-accent);
}
.item-drawer-search, html[data-theme="dark"] #item-drawer-search { background: rgb(255 255 255 / 30%); }
html[data-theme="dark"] #item-drawer-search { background: rgb(255 255 255 / 6%); }
.item-drawer-search:focus, .item-drawer-search:focus-visible,
html[data-theme="dark"] #item-drawer-search:focus { background: var(--ui-field); }

.button-primary, html[data-theme="dark"] .button-primary {
  background: var(--ui-primary);
  color: #052f3a;
  box-shadow: 0 7px 18px rgb(0 152 174 / 15%), inset 0 1px rgb(255 255 255 / 26%);
}
.button-secondary, html[data-theme="dark"] .button-secondary {
  background: var(--ui-nav);
  color: var(--ui-text);
}
.button-ghost, html[data-theme="dark"] .button-ghost { color: var(--ui-accent); }
.button-danger { background: #d53e59; border: 0; color: #fff; }
.count-actions .button-out-of-stock,
html[data-theme="dark"] .count-actions .button-out-of-stock { background: #d53e59; color: #fff; }
.count-actions .button-secondary,
html[data-theme="dark"] .count-actions .button-secondary { background: #f7c76c; color: #513400; }
.count-actions .button-primary,
html[data-theme="dark"] .count-actions .button-primary { background: #20c1aa; color: #052f3a; }
.modal-backdrop { background: rgb(11 29 41 / 52%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-icon, html[data-theme="dark"] .modal-icon { background: rgb(245 175 47 / 17%); color: #e99a00; }
.modal-actions .button-secondary { order: 2; }
.modal-actions .button-danger { order: 1; }

@media (max-width: 600px) {
  .app { width: calc(100% - 28px); }
  .area-nav .area-link { min-height: 76px; }
  .category-card { min-height: 116px; }
  .item-card { padding: 17px; }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --ui-surface: #fffefa; --ui-nav: #f3f0e9; --ui-primary: #07bfd0; }
  html[data-theme="dark"] { --ui-surface: #1d2022; --ui-nav: #1d2022; --ui-primary: #19c7d8; }
  .area-nav .area-link, html[data-theme="dark"] .area-nav .area-link { background: var(--ui-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .stat-card.stat-pending, .stat-card.stat-partial, .stat-card.stat-counted,
  html[data-theme="dark"] :is(.stat-card.stat-pending, .stat-card.stat-partial, .stat-card.stat-counted) { background: var(--ui-solid); }
  .item-drawer-panel, html[data-theme="dark"] .item-drawer-panel { background: var(--ui-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

html[data-theme="dark"] #item-drawer-search:focus,
html[data-theme="dark"] #item-drawer-search:focus-visible {
  border: 0;
  outline: none;
  background: rgb(255 255 255 / 11%);
  box-shadow: none;
}