/* Tipografías; responsive; safe-area; paleta «arena y hierba» (:root) */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  color-scheme: light;
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}

.touch-target {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

:root {
  --dg-page: #fafaf9;
  --dg-text: #1c1917;
  --dg-text-muted: #57534e;
  --dg-text-subtle: #78716c;
  --dg-header-bg: rgba(255, 255, 255, 0.92);
  --dg-header-border: rgba(231, 229, 228, 0.85);
  --dg-brand: #065f46;
  --dg-heading: #1c1917;
  --dg-accent: #c2410c;
  --dg-accent-hover: #9a3412;
  --dg-accent-soft: #c2410c;
  --dg-border: #e7e5e4;
  --dg-border-input: #d6d3d1;
  --dg-divide: #f5f5f4;
  --dg-card-bg: #ffffff;
  --dg-muted-bg: rgba(250, 250, 249, 0.92);
  --dg-empty-inner-bg: rgba(250, 250, 249, 0.85);
  --dg-hover-ui: rgba(250, 250, 249, 0.88);
  --dg-focus-border: #065f46;
  --dg-focus-ring: rgba(6, 95, 70, 0.28);
  --dg-success-badge-bg: #d1fae5;
  --dg-success-badge-text: #065f46;
  --dg-panel-success-bg: rgba(236, 253, 245, 0.65);
  --dg-panel-success-border: rgba(167, 243, 208, 0.95);
  --dg-copy-row-border: rgba(110, 231, 183, 0.85);
  --dg-copy-row-bg: rgba(236, 253, 245, 0.45);
  --dg-copy-btn-border: #6ee7b7;
  --dg-copy-btn-text: #064e3b;
  --dg-copy-btn-hover: #ecfdf5;
  --dg-aside-bg: rgba(236, 253, 245, 0.82);
  --dg-aside-border: #a7f3d0;
  --dg-warn-bg: rgba(255, 251, 235, 0.95);
  --dg-warn-border: rgba(253, 230, 138, 0.95);
  --dg-warn-text: #78350f;
  --dg-warn-text-strong: #451a03;
  --dg-warn-code-bg: rgba(254, 243, 199, 0.9);
  --dg-warn-caption: #92400e;
  --dg-warn-caption-lg: #78350f;
  --dg-delivery-text: #292524;
  --dg-delivery-muted: #44403c;
  --dg-delivery-sub: #57534e;
  --dg-badge-off-bg: #e7e5e4;
  --dg-badge-off-text: #57534e;
  --dg-btn-disabled-bg: #e7e5e4;
  --dg-btn-disabled-text: #78716c;
  --dg-footer-bg: rgba(255, 255, 255, 0.85);
  --dg-footer-border: #e7e5e4;
  --dg-code-inline: #f5f5f4;
  --dg-code-inline-text: #44403c;
  --dg-primary-ring: rgba(251, 191, 36, 0.55);
  --dg-empty-dashed-border: #fcd34d;
  --dg-empty-dashed-bg: rgba(255, 251, 235, 0.85);
  --dg-empty-dashed-text: #78350f;
}

/* Utilidades de tema (colores) */
.dg-page {
  background-color: var(--dg-page);
  color: var(--dg-text);
}

.dg-header {
  border-bottom: 1px solid var(--dg-header-border);
  background-color: var(--dg-header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dg-brand {
  color: var(--dg-brand);
}

.dg-heading {
  color: var(--dg-heading);
}

.dg-text-muted {
  color: var(--dg-text-muted);
}

.dg-text-subtle {
  color: var(--dg-text-subtle);
}

.dg-accent-text {
  color: var(--dg-accent);
}

.dg-border {
  border-color: var(--dg-border);
}

.dg-border-t {
  border-top-color: var(--dg-border);
}

.dg-border-b {
  border-bottom-color: var(--dg-border);
}

.dg-border-dashed {
  border-color: var(--dg-border-input);
}

.dg-card-bg {
  background-color: var(--dg-card-bg);
}

.dg-muted-bg {
  background-color: var(--dg-muted-bg);
}

.dg-empty-cart {
  border-color: var(--dg-border-input);
  background-color: var(--dg-empty-inner-bg);
  color: var(--dg-text-subtle);
}

.dg-cart-lines > li + li {
  border-top: 1px solid var(--dg-divide);
}

.dg-delivery-banner {
  border-color: var(--dg-warn-border);
  background-color: var(--dg-warn-bg);
  color: var(--dg-delivery-text);
}

.dg-delivery-lead {
  color: var(--dg-warn-text-strong);
}

.dg-delivery-detail {
  color: var(--dg-delivery-muted);
}

.dg-delivery-cutoff {
  color: var(--dg-delivery-sub);
}

.dg-fieldset-delivery {
  border-color: var(--dg-border);
  background-color: var(--dg-muted-bg);
}

.dg-input {
  border-color: var(--dg-border-input);
  color: var(--dg-text);
  background-color: var(--dg-card-bg);
}

.dg-input:focus {
  border-color: var(--dg-focus-border);
  outline: none;
  box-shadow: 0 0 0 2px var(--dg-focus-ring);
}

.dg-payment-label {
  border-color: var(--dg-border);
}

.dg-payment-label:hover {
  background-color: var(--dg-hover-ui);
}

.dg-radio {
  accent-color: var(--dg-accent);
}

.dg-checkbox {
  accent-color: var(--dg-accent);
  border-color: var(--dg-border-input);
}

.dg-panel-deuna {
  border-color: var(--dg-panel-success-border);
  background-color: var(--dg-panel-success-bg);
}

.dg-panel-transfer {
  border-color: var(--dg-border);
  background-color: var(--dg-card-bg);
}

.dg-qr-border {
  border-color: var(--dg-border);
}

.dg-warn-box {
  border-color: var(--dg-warn-border);
  background-color: var(--dg-warn-bg);
  color: var(--dg-warn-text);
}

.dg-warn-code {
  background-color: var(--dg-warn-code-bg);
}

.dg-transfer-row {
  border-bottom-color: var(--dg-divide);
}

.dg-copy-row {
  border-color: var(--dg-copy-row-border);
  background-color: var(--dg-copy-row-bg);
}

.dg-copy-btn {
  border-color: var(--dg-copy-btn-border);
  color: var(--dg-copy-btn-text);
}

.dg-copy-btn:hover {
  background-color: var(--dg-copy-btn-hover);
}

.dg-btn-primary {
  background-color: var(--dg-accent);
  color: #fff;
}

.dg-btn-primary:hover:not(:disabled) {
  background-color: var(--dg-accent-hover);
}

.dg-btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dg-primary-ring);
}

.dg-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dg-aside {
  border-color: var(--dg-aside-border);
  background-color: var(--dg-aside-bg);
  color: var(--dg-text-muted);
}

.dg-footer {
  border-color: var(--dg-footer-border);
  background-color: var(--dg-footer-bg);
  color: var(--dg-text-subtle);
}

.dg-config-warn {
  border-color: var(--dg-warn-border);
  background-color: var(--dg-warn-bg);
  color: var(--dg-warn-text);
}

.dg-success-order {
  border-color: var(--dg-panel-success-border);
  background-color: var(--dg-panel-success-bg);
}

/* Tarjetas y carrito (app.js) */
.dg-product-card {
  border-color: var(--dg-border);
  background-color: var(--dg-card-bg);
}

.dg-product-title {
  color: var(--dg-heading);
}

.dg-product-desc {
  color: var(--dg-text-muted);
}

.dg-product-foot {
  border-top-color: var(--dg-divide);
}

.dg-price {
  color: var(--dg-accent);
}

.dg-btn-add {
  background-color: var(--dg-accent);
  color: #fff;
}

.dg-btn-add:hover {
  background-color: var(--dg-accent-hover);
}

.dg-btn-add:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dg-primary-ring);
}

.dg-btn-add:disabled {
  background-color: var(--dg-btn-disabled-bg);
  color: var(--dg-btn-disabled-text);
  cursor: not-allowed;
}

.dg-btn-add-disabled {
  background-color: var(--dg-btn-disabled-bg);
  color: var(--dg-btn-disabled-text);
  cursor: not-allowed;
}

.dg-badge-ok {
  background-color: var(--dg-success-badge-bg);
  color: var(--dg-success-badge-text);
}

.dg-badge-off {
  background-color: var(--dg-badge-off-bg);
  color: var(--dg-badge-off-text);
}

.dg-cart-title {
  color: var(--dg-heading);
}

.dg-cart-meta {
  color: var(--dg-text-subtle);
}

.dg-cart-ctrl {
  border-color: var(--dg-border-input);
}

.dg-cart-ctrl:hover {
  background-color: var(--dg-hover-ui);
}

.dg-varios-heading {
  border-bottom-color: var(--dg-border);
  color: var(--dg-heading);
}

.dg-empty-menu {
  border-color: var(--dg-empty-dashed-border);
  background-color: var(--dg-empty-dashed-bg);
  color: var(--dg-empty-dashed-text);
}

.dg-code-inline {
  background-color: var(--dg-code-inline);
  color: var(--dg-code-inline-text);
}

.dg-copy-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--dg-focus-ring);
}

.dg-qr-caption {
  color: var(--dg-text-subtle);
}

.dg-qr-caption-missing {
  color: var(--dg-warn-caption);
}

.dg-qr-caption-error {
  color: var(--dg-warn-caption-lg);
}

.dg-skip-link:focus {
  background-color: var(--dg-card-bg);
  color: var(--dg-text);
}