/* =====================================================================
   MECOHUE — ESTILOS GLOBALES
   Reset + tipografía base + imports de todos los CSS de la app.

   IMPORTANTE: el orden de imports importa.
   1. design-tokens.css: variables (--mh-green-*, etc.). Va PRIMERO.
   2. components.css → layout.css → pages.css → login.css: base del panel.
   3. phase*.css: módulos por fase.
   4. icons-replace.css: ajustes de íconos.
   5. responsive.css: overrides responsive al final (mayor specificity).
   ===================================================================== */

/* =====================================================================
   MECOHUE — DESIGN TOKENS
   Paleta veterinaria editorial: verde profundo + crema + dorado + coral.
   Inspirado en sistemas tipo Linear con calidez de clínica de barrio.
   ===================================================================== */

:root {
  /* ============ COLORES ============ */

  /* Verde — color principal */
  --mh-green-50:  #F0F5F2;
  --mh-green-100: #DBE7E0;
  --mh-green-200: #B5CFC2;
  --mh-green-300: #8FB7A3;
  --mh-green-400: #69A085;
  --mh-green-500: #4A8B6F;   /* verde hoja — botones primarios */
  --mh-green-600: #356957;
  --mh-green-700: #2C5F4B;   /* verde medio */
  --mh-green-800: #234A3B;
  --mh-green-900: #1E3A2F;   /* verde profundo — sidebar, headers */

  /* Crema cálido — fondos */
  --mh-cream-50:  #FCFAF5;
  --mh-cream-100: #F8F5EC;
  --mh-cream-200: #F4F1E8;   /* fondo principal */
  --mh-cream-300: #EAE5D4;
  --mh-cream-400: #D9D4C5;   /* líneas, bordes */

  /* Dorado mostaza — acentos */
  --mh-gold-300: #E0CC93;
  --mh-gold-400: #D4B978;
  --mh-gold-500: #C9A961;    /* acentos, kickers */
  --mh-gold-600: #A8893E;

  /* Coral — alertas, tag peluquería */
  --mh-coral-300: #F0A78B;
  --mh-coral-500: #E07856;
  --mh-coral-600: #C45A38;

  /* Grises neutros — texto */
  --mh-ink-900: #1A1A1A;
  --mh-ink-700: #2A2A2A;
  --mh-ink-500: #6B6B6B;
  --mh-ink-400: #8B8B8B;
  --mh-ink-300: #C4C4C4;
  --mh-ink-100: #F0F0F0;
  --mh-white:   #FFFFFF;

  /* Estados semánticos */
  --mh-success: #4A8B6F;
  --mh-warning: #D4B978;
  --mh-danger:  #C45A38;
  --mh-info:    #5A7FA8;

  /* ============ TIPOGRAFÍA ============ */

  --mh-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --mh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --mh-text-xs:   0.75rem;   /* 12px */
  --mh-text-sm:   0.875rem;  /* 14px */
  --mh-text-base: 1rem;      /* 16px */
  --mh-text-lg:   1.125rem;  /* 18px */
  --mh-text-xl:   1.25rem;   /* 20px */
  --mh-text-2xl:  1.5rem;    /* 24px */
  --mh-text-3xl:  1.875rem;  /* 30px */
  --mh-text-4xl:  2.25rem;   /* 36px */
  --mh-text-5xl:  3rem;      /* 48px */

  --mh-leading-tight:   1.2;
  --mh-leading-snug:    1.35;
  --mh-leading-normal:  1.5;
  --mh-leading-relaxed: 1.65;

  /* ============ ESPACIADO ============ */

  --mh-space-1:  0.25rem;
  --mh-space-2:  0.5rem;
  --mh-space-3:  0.75rem;
  --mh-space-4:  1rem;
  --mh-space-5:  1.25rem;
  --mh-space-6:  1.5rem;
  --mh-space-8:  2rem;
  --mh-space-10: 2.5rem;
  --mh-space-12: 3rem;
  --mh-space-16: 4rem;
  --mh-space-20: 5rem;

  /* ============ BORDES Y RADIOS ============ */

  --mh-radius-sm: 4px;
  --mh-radius-md: 8px;
  --mh-radius-lg: 12px;
  --mh-radius-xl: 16px;
  --mh-radius-2xl: 24px;
  --mh-radius-full: 9999px;

  --mh-border-thin: 1px solid var(--mh-cream-400);
  --mh-border-strong: 2px solid var(--mh-green-900);

  /* ============ SOMBRAS ============ */

  --mh-shadow-xs: 0 1px 2px rgba(30, 58, 47, 0.04);
  --mh-shadow-sm: 0 2px 6px rgba(30, 58, 47, 0.06);
  --mh-shadow-md: 0 4px 12px rgba(30, 58, 47, 0.08);
  --mh-shadow-lg: 0 8px 24px rgba(30, 58, 47, 0.10);
  --mh-shadow-xl: 0 16px 40px rgba(30, 58, 47, 0.12);

  /* ============ LAYOUT ============ */

  --mh-sidebar-width: 260px;
  --mh-header-height: 64px;
  --mh-content-max-width: 1280px;

  /* ============ TRANSICIONES ============ */

  --mh-transition-fast: 120ms ease;
  --mh-transition-base: 200ms ease;
  --mh-transition-slow: 320ms ease;

  /* ============ Z-INDEX ============ */

  --mh-z-dropdown: 100;
  --mh-z-sticky: 200;
  --mh-z-fixed: 300;
  --mh-z-modal-backdrop: 400;
  --mh-z-modal: 500;
  --mh-z-popover: 600;
  --mh-z-toast: 700;
}

/* =====================================================================
   MECOHUE — COMPONENTES UI
   Botones, inputs, modales, toasts, tags.
   ===================================================================== */

/* ============ BUTTON ============ */

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2);
  font-family: var(--mh-font-body);
  font-weight: 500;
  border-radius: var(--mh-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--mh-transition-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.mh-btn:disabled,
.mh-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Sizes */

.mh-btn--sm {
  padding: 6px 12px;
  font-size: var(--mh-text-sm);
}

.mh-btn--md {
  padding: 10px 20px;
  font-size: var(--mh-text-sm);
}

.mh-btn--lg {
  padding: 14px 28px;
  font-size: var(--mh-text-base);
}

.mh-btn--full {
  width: 100%;
}

/* Variants */

.mh-btn--primary {
  background: var(--mh-green-900);
  color: var(--mh-cream-100);
  border-color: var(--mh-green-900);
}

.mh-btn--primary:hover:not(:disabled) {
  background: var(--mh-green-700);
  border-color: var(--mh-green-700);
  transform: translateY(-1px);
  box-shadow: var(--mh-shadow-md);
}

.mh-btn--primary:active:not(:disabled) {
  transform: translateY(0);
}

.mh-btn--secondary {
  background: var(--mh-green-500);
  color: var(--mh-white);
  border-color: var(--mh-green-500);
}

.mh-btn--secondary:hover:not(:disabled) {
  background: var(--mh-green-600);
  border-color: var(--mh-green-600);
}

.mh-btn--ghost {
  background: transparent;
  color: var(--mh-ink-700);
  border-color: var(--mh-cream-400);
}

.mh-btn--ghost:hover:not(:disabled) {
  background: var(--mh-cream-100);
  border-color: var(--mh-ink-300);
}

.mh-btn--danger {
  background: var(--mh-coral-500);
  color: var(--mh-white);
  border-color: var(--mh-coral-500);
}

.mh-btn--danger:hover:not(:disabled) {
  background: var(--mh-coral-600);
  border-color: var(--mh-coral-600);
}

.mh-btn--warning {
  background: var(--mh-gold-500);
  color: var(--mh-green-900);
  border-color: var(--mh-gold-500);
}

.mh-btn--warning:hover:not(:disabled) {
  background: var(--mh-gold-600);
  color: var(--mh-cream-100);
}

.mh-btn--text {
  background: transparent;
  color: var(--mh-green-700);
  border: none;
  padding: 4px 8px;
}

.mh-btn--text:hover:not(:disabled) {
  color: var(--mh-green-900);
  background: var(--mh-cream-100);
}

/* Spinner */

.mh-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.mh-btn__icon {
  display: inline-flex;
  align-items: center;
}

.mh-btn__icon svg {
  width: 16px;
  height: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============ FORM FIELDS ============ */

.mh-field {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-field__label {
  font-size: var(--mh-text-sm);
  font-weight: 500;
  color: var(--mh-ink-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mh-field__required {
  color: var(--mh-coral-500);
  font-weight: 600;
}

.mh-field__hint {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
}

.mh-field__error {
  font-size: var(--mh-text-xs);
  color: var(--mh-coral-600);
}

.mh-input,
.mh-select,
.mh-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--mh-cream-400);
  border-radius: var(--mh-radius-md);
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  background: var(--mh-white);
  color: var(--mh-ink-900);
  transition: border-color var(--mh-transition-fast),
              box-shadow var(--mh-transition-fast);
}

.mh-input:focus,
.mh-select:focus,
.mh-textarea:focus {
  outline: none;
  border-color: var(--mh-green-500);
  box-shadow: 0 0 0 3px rgba(74, 139, 111, 0.15);
}

.mh-input::placeholder,
.mh-textarea::placeholder {
  color: var(--mh-ink-400);
}

.mh-input--error {
  border-color: var(--mh-coral-500);
}

.mh-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: var(--mh-leading-normal);
}

.mh-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.mh-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
}

.mh-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mh-green-500);
  cursor: pointer;
}

/* ============ MODAL ============ */

.mh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 58, 47, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mh-space-4);
  z-index: var(--mh-z-modal);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mh-modal {
  background: var(--mh-white);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-shadow-xl);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mh-modal--sm { max-width: 480px; }

.mh-modal--md { max-width: 680px; }

.mh-modal--lg { max-width: 900px; }

.mh-modal--xl { max-width: 1140px; }

.mh-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mh-space-5) var(--mh-space-6);
  border-bottom: 1px solid var(--mh-cream-300);
  flex-shrink: 0;
}

.mh-modal__title {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mh-text-xl);
  color: var(--mh-green-900);
}

.mh-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mh-radius-md);
  color: var(--mh-ink-500);
  transition: all var(--mh-transition-fast);
}

.mh-modal__close:hover {
  background: var(--mh-cream-200);
  color: var(--mh-ink-900);
}

.mh-modal__body {
  padding: var(--mh-space-6);
  overflow-y: auto;
  flex: 1;
}

.mh-modal__intro {
  margin-bottom: var(--mh-space-5);
  color: var(--mh-ink-500);
  line-height: var(--mh-leading-relaxed);
}

.mh-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--mh-space-3);
  padding: var(--mh-space-4) var(--mh-space-6);
  border-top: 1px solid var(--mh-cream-300);
  background: var(--mh-cream-50);
  flex-shrink: 0;
}

/* ============ TOAST ============ */

.mh-toast-container {
  position: fixed;
  top: var(--mh-space-6);
  right: var(--mh-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  z-index: var(--mh-z-toast);
  pointer-events: none;
}

.mh-toast {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: 12px 16px 12px 14px;
  background: var(--mh-white);
  border-radius: var(--mh-radius-md);
  box-shadow: var(--mh-shadow-lg);
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  animation: slideInRight 0.25s ease;
  border-left: 4px solid var(--mh-green-500);
}

.mh-toast--success { border-left-color: var(--mh-green-500); }

.mh-toast--error { border-left-color: var(--mh-coral-500); }

.mh-toast--warning { border-left-color: var(--mh-gold-500); }

.mh-toast--info { border-left-color: var(--mh-info); }

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mh-toast__icon {
  font-size: var(--mh-text-lg);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.mh-toast--success .mh-toast__icon { color: var(--mh-green-500); }

.mh-toast--error .mh-toast__icon { color: var(--mh-coral-500); }

.mh-toast--warning .mh-toast__icon { color: var(--mh-gold-600); }

.mh-toast--info .mh-toast__icon { color: var(--mh-info); }

.mh-toast__message {
  flex: 1;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
  line-height: var(--mh-leading-normal);
}

.mh-toast__close {
  font-size: 1.25rem;
  color: var(--mh-ink-400);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mh-radius-sm);
  transition: all var(--mh-transition-fast);
}

.mh-toast__close:hover {
  color: var(--mh-ink-900);
  background: var(--mh-cream-200);
}

/* ============ TAGS / BADGES ============ */

.mh-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: var(--mh-space-2);
}

.mh-tag--admin {
  background: var(--mh-green-900);
  color: var(--mh-cream-100);
}

.mh-tag--vet {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-tag--success {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-tag--muted {
  background: var(--mh-cream-300);
  color: var(--mh-ink-500);
}

.mh-tag--info {
  background: var(--mh-gold-300);
  color: var(--mh-green-900);
}

/* ============ SPINNER ============ */

.mh-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--mh-cream-300);
  border-top-color: var(--mh-green-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.mh-spinner--lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.mh-loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--mh-cream-200);
}

/* ============ UTILS ============ */

.mh-text-muted {
  color: var(--mh-ink-500);
}

.mh-text-sm {
  font-size: var(--mh-text-sm);
}

/* =====================================================================
   LAYOUT PRINCIPAL — sidebar + content
   ===================================================================== */

.mh-layout {
  display: grid;
  grid-template-columns: var(--mh-sidebar-width) 1fr;
  min-height: 100vh;
}

.mh-layout__main {
  background: var(--mh-cream-200);
  min-width: 0;
  overflow-x: auto;
}

.mh-layout__overlay {
  display: none;
}

.mh-layout__menu-toggle {
  display: none;
}

/* ============ MOBILE ============ */

@media (max-width: 900px) {
  .mh-layout {
    grid-template-columns: 1fr;
  }

  .mh-layout__menu-toggle {
    display: flex;
    position: fixed;
    top: var(--mh-space-3);
    left: var(--mh-space-3);
    z-index: var(--mh-z-sticky);
    width: 44px;
    height: 44px;
    background: var(--mh-green-900);
    color: var(--mh-cream-100);
    border-radius: var(--mh-radius-md);
    align-items: center;
    justify-content: center;
    box-shadow: var(--mh-shadow-md);
  }

  .mh-sidebar {
    transform: translateX(-100%);
    transition: transform var(--mh-transition-base);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* z-index MAYOR que el overlay para que los clicks lleguen */
    z-index: var(--mh-z-modal);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mh-layout--mobile-open .mh-sidebar {
    transform: translateX(0);
  }

  .mh-layout--mobile-open .mh-layout__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(30, 58, 47, 0.5);
    z-index: var(--mh-z-modal-backdrop);
  }

  /* Bloquear scroll del body cuando el menu está abierto */
  .mh-layout--mobile-open {
    overflow: hidden;
    height: 100vh;
  }

  .mh-layout__main {
    /* El padding y posicionamiento se manejan en responsive.css
       que es la fuente de verdad para los breakpoints. */
  }
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */

.mh-sidebar {
  background: var(--mh-green-900);
  color: var(--mh-cream-100);
  width: var(--mh-sidebar-width);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* ============ Brand ============ */

.mh-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-6) var(--mh-space-5) var(--mh-space-5);
  border-bottom: 1px solid rgba(244, 241, 232, 0.08);
}

.mh-sidebar__brand-mark {
  width: 40px;
  height: 40px;
  background: var(--mh-gold-500);
  color: var(--mh-green-900);
  border-radius: var(--mh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-sidebar__brand-name {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-size: var(--mh-text-xl);
  font-weight: 400;
  color: var(--mh-cream-100);
  letter-spacing: -0.01em;
  line-height: 1;
}

.mh-sidebar__brand-subtitle {
  font-size: var(--mh-text-xs);
  color: var(--mh-gold-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============ Nav ============ */

.mh-sidebar__nav {
  flex: 1;
  padding: var(--mh-space-4) var(--mh-space-3);
  overflow-y: auto;
}

.mh-sidebar__nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-sidebar__nav-separator {
  margin: var(--mh-space-5) var(--mh-space-3) var(--mh-space-2);
}

.mh-sidebar__nav-separator span {
  font-size: var(--mh-text-xs);
  color: var(--mh-gold-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.mh-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: 10px var(--mh-space-3);
  color: rgba(244, 241, 232, 0.7);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  font-weight: 500;
  transition: all var(--mh-transition-fast);
  cursor: pointer;
}

.mh-sidebar__link:hover {
  background: rgba(244, 241, 232, 0.06);
  color: var(--mh-cream-100);
}

.mh-sidebar__link.is-active {
  background: var(--mh-green-700);
  color: var(--mh-cream-100);
  box-shadow: inset 3px 0 0 var(--mh-gold-500);
}

.mh-sidebar__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============ User chip ============ */

.mh-sidebar__user {
  padding: var(--mh-space-3);
  border-top: 1px solid rgba(244, 241, 232, 0.08);
  position: relative;
}

.mh-sidebar__user-trigger {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  width: 100%;
  padding: var(--mh-space-2);
  border-radius: var(--mh-radius-md);
  color: var(--mh-cream-100);
  transition: background var(--mh-transition-fast);
  text-align: left;
}

.mh-sidebar__user-trigger:hover {
  background: rgba(244, 241, 232, 0.06);
}

.mh-sidebar__avatar {
  width: 36px;
  height: 36px;
  background: var(--mh-gold-500);
  color: var(--mh-green-900);
  border-radius: var(--mh-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--mh-text-sm);
  flex-shrink: 0;
}

.mh-sidebar__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mh-sidebar__user-name {
  font-size: var(--mh-text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-sidebar__user-role {
  font-size: var(--mh-text-xs);
  color: var(--mh-gold-400);
}

.mh-sidebar__user-trigger svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.mh-sidebar__user-menu {
  position: absolute;
  bottom: 100%;
  left: var(--mh-space-3);
  right: var(--mh-space-3);
  background: var(--mh-white);
  border-radius: var(--mh-radius-md);
  box-shadow: var(--mh-shadow-lg);
  padding: 4px;
  margin-bottom: var(--mh-space-2);
  animation: slideUp 0.15s ease;
}

.mh-sidebar__menu-item {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  width: 100%;
  padding: 10px var(--mh-space-3);
  color: var(--mh-ink-700);
  border-radius: var(--mh-radius-sm);
  font-size: var(--mh-text-sm);
  text-align: left;
  transition: background var(--mh-transition-fast);
}

.mh-sidebar__menu-item:hover {
  background: var(--mh-cream-200);
  color: var(--mh-coral-600);
}

.mh-sidebar__menu-item svg {
  width: 16px;
  height: 16px;
}

/* =====================================================================
   PAGES — estructura común de todas las páginas internas
   ===================================================================== */

.mh-page {
  padding: var(--mh-space-8) var(--mh-space-10);
  max-width: var(--mh-content-max-width);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .mh-page {
    padding: var(--mh-space-6) var(--mh-space-4);
  }
}

/* ============ Page header ============ */

.mh-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mh-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--mh-space-8);
  padding-bottom: var(--mh-space-6);
  border-bottom: 1px solid var(--mh-cream-400);
}

.mh-page-header .mh-kicker {
  display: block;
  margin-bottom: var(--mh-space-2);
}

.mh-page-title {
  font-family: var(--mh-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--mh-green-900);
  line-height: var(--mh-leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--mh-space-2);
}

.mh-page-title em {
  font-style: italic;
  color: var(--mh-green-700);
}

.mh-page-subtitle {
  font-size: var(--mh-text-base);
  color: var(--mh-ink-500);
  max-width: 60ch;
  line-height: var(--mh-leading-relaxed);
}

.mh-page-actions {
  display: flex;
  gap: var(--mh-space-3);
  align-items: center;
}

/* ============ Page toolbar ============ */

.mh-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-4);
  margin-bottom: var(--mh-space-5);
  flex-wrap: wrap;
}

/* ============ Card ============ */

.mh-card {
  background: var(--mh-white);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-sm);
  padding: var(--mh-space-6);
  border: 1px solid var(--mh-cream-300);
}

/* ============ Form grid ============ */

.mh-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-5);
}

@media (max-width: 640px) {
  .mh-form-grid {
    grid-template-columns: 1fr;
  }
}

.mh-form-grid > .mh-field--full {
  grid-column: 1 / -1;
}

/* ============ Empty / placeholder ============ */

.mh-empty {
  padding: var(--mh-space-12) var(--mh-space-4);
  text-align: center;
  color: var(--mh-ink-500);
  font-size: var(--mh-text-sm);
}

.mh-placeholder-card {
  text-align: center;
  padding: var(--mh-space-16) var(--mh-space-6);
}

.mh-placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--mh-space-4);
  opacity: 0.6;
}

.mh-placeholder-card h3 {
  font-size: var(--mh-text-2xl);
  margin-bottom: var(--mh-space-3);
}

.mh-placeholder-card p {
  color: var(--mh-ink-500);
}

/* ============ Tables ============ */

.mh-table-wrap {
  padding: 0;
  overflow: hidden;
}

.mh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mh-text-sm);
}

.mh-table thead {
  background: var(--mh-cream-100);
  border-bottom: 1px solid var(--mh-cream-300);
}

.mh-table th {
  padding: var(--mh-space-4) var(--mh-space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--mh-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-ink-500);
}

.mh-table tbody tr {
  border-bottom: 1px solid var(--mh-cream-300);
  transition: background var(--mh-transition-fast);
}

.mh-table tbody tr:last-child {
  border-bottom: none;
}

.mh-table tbody tr:hover {
  background: var(--mh-cream-50);
}

.mh-table__row--inactive {
  opacity: 0.55;
}

.mh-table td {
  padding: var(--mh-space-4);
  vertical-align: middle;
}

.mh-table__actions-col {
  width: 1px;
  white-space: nowrap;
  text-align: right;
}

.mh-table__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}

/* ============ Icon buttons ============ */

.mh-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mh-radius-md);
  color: var(--mh-ink-500);
  transition: all var(--mh-transition-fast);
}

.mh-icon-btn:hover {
  background: var(--mh-cream-200);
  color: var(--mh-green-700);
}

.mh-icon-btn--danger:hover {
  background: #FBE9E0;
  color: var(--mh-coral-600);
}

.mh-icon-btn--success:hover {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* =====================================================================
   DASHBOARD
   ===================================================================== */

.mh-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mh-space-5);
  margin-bottom: var(--mh-space-8);
}

.mh-dashboard-card {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
  min-height: 160px;
}

.mh-dashboard-card__title {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-size: var(--mh-text-xl);
  font-weight: 400;
  color: var(--mh-green-900);
  margin: var(--mh-space-1) 0;
}

.mh-dashboard-card__placeholder {
  color: var(--mh-ink-500);
  font-size: var(--mh-text-sm);
  margin-top: auto;
  padding-top: var(--mh-space-3);
  font-style: italic;
}

/* ============ Status card (placeholder dashboard) ============ */

.mh-status-card h3 {
  margin-bottom: var(--mh-space-2);
}

.mh-status-card__subtitle {
  color: var(--mh-ink-500);
  margin-bottom: var(--mh-space-5);
  line-height: var(--mh-leading-relaxed);
}

.mh-phases-list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-phase {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
}

.mh-phase__check {
  width: 28px;
  height: 28px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-cream-200);
  color: var(--mh-ink-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mh-text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.mh-phase--done {
  color: var(--mh-green-700);
}

.mh-phase--done .mh-phase__check {
  background: var(--mh-green-500);
  color: var(--mh-white);
}

.mh-phase strong {
  color: var(--mh-ink-700);
  font-weight: 600;
}

.mh-phase__hint {
  display: block;
  font-style: italic;
  color: var(--mh-gold-600);
  margin-top: 2px;
  font-size: var(--mh-text-xs);
}

/* =====================================================================
   LOGIN PAGE — split screen editorial
   ===================================================================== */

.mh-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

@media (max-width: 900px) {
  .mh-login {
    grid-template-columns: 1fr;
  }
}

/* ============ HERO LEFT ============ */

.mh-login__hero {
  background: var(--mh-green-900);
  color: var(--mh-cream-100);
  padding: var(--mh-space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.mh-login__hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--mh-gold-500) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}

.mh-login__hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--mh-green-500) 0%, transparent 70%);
  opacity: 0.22;
  pointer-events: none;
}

.mh-login__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

@media (max-width: 900px) {
  .mh-login__hero {
    padding: var(--mh-space-8);
  }
}

.mh-login__kicker {
  color: var(--mh-gold-500);
}

.mh-login__title {
  font-family: var(--mh-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: var(--mh-leading-tight);
  color: var(--mh-cream-100);
  margin: var(--mh-space-4) 0 var(--mh-space-5);
  letter-spacing: -0.02em;
}

.mh-login__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--mh-gold-400);
}

.mh-login__hero-text {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-cream-100);
  opacity: 0.85;
  margin-bottom: var(--mh-space-10);
}

.mh-login__features {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}

.mh-login__feature {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  font-size: var(--mh-text-sm);
  color: var(--mh-cream-100);
  opacity: 0.9;
}

.mh-login__feature-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-gold-500);
  flex-shrink: 0;
}

.mh-login__hero-footer {
  position: relative;
  z-index: 1;
  color: var(--mh-gold-500);
  font-size: var(--mh-text-xs);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mh-login__hero-footer small {
  font-size: var(--mh-text-xs);
}

.mh-login__back-link {
  color: var(--mh-cream-200);
  text-decoration: none;
  font-size: var(--mh-text-xs);
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}

.mh-login__back-link:hover {
  opacity: 1;
  color: var(--mh-gold-300);
}

/* ============ FORM SIDE ============ */

.mh-login__form-side {
  background: var(--mh-cream-200);
  padding: var(--mh-space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .mh-login__form-side {
    padding: var(--mh-space-8);
  }
}

.mh-login__form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

.mh-login__form-header {
  margin-bottom: var(--mh-space-4);
}

.mh-login__form-title {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--mh-text-4xl);
  color: var(--mh-green-900);
  margin: var(--mh-space-3) 0 var(--mh-space-2);
  letter-spacing: -0.01em;
}

.mh-login__form-subtitle {
  color: var(--mh-ink-500);
  line-height: var(--mh-leading-relaxed);
}

.mh-login__error {
  background: #FBE9E0;
  color: var(--mh-coral-600);
  padding: 12px 16px;
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  border-left: 3px solid var(--mh-coral-500);
}

.mh-login__hint {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-align: center;
  margin-top: var(--mh-space-3);
  line-height: var(--mh-leading-relaxed);
}

/* =====================================================================
   PANTALLA DE BIENVENIDA — FASE 1
   Placeholder editorial mostrando estado del sistema y fases.
   Será reemplazada en Fase 2 por el router con login real.
   ===================================================================== */

.mh-welcome {
  min-height: 100vh;
  background: linear-gradient(
    180deg,
    var(--mh-cream-200) 0%,
    var(--mh-cream-100) 100%
  );
  padding: var(--mh-space-12) var(--mh-space-6);
  position: relative;
  overflow: hidden;
}

.mh-welcome::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    var(--mh-gold-300) 0%,
    transparent 70%
  );
  opacity: 0.15;
  pointer-events: none;
}

.mh-welcome::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    var(--mh-green-300) 0%,
    transparent 70%
  );
  opacity: 0.15;
  pointer-events: none;
}

.mh-welcome__container {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ============ HEADER ============ */

.mh-welcome__header {
  text-align: center;
  margin-bottom: var(--mh-space-12);
}

.mh-welcome__header .mh-kicker {
  display: inline-block;
  margin-bottom: var(--mh-space-3);
}

.mh-welcome__header h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-style: italic;
  font-weight: 300;
  color: var(--mh-green-900);
  margin-bottom: var(--mh-space-3);
  letter-spacing: -0.02em;
}

.mh-welcome__subtitle {
  font-size: var(--mh-text-lg);
  color: var(--mh-ink-500);
  font-weight: 400;
}

/* ============ CARDS ============ */

.mh-welcome__status,
.mh-welcome__phases {
  margin-bottom: var(--mh-space-6);
  border: var(--mh-border-thin);
}

.mh-welcome__status h3,
.mh-welcome__phases h3 {
  font-size: var(--mh-text-xl);
  font-style: italic;
  font-weight: 300;
  margin-bottom: var(--mh-space-5);
  color: var(--mh-green-900);
  padding-bottom: var(--mh-space-3);
  border-bottom: 1px solid var(--mh-cream-300);
}

/* ============ STATUS ROW ============ */

.mh-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mh-space-3) 0;
}

.mh-status-row + .mh-status-row {
  border-top: 1px solid var(--mh-cream-300);
}

.mh-status-label {
  font-weight: 500;
  color: var(--mh-ink-700);
}

.mh-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2);
  padding: var(--mh-space-1) var(--mh-space-3);
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-sm);
  font-weight: 500;
}

.mh-status-badge--ok {
  background: var(--mh-green-50);
  color: var(--mh-green-700);
}

.mh-status-badge--checking {
  background: var(--mh-cream-300);
  color: var(--mh-ink-500);
}

.mh-status-badge--error {
  background: #FBE9E0;
  color: var(--mh-coral-600);
}

.mh-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mh-radius-full);
  background: currentColor;
  display: inline-block;
}

.mh-status-badge--checking .mh-status-dot {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============ PHASES ============ */

.mh-phases {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-phase {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
  transition: background var(--mh-transition-fast);
}

.mh-phase:hover {
  background: var(--mh-cream-100);
}

.mh-phase__check {
  width: 28px;
  height: 28px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-cream-200);
  color: var(--mh-ink-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mh-text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.mh-phase--done {
  color: var(--mh-green-700);
  font-weight: 500;
}

.mh-phase--done .mh-phase__check {
  background: var(--mh-green-500);
  color: var(--mh-white);
}

/* ============ FOOTER ============ */

.mh-welcome__footer {
  text-align: center;
  margin-top: var(--mh-space-10);
  color: var(--mh-ink-400);
}

.mh-welcome__footer small {
  font-size: var(--mh-text-xs);
  letter-spacing: 0.04em;
}

/* =====================================================================
   FASE 3 — Pets, Owners, Pet Detail
   ===================================================================== */

/* ============ Avatar ============ */

.mh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mh-radius-full);
  background: var(--mh-green-500);
  color: var(--mh-white);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}

.mh-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mh-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--mh-text-xs);
}

.mh-avatar--md {
  width: 44px;
  height: 44px;
  font-size: var(--mh-text-sm);
}

.mh-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--mh-text-base);
}

.mh-avatar--xl {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

/* ============ Toolbar (búsqueda + filtros) ============ */

.mh-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mh-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--mh-space-6);
  padding: var(--mh-space-4) var(--mh-space-5);
}

.mh-search-input {
  position: relative;
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
}

.mh-search-input svg {
  position: absolute;
  left: 14px;
  color: var(--mh-ink-400);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.mh-search-input input {
  padding-left: 42px;
}

.mh-search-input--lg input {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: var(--mh-text-base);
}

/* ============ Pets grid ============ */

.mh-pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--mh-space-5);
}

.mh-pet-card {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-lg);
  padding: var(--mh-space-5);
  display: flex;
  gap: var(--mh-space-4);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
  box-shadow: var(--mh-shadow-xs);
}

.mh-pet-card:hover {
  border-color: var(--mh-green-300);
  box-shadow: var(--mh-shadow-md);
  transform: translateY(-2px);
}

.mh-pet-card:focus-visible {
  outline: 2px solid var(--mh-green-500);
  outline-offset: 2px;
}

.mh-pet-card--inactive {
  opacity: 0.55;
}

.mh-pet-card__avatar {
  flex-shrink: 0;
}

.mh-pet-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-pet-card__header {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
}

.mh-pet-card__name {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mh-text-2xl);
  color: var(--mh-green-900);
  line-height: var(--mh-leading-tight);
}

.mh-pet-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
}

.mh-pet-card__owner {
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
  margin-top: var(--mh-space-1);
}

.mh-pet-card__alerts {
  display: flex;
  gap: var(--mh-space-2);
  margin-top: var(--mh-space-1);
}

.mh-tag--warning {
  background: #FBE9E0;
  color: var(--mh-coral-600);
  margin-left: 0;
}

/* ============ Pet Detail ============ */

.mh-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  margin-bottom: var(--mh-space-4);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
}

.mh-breadcrumbs a {
  color: var(--mh-green-700);
}

.mh-breadcrumbs a:hover {
  color: var(--mh-green-900);
}

.mh-pet-header {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-6);
  margin-bottom: var(--mh-space-6);
  padding: var(--mh-space-6);
}

.mh-pet-header__avatar {
  flex-shrink: 0;
}

.mh-pet-header__info {
  flex: 1;
  min-width: 0;
}

.mh-pet-header__name {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--mh-text-4xl);
  color: var(--mh-green-900);
  line-height: var(--mh-leading-tight);
  margin: var(--mh-space-2) 0 var(--mh-space-3);
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  flex-wrap: wrap;
}

.mh-pet-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  color: var(--mh-ink-500);
  font-size: var(--mh-text-sm);
  margin-bottom: var(--mh-space-3);
}

.mh-pet-header__titular {
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
}

.mh-pet-header__actions {
  display: flex;
  gap: var(--mh-space-2);
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 640px) {
  .mh-pet-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mh-pet-header__actions {
    flex-direction: row;
  }
}

/* ============ Alerts banner ============ */

.mh-pet-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  margin-bottom: var(--mh-space-6);
}

.mh-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-3);
  padding: var(--mh-space-4);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
}

.mh-alert--warning {
  background: #FFF9EE;
  border-left: 3px solid var(--mh-gold-500);
  color: var(--mh-ink-700);
}

.mh-alert--warning svg {
  color: var(--mh-gold-600);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.mh-alert strong {
  color: var(--mh-green-900);
}

/* ============ Tabs ============ */

.mh-tabs {
  display: flex;
  gap: var(--mh-space-1);
  border-bottom: 1px solid var(--mh-cream-400);
  margin-bottom: var(--mh-space-6);
  overflow-x: auto;
}

.mh-tab {
  padding: var(--mh-space-3) var(--mh-space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mh-ink-500);
  font-weight: 500;
  font-size: var(--mh-text-sm);
  transition: all var(--mh-transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.mh-tab:hover {
  color: var(--mh-green-700);
}

.mh-tab.is-active {
  color: var(--mh-green-900);
  border-bottom-color: var(--mh-gold-500);
}

.mh-tab-content {
  /* el contenido va acá */
}

/* ============ Summary tab ============ */

.mh-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-5);
}

@media (max-width: 768px) {
  .mh-summary-grid {
    grid-template-columns: 1fr;
  }
}

.mh-card--full {
  grid-column: 1 / -1;
}

.mh-section-title {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mh-text-xl);
  color: var(--mh-green-900);
  margin-bottom: var(--mh-space-4);
  padding-bottom: var(--mh-space-3);
  border-bottom: 1px solid var(--mh-cream-300);
}

.mh-data-list {
  display: flex;
  flex-direction: column;
}

.mh-data-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--mh-space-3);
}

.mh-data-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--mh-space-3);
  padding: var(--mh-space-2) 0;
  font-size: var(--mh-text-sm);
}

.mh-data-row dt {
  color: var(--mh-ink-500);
  font-weight: 500;
}

.mh-data-row dd {
  color: var(--mh-ink-900);
}

.mh-data-row--multiline {
  grid-template-columns: 1fr;
  gap: var(--mh-space-1);
  padding: var(--mh-space-3) 0;
  border-bottom: 1px dashed var(--mh-cream-300);
}

.mh-data-row--multiline:last-child {
  border-bottom: none;
}

.mh-data-list--grid .mh-data-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 0;
}

.mh-data-list--grid dt {
  font-size: var(--mh-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mh-data-extra {
  margin-top: var(--mh-space-4);
  padding-top: var(--mh-space-4);
  border-top: 1px dashed var(--mh-cream-300);
}

.mh-data-extra .mh-data-label {
  display: block;
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--mh-space-2);
  font-weight: 600;
}

.mh-data-extra p {
  color: var(--mh-ink-700);
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-relaxed);
}

/* ============ Family tab ============ */

.mh-family {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-6);
}

.mh-family__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-family__subtitle {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mh-text-lg);
  color: var(--mh-ink-500);
  margin-bottom: var(--mh-space-3);
}

.mh-family-card {
  padding: var(--mh-space-5);
}

.mh-family-card--primary {
  border-left: 4px solid var(--mh-gold-500);
}

.mh-family-card__header {
  margin-bottom: var(--mh-space-3);
}

.mh-family-card__header .mh-tag {
  margin-left: 0;
}

.mh-family-card__actions {
  display: flex;
  gap: var(--mh-space-2);
  margin-top: var(--mh-space-4);
  padding-top: var(--mh-space-3);
  border-top: 1px solid var(--mh-cream-300);
}

.mh-family-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--mh-space-4);
}

.mh-owner-summary {
  display: flex;
  gap: var(--mh-space-3);
  align-items: flex-start;
}

.mh-owner-summary__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-1);
}

.mh-owner-summary__info strong {
  color: var(--mh-green-900);
  font-size: var(--mh-text-base);
}

.mh-owner-summary__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2) var(--mh-space-3);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
}

/* ============ Form tabs (dentro de modales) ============ */

.mh-form-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--mh-cream-400);
  padding: 0 var(--mh-space-6);
  background: var(--mh-cream-50);
}

.mh-form-tab {
  padding: var(--mh-space-3) var(--mh-space-4);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--mh-ink-500);
  font-weight: 500;
  font-size: var(--mh-text-sm);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-form-tab:hover {
  color: var(--mh-green-700);
}

.mh-form-tab.is-active {
  color: var(--mh-green-900);
  border-bottom-color: var(--mh-gold-500);
}

.mh-form-tab--required span {
  color: var(--mh-coral-500);
  font-weight: 700;
}

.mh-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-5);
}

.mh-form-help {
  color: var(--mh-ink-500);
  font-size: var(--mh-text-xs);
  line-height: var(--mh-leading-normal);
  padding: var(--mh-space-2) var(--mh-space-3);
  background: var(--mh-cream-100);
  border-radius: var(--mh-radius-sm);
  border-left: 2px solid var(--mh-gold-500);
}

.mh-checkbox--inline {
  padding-top: var(--mh-space-3);
}

/* ============ OwnerSelector ============ */

.mh-owner-selector {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}

.mh-owner-selector__tabs {
  display: flex;
  gap: 4px;
  background: var(--mh-cream-200);
  padding: 4px;
  border-radius: var(--mh-radius-md);
}

.mh-owner-selector__tab {
  flex: 1;
  padding: var(--mh-space-2) var(--mh-space-3);
  background: transparent;
  border: none;
  border-radius: var(--mh-radius-sm);
  color: var(--mh-ink-500);
  font-size: var(--mh-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-owner-selector__tab.is-active {
  background: var(--mh-white);
  color: var(--mh-green-900);
  box-shadow: var(--mh-shadow-xs);
}

.mh-owner-selector__search {
  position: relative;
}

.mh-owner-selector__dropdown {
  margin-top: var(--mh-space-2);
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-400);
  border-radius: var(--mh-radius-md);
  box-shadow: var(--mh-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--mh-z-dropdown);
}

.mh-owner-result {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  width: 100%;
  padding: var(--mh-space-3);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--mh-transition-fast);
}

.mh-owner-result + .mh-owner-result {
  border-top: 1px solid var(--mh-cream-300);
}

.mh-owner-result:hover {
  background: var(--mh-cream-100);
}

.mh-owner-result.is-selected {
  background: var(--mh-green-50);
}

.mh-owner-result__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  flex: 1;
}

.mh-owner-result__info strong {
  color: var(--mh-green-900);
}

.mh-owner-card {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  background: var(--mh-cream-100);
  border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-cream-300);
}

.mh-owner-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-owner-card__info strong {
  color: var(--mh-green-900);
}

.mh-owner-selector--selected {
  margin-top: var(--mh-space-3);
}

/* ============ Results list (modal add owner) ============ */

.mh-results-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
}

.mh-results-list:empty + * {
  display: none;
}

/* ============ Owners page extras ============ */

.mh-cell-with-avatar {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
}

.mh-cell-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mh-cell-counts .mh-tag {
  margin-left: 0;
}

/* =====================================================================
   FASE 4 — Historia clínica + Adjuntos
   ===================================================================== */

/* ============ Timeline ============ */

.mh-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-5);
}

.mh-timeline__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-timeline-list {
  position: relative;
  padding-left: var(--mh-space-6);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

/* Línea vertical de timeline */

.mh-timeline-list::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--mh-cream-400),
    var(--mh-cream-300) 60%,
    transparent
  );
}

.mh-timeline-item {
  position: relative;
}

.mh-timeline-item__dot {
  position: absolute;
  left: -28px;
  top: 22px;
  width: 24px;
  height: 24px;
  background: var(--mh-cream-100);
  border: 2px solid var(--mh-cream-400);
  border-radius: var(--mh-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.mh-timeline-item__dot-inner {
  width: 10px;
  height: 10px;
  border-radius: var(--mh-radius-full);
  background: var(--mh-green-500);
}

.mh-timeline-item__card {
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--mh-transition-base);
}

.mh-timeline-item.is-expanded .mh-timeline-item__card {
  box-shadow: var(--mh-shadow-md);
  border-color: var(--mh-green-300);
}

.mh-timeline-item__head {
  display: flex;
  width: 100%;
  padding: var(--mh-space-4) var(--mh-space-5);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--mh-transition-fast);
}

.mh-timeline-item__head:hover {
  background: var(--mh-cream-50);
}

.mh-timeline-item__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-1);
  min-width: 0;
}

.mh-timeline-item__date {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.mh-timeline-item__reason {
  font-size: var(--mh-text-base);
  color: var(--mh-green-900);
}

.mh-timeline-item__reason strong {
  font-weight: 600;
}

.mh-timeline-item__vet {
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
}

.mh-timeline-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  margin-top: var(--mh-space-1);
}

.mh-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--mh-cream-200);
  color: var(--mh-ink-700);
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-xs);
  font-weight: 500;
}

.mh-chip--info {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-chip--gold {
  background: var(--mh-gold-300);
  color: var(--mh-green-900);
}

.mh-timeline-item__chevron {
  display: inline-flex;
  align-items: center;
  margin-left: var(--mh-space-3);
  color: var(--mh-ink-400);
  transition: transform var(--mh-transition-base);
  align-self: flex-start;
  padding-top: 2px;
}

.mh-timeline-item.is-expanded .mh-timeline-item__chevron {
  transform: rotate(180deg);
}

.mh-timeline-item__body {
  padding: 0 var(--mh-space-5) var(--mh-space-5);
  border-top: 1px solid var(--mh-cream-300);
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mh-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-4) var(--mh-space-6);
  padding: var(--mh-space-5) 0;
}

.mh-detail-block {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-1);
}

.mh-detail-block__label {
  font-size: var(--mh-text-xs);
  color: var(--mh-gold-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.mh-detail-block__content {
  color: var(--mh-ink-900);
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-relaxed);
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .mh-detail-grid {
    grid-template-columns: 1fr;
    padding: var(--mh-space-4) 0;
  }
}

.mh-timeline-item__actions {
  display: flex;
  gap: var(--mh-space-2);
  padding-top: var(--mh-space-4);
  border-top: 1px dashed var(--mh-cream-300);
  margin-top: var(--mh-space-2);
}

/* ============ Attachments en timeline ============ */

.mh-attachments {
  margin-top: var(--mh-space-4);
  padding-top: var(--mh-space-4);
  border-top: 1px dashed var(--mh-cream-300);
}

.mh-attachments__title {
  font-size: var(--mh-text-xs);
  color: var(--mh-gold-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--mh-space-3);
}

.mh-attachments-list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-attachment {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  padding: var(--mh-space-2);
  background: var(--mh-cream-100);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  transition: all var(--mh-transition-fast);
}

.mh-attachment:hover {
  background: var(--mh-cream-200);
  border-color: var(--mh-green-300);
}

.mh-attachment__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-2);
  border-radius: var(--mh-radius-sm);
  min-width: 0;
}

.mh-attachment__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.mh-attachment__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mh-attachment__info strong {
  color: var(--mh-green-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-attachment__info small {
  font-size: var(--mh-text-xs);
}

/* ============ Consultation form ============ */

.mh-consult-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mh-space-4);
  padding-bottom: var(--mh-space-4);
  margin-bottom: var(--mh-space-5);
  border-bottom: 1px solid var(--mh-cream-300);
}

.mh-consult-meta > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-consult-meta strong {
  font-size: var(--mh-text-base);
  color: var(--mh-green-900);
}

.mh-consult-meta__date {
  flex: 0 0 220px;
}

.mh-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.mh-text-xs {
  font-size: var(--mh-text-xs);
}

@media (max-width: 640px) {
  .mh-consult-meta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mh-space-3);
  }

  .mh-consult-meta__date {
    flex: none;
  }
}

/* ============ Attach section (en form modal) ============ */

.mh-attach-section {
  margin-top: var(--mh-space-5);
  padding-top: var(--mh-space-5);
  border-top: 1px dashed var(--mh-cream-300);
}

.mh-attach-section__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--mh-space-3);
}

.mh-attach-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2);
  padding: var(--mh-space-4);
  background: var(--mh-cream-100);
  color: var(--mh-green-700);
  border: 2px dashed var(--mh-cream-400);
  border-radius: var(--mh-radius-md);
  font-weight: 500;
  font-size: var(--mh-text-sm);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-attach-add:hover {
  background: var(--mh-cream-200);
  border-color: var(--mh-green-300);
  color: var(--mh-green-900);
}

.mh-attach-add svg {
  width: 18px;
  height: 18px;
}

.mh-pending-files {
  margin-top: var(--mh-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-pending-file {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  background: var(--mh-green-50);
  border: 1px solid var(--mh-green-100);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
}

.mh-pending-file__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mh-pending-file__name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--mh-green-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-pending-file__size {
  color: var(--mh-ink-500);
  font-size: var(--mh-text-xs);
  flex-shrink: 0;
}

/* ============ Empty state ============ */

.mh-empty--lg {
  padding: var(--mh-space-16) var(--mh-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-space-4);
  text-align: center;
}

.mh-empty__icon {
  font-size: 3rem;
  opacity: 0.6;
}

/* ============ Responsive timeline ============ */

@media (max-width: 640px) {
  .mh-timeline-list {
    padding-left: var(--mh-space-5);
  }

  .mh-timeline-item__dot {
    left: -23px;
    width: 20px;
    height: 20px;
  }

  .mh-timeline-item__head {
    padding: var(--mh-space-3) var(--mh-space-4);
  }

  .mh-timeline-item__body {
    padding: 0 var(--mh-space-4) var(--mh-space-4);
  }

  .mh-timeline-item__actions {
    flex-direction: column;
  }

  .mh-timeline-item__actions .mh-btn {
    width: 100%;
  }

  .mh-attachment__link {
    padding: var(--mh-space-1);
  }

  .mh-timeline__header {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-timeline__header .mh-btn {
    width: 100%;
  }
}

/* =====================================================================
   FASE 5 — Vacunación, Recetas, Certificados
   ===================================================================== */

/* ============ VaccinationsTab ============ */

.mh-vaccinations {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-5);
}

.mh-vaccinations__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-vaccinations__actions {
  display: flex;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

/* ============ Tabla de vacunación ============ */

.mh-vacc-table th,
.mh-vacc-table td {
  padding: var(--mh-space-3) var(--mh-space-3);
  vertical-align: middle;
}

.mh-vacc-table tbody tr {
  border-bottom: 1px solid var(--mh-cream-300);
}

.mh-vacc-table tbody tr:hover {
  background: var(--mh-cream-50);
}

/* ============ Status pills ============ */

.mh-vacc-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-xs);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.mh-vacc-status--ok {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-vacc-status--upcoming {
  background: #FFF9EE;
  color: var(--mh-gold-600);
}

.mh-vacc-status--urgent {
  background: #FFEFE0;
  color: #D4691B;
}

.mh-vacc-status--overdue {
  background: #FBE9E0;
  color: var(--mh-coral-600);
}

.mh-vacc-status--muted {
  background: var(--mh-cream-200);
  color: var(--mh-ink-500);
}

/* ============ Info banner (en modal de aplicar vacuna) ============ */

.mh-info-banner {
  padding: var(--mh-space-3) var(--mh-space-4);
  background: var(--mh-green-100);
  border-left: 3px solid var(--mh-green-500);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  color: var(--mh-green-900);
  line-height: var(--mh-leading-relaxed);
}

.mh-info-banner strong {
  font-weight: 600;
}

/* ============ Responsive ============ */

@media (max-width: 640px) {
  .mh-vaccinations__header {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-vaccinations__actions {
    flex-direction: column;
    width: 100%;
  }

  .mh-vaccinations__actions .mh-btn {
    width: 100%;
  }

  .mh-vacc-table {
    min-width: 700px;
  }
}

/* =====================================================================
   FASE 6 — Agenda + Peluquería
   ===================================================================== */

/* ============ Toolbar de agenda ============ */

.mh-agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-4);
  padding: var(--mh-space-3) var(--mh-space-4);
  margin-bottom: var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-agenda-toolbar__nav {
  display: flex;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

.mh-agenda-toolbar__week {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mh-text-lg);
  color: var(--mh-green-900);
  flex: 1;
  text-align: center;
  min-width: 200px;
}

.mh-agenda-toolbar__filter {
  min-width: 200px;
}

/* ============ Grilla semanal ============ */

.mh-agenda-wrapper {
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mh-agenda-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, 1fr);
  min-width: 880px;
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  overflow: hidden;
}

/* Header de días */

.mh-agenda-grid__corner {
  background: var(--mh-cream-100);
  border-bottom: 1px solid var(--mh-cream-300);
  border-right: 1px solid var(--mh-cream-300);
}

.mh-agenda-grid__day-header {
  background: var(--mh-cream-100);
  padding: var(--mh-space-3) var(--mh-space-2);
  text-align: center;
  border-bottom: 1px solid var(--mh-cream-300);
  border-right: 1px solid var(--mh-cream-300);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-agenda-grid__day-header:last-child {
  border-right: none;
}

.mh-agenda-grid__day-header.is-today {
  background: var(--mh-green-50);
  border-bottom-color: var(--mh-gold-500);
  border-bottom-width: 2px;
}

.mh-agenda-grid__day-name {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.mh-agenda-grid__day-num {
  font-family: var(--mh-font-display);
  font-style: italic;
  font-size: var(--mh-text-xl);
  font-weight: 400;
  color: var(--mh-green-900);
}

.mh-agenda-grid__day-header.is-today .mh-agenda-grid__day-num {
  color: var(--mh-gold-600);
}

/* Filas de horas */

.mh-agenda-grid__hour {
  padding: var(--mh-space-2);
  text-align: right;
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  font-weight: 500;
  border-bottom: 1px solid var(--mh-cream-300);
  border-right: 1px solid var(--mh-cream-300);
  background: var(--mh-cream-50);
}

.mh-agenda-grid__cell {
  min-height: 64px;
  border-bottom: 1px solid var(--mh-cream-300);
  border-right: 1px solid var(--mh-cream-300);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background var(--mh-transition-fast);
  background: var(--mh-white);
}

.mh-agenda-grid__cell:hover {
  background: var(--mh-cream-50);
}

.mh-agenda-grid__cell.is-past {
  background: var(--mh-cream-100);
}

.mh-agenda-grid__cell:nth-child(8n) {
  border-right: none;
}

/* ============ Chip de turno ============ */

.mh-appt-chip {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 4px 6px;
  background: var(--mh-green-50);
  border-left: 3px solid var(--mh-green-500);
  border-radius: var(--mh-radius-sm);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--mh-transition-fast);
  gap: 4px;
}

.mh-appt-chip:hover {
  transform: translateX(2px);
  box-shadow: var(--mh-shadow-xs);
}

.mh-appt-chip__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}

.mh-appt-chip__time {
  font-weight: 600;
  color: var(--mh-green-900);
}

.mh-appt-chip__icon {
  font-size: 11px;
}

.mh-appt-chip__pet {
  color: var(--mh-ink-900);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mh-appt-chip__vet {
  color: var(--mh-ink-500);
  font-size: 10px;
}

/* Variants por tipo */

.mh-appt-chip--peluqueria {
  background: #FFF9EE;
  border-left-color: var(--mh-gold-500);
}

.mh-appt-chip--peluqueria .mh-appt-chip__time {
  color: var(--mh-gold-600);
}

/* Variants por status */

.mh-appt-chip--completado {
  opacity: 0.75;
  background: var(--mh-cream-200);
  border-left-color: var(--mh-ink-400);
  text-decoration: line-through;
  text-decoration-color: var(--mh-ink-400);
}

.mh-appt-chip--cancelado {
  opacity: 0.5;
  background: #FBE9E0;
  border-left-color: var(--mh-coral-500);
  text-decoration: line-through;
}

/* Menu del chip */

.mh-appt-chip__menu-btn {
  width: 18px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--mh-ink-400);
  cursor: pointer;
  border-radius: var(--mh-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--mh-transition-fast);
  flex-shrink: 0;
}

.mh-appt-chip__menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--mh-ink-700);
}

.mh-appt-chip__menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  box-shadow: var(--mh-shadow-lg);
  padding: 4px;
  z-index: var(--mh-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  animation: slideUp 0.15s ease;
}

.mh-appt-chip__menu button {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--mh-radius-sm);
  text-align: left;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
  cursor: pointer;
  transition: background var(--mh-transition-fast);
  white-space: nowrap;
}

.mh-appt-chip__menu button:hover {
  background: var(--mh-cream-100);
  color: var(--mh-green-900);
}

/* ============ Peluquería tab ============ */

.mh-grooming {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-5);
}

.mh-grooming__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mh-space-4);
  flex-wrap: wrap;
}

.mh-grooming-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}

.mh-grooming-alert {
  align-items: flex-start;
}

.mh-grooming-alert__body {
  flex: 1;
  min-width: 0;
}

.mh-grooming-alert__meta {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  margin-top: var(--mh-space-1);
  font-style: italic;
}

/* ============ Alerta coral (de peluquería para vet) ============ */

.mh-alert--coral {
  background: #FBE9E0;
  border-left: 3px solid var(--mh-coral-500);
  color: var(--mh-ink-700);
}

.mh-alert--coral svg {
  color: var(--mh-coral-600);
}

.mh-alert--coral strong {
  color: var(--mh-coral-600);
}

/* ============ Chip de alerta ============ */

.mh-chip--alert {
  background: #FBE9E0;
  color: var(--mh-coral-600);
  font-weight: 600;
}

/* ============ Alert section (en form modal) ============ */

.mh-alert-section {
  margin-top: var(--mh-space-4);
  padding: var(--mh-space-4);
  background: #FFF9EE;
  border: 1px solid var(--mh-gold-300);
  border-radius: var(--mh-radius-md);
}

.mh-alert-section__header {
  margin-bottom: var(--mh-space-2);
}

.mh-alert-section__header .mh-field__label {
  color: var(--mh-gold-600);
  font-weight: 600;
}

.mh-alert-textarea {
  background: var(--mh-white);
}

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .mh-agenda-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-agenda-toolbar__week {
    text-align: center;
    order: -1;
  }

  .mh-agenda-toolbar__filter {
    min-width: 0;
    width: 100%;
  }

  .mh-agenda-toolbar__nav {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .mh-agenda-grid {
    min-width: 720px;
  }

  .mh-agenda-grid__day-header {
    padding: var(--mh-space-2) 4px;
  }

  .mh-agenda-grid__day-name {
    font-size: 10px;
  }

  .mh-agenda-grid__day-num {
    font-size: var(--mh-text-base);
  }

  .mh-agenda-grid__hour {
    font-size: 10px;
    padding: 4px;
  }

  .mh-agenda-grid__cell {
    min-height: 52px;
    padding: 2px;
  }

  .mh-appt-chip {
    font-size: 10px;
    padding: 3px 4px;
  }

  .mh-appt-chip__time {
    font-size: 10px;
  }

  .mh-grooming__header {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-grooming__header .mh-btn {
    width: 100%;
  }
}

/* =====================================================================
   FASE 7 — Dashboard + Reportes
   ===================================================================== */

/* ============ Stats row (dashboard) ============ */

.mh-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mh-space-4);
  margin-bottom: var(--mh-space-6);
}

.mh-stat-card {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-lg);
  padding: var(--mh-space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-space-2);
  text-align: left;
  transition: all var(--mh-transition-fast);
}

.mh-stat-card--clickable {
  cursor: pointer;
}

.mh-stat-card--clickable:hover {
  border-color: var(--mh-green-300);
  box-shadow: var(--mh-shadow-md);
  transform: translateY(-2px);
}

.mh-stat-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mh-green-50);
  border-radius: var(--mh-radius-md);
  color: var(--mh-green-700);
}

.mh-stat-card__icon svg {
  width: 20px;
  height: 20px;
}

.mh-stat-card__value {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-4xl);
  font-weight: 400;
  color: var(--mh-green-900);
  line-height: 1;
}

.mh-stat-card__label {
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
}

/* ============ Dashboard columns ============ */

.mh-dashboard-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-5);
  margin-bottom: var(--mh-space-5);
}

.mh-dash-section {
  display: flex;
  flex-direction: column;
}

.mh-dash-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mh-space-3);
  margin-bottom: var(--mh-space-4);
}

.mh-dash-section__header .mh-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
}

.mh-dash-section__header .mh-section-title svg {
  width: 18px;
  height: 18px;
  color: var(--mh-gold-600);
}

.mh-dash-badges {
  display: flex;
  gap: var(--mh-space-2);
}

/* ============ Dashboard lists ============ */

.mh-dash-list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-dash-appt,
.mh-dash-vacc {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-3);
  border-radius: var(--mh-radius-md);
  background: var(--mh-cream-50);
  cursor: pointer;
  transition: background var(--mh-transition-fast);
}

.mh-dash-appt:hover,
.mh-dash-vacc:hover {
  background: var(--mh-cream-100);
}

.mh-dash-appt--cancelado {
  opacity: 0.55;
}

.mh-dash-appt__time {
  font-weight: 600;
  color: var(--mh-green-900);
  font-size: var(--mh-text-sm);
  min-width: 44px;
}

.mh-dash-appt__icon,
.mh-dash-vacc__emoji {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mh-dash-appt__info,
.mh-dash-vacc__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mh-dash-appt__info strong,
.mh-dash-vacc__info strong {
  color: var(--mh-green-900);
}

.mh-dash-appt__info span,
.mh-dash-vacc__info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-dash-vacc__due {
  flex-shrink: 0;
}

.mh-dash-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
}

.mh-empty--soft {
  padding: var(--mh-space-6);
  text-align: center;
  color: var(--mh-ink-400);
  font-size: var(--mh-text-sm);
}

/* ============ Reportes: revenue cards ============ */

.mh-revenue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mh-space-4);
  margin-bottom: var(--mh-space-5);
}

.mh-revenue-card {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-lg);
  padding: var(--mh-space-5);
  border-top: 3px solid var(--mh-cream-400);
}

.mh-revenue-card--green {
  border-top-color: var(--mh-green-500);
}

.mh-revenue-card--gold {
  border-top-color: var(--mh-gold-500);
}

.mh-revenue-card--dark.is-highlight {
  background: var(--mh-green-900);
  border-color: var(--mh-green-900);
  border-top-color: var(--mh-gold-500);
}

.mh-revenue-card__header {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  margin-bottom: var(--mh-space-3);
}

.mh-revenue-card__icon {
  font-size: 1.25rem;
}

.mh-revenue-card__title {
  font-size: var(--mh-text-sm);
  font-weight: 600;
  color: var(--mh-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.is-highlight .mh-revenue-card__title {
  color: var(--mh-gold-400);
}

.mh-revenue-card__amount {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-4xl);
  font-weight: 400;
  color: var(--mh-green-900);
  line-height: 1.1;
}

.is-highlight .mh-revenue-card__amount {
  color: var(--mh-cream-100);
}

.mh-revenue-card__count {
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
  margin-top: var(--mh-space-1);
}

.is-highlight .mh-revenue-card__count {
  color: var(--mh-cream-300);
}

/* ============ Report sections ============ */

.mh-report-section {
  margin-bottom: var(--mh-space-5);
}

.mh-report-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-5);
}

/* ============ Revenue split bar ============ */

.mh-split {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

.mh-split__bar {
  display: flex;
  height: 32px;
  border-radius: var(--mh-radius-full);
  overflow: hidden;
  background: var(--mh-cream-200);
}

.mh-split__segment {
  height: 100%;
  transition: width 0.6s ease;
}

.mh-split__segment--clinic {
  background: var(--mh-green-500);
}

.mh-split__segment--grooming {
  background: var(--mh-gold-500);
}

.mh-split__legend {
  display: flex;
  gap: var(--mh-space-5);
  flex-wrap: wrap;
}

.mh-split__legend-item {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
}

.mh-split__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--mh-radius-sm);
  flex-shrink: 0;
}

.mh-split__dot--clinic {
  background: var(--mh-green-500);
}

.mh-split__dot--grooming {
  background: var(--mh-gold-500);
}

/* ============ Trend chart ============ */

.mh-trend {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

.mh-trend__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--mh-space-3);
  height: 200px;
  padding-top: var(--mh-space-4);
}

.mh-trend__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-space-2);
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}

.mh-trend__bar-wrap {
  width: 100%;
  max-width: 56px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mh-trend__stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--mh-radius-sm) var(--mh-radius-sm) 0 0;
  overflow: hidden;
  min-height: 4px;
  transition: height 0.6s ease;
}

.mh-trend__seg--clinic {
  background: var(--mh-green-500);
}

.mh-trend__seg--grooming {
  background: var(--mh-gold-500);
}

.mh-trend__label {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-transform: capitalize;
  white-space: nowrap;
}

.mh-trend__value {
  font-size: 10px;
  color: var(--mh-ink-400);
  white-space: nowrap;
}

/* ============ Top list ============ */

.mh-top-list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-top-item {
  display: flex;
  align-items: center;
  gap: var(--mh-space-3);
  padding: var(--mh-space-2) var(--mh-space-3);
  border-radius: var(--mh-radius-md);
  background: var(--mh-cream-50);
}

.mh-top-item__rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mh-green-100);
  color: var(--mh-green-700);
  border-radius: var(--mh-radius-full);
  font-weight: 600;
  font-size: var(--mh-text-sm);
  flex-shrink: 0;
}

.mh-top-item__name {
  flex: 1;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-900);
}

.mh-top-item__count {
  font-weight: 600;
  color: var(--mh-green-900);
}

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .mh-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .mh-dashboard-columns,
  .mh-report-columns {
    grid-template-columns: 1fr;
  }

  .mh-revenue-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mh-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--mh-space-3);
  }

  .mh-stat-card {
    padding: var(--mh-space-4);
  }

  .mh-stat-card__value {
    font-size: var(--mh-text-3xl);
  }

  .mh-trend__bars {
    height: 160px;
    gap: var(--mh-space-1);
  }

  .mh-trend__value {
    display: none;
  }

  .mh-split__legend {
    flex-direction: column;
    gap: var(--mh-space-2);
  }
}

/* ============ Reportes: color "tienda" / shop (coral) ============ */

.mh-revenue-card--coral {
  border-top-color: #C9682F;
}

.mh-split__segment--shop {
  background: #C9682F;
}

.mh-split__dot--shop {
  background: #C9682F;
}

.mh-trend__seg--shop {
  background: #C9682F;
}

/* =====================================================================
   FASE 8 — Configuración + Plantillas WhatsApp
   ===================================================================== */

.mh-config-section {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

/* ============ Form de clínica ============ */

.mh-config-form {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-5);
}

.mh-config-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--mh-space-4);
  border-top: 1px solid var(--mh-cream-300);
}

/* ============ Template grid ============ */

.mh-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--mh-space-4);
}

.mh-template-card {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  padding: var(--mh-space-5);
}

.mh-template-card.is-inactive {
  opacity: 0.6;
}

.mh-template-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mh-space-2);
}

.mh-template-card__header > div {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

.mh-template-card__name {
  color: var(--mh-green-900);
  font-size: var(--mh-text-base);
}

.mh-template-card__name + .mh-tag {
  margin-left: 0;
}

.mh-template-card__msg {
  flex: 1;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
  line-height: var(--mh-leading-relaxed);
  background: var(--mh-cream-50);
  padding: var(--mh-space-3);
  border-radius: var(--mh-radius-md);
  border-left: 2px solid var(--mh-green-300);
  white-space: pre-wrap;
}

.mh-template-card__actions {
  display: flex;
  gap: var(--mh-space-1);
  justify-content: flex-end;
  padding-top: var(--mh-space-2);
  border-top: 1px solid var(--mh-cream-200);
}

/* ============ Placeholder chips ============ */

.mh-placeholder-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-space-2);
  margin-top: var(--mh-space-3);
}

.mh-placeholder-chip {
  padding: 4px 10px;
  background: var(--mh-green-50);
  border: 1px solid var(--mh-green-100);
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-xs);
  font-family: var(--mh-font-mono, monospace);
  color: var(--mh-green-700);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-placeholder-chip:hover {
  background: var(--mh-green-100);
  border-color: var(--mh-green-300);
}

/* code inline */

code {
  font-family: var(--mh-font-mono, monospace);
  font-size: 0.9em;
  background: var(--mh-cream-200);
  padding: 1px 5px;
  border-radius: var(--mh-radius-sm);
  color: var(--mh-green-700);
}

/* ============ Responsive ============ */

@media (max-width: 640px) {
  .mh-template-grid {
    grid-template-columns: 1fr;
  }

  .mh-config-form__actions .mh-btn {
    width: 100%;
  }

  .mh-page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-page-toolbar .mh-btn,
  .mh-page-toolbar .mh-select {
    width: 100%;
    max-width: 100% !important;
  }
}

/* =====================================================================
   F8.5 — Workflow Agenda integrado, Vista Día/Semana, Items breakdown
   ===================================================================== */

/* ============ Toggle día/semana ============ */

.mh-agenda-toolbar__filters {
  display: flex;
  gap: var(--mh-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.mh-toggle-group {
  display: inline-flex;
  background: var(--mh-cream-100);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  padding: 3px;
  gap: 2px;
}

.mh-toggle {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: var(--mh-radius-sm);
  font-size: var(--mh-text-sm);
  font-weight: 500;
  color: var(--mh-ink-500);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-toggle:hover {
  color: var(--mh-green-900);
}

.mh-toggle.is-active {
  background: var(--mh-white);
  color: var(--mh-green-900);
  box-shadow: var(--mh-shadow-xs);
  font-weight: 600;
}

/* ============ Stats del día ============ */

.mh-day-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mh-space-3);
  margin-bottom: var(--mh-space-4);
}

.mh-day-stats__item {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  padding: var(--mh-space-3) var(--mh-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-day-stats__item strong {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-2xl);
  color: var(--mh-green-900);
  font-weight: 400;
  line-height: 1;
}

.mh-day-stats__item span {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
  text-transform: lowercase;
}

/* ============ Vista DÍA ============ */

.mh-day-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
  overflow: hidden;
}

.mh-day-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  min-height: 56px;
  border-bottom: 1px solid var(--mh-cream-200);
  cursor: pointer;
  transition: background var(--mh-transition-fast);
}

.mh-day-row:last-child {
  border-bottom: none;
}

.mh-day-row:hover {
  background: var(--mh-cream-50);
}

.mh-day-row.is-past {
  background: var(--mh-cream-100);
}

.mh-day-row.is-past:hover {
  background: var(--mh-cream-200);
}

.mh-day-row__time {
  padding: var(--mh-space-3);
  text-align: right;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
  font-weight: 500;
  border-right: 1px solid var(--mh-cream-200);
  background: var(--mh-cream-50);
}

.mh-day-row.is-past .mh-day-row__time {
  background: var(--mh-cream-100);
}

.mh-day-row__slot {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 56px;
}

/* ============ Card de turno en vista DÍA ============ */

.mh-day-appt {
  width: 100%;
  text-align: left;
  background: var(--mh-green-50);
  border: 1px solid var(--mh-green-100);
  border-left: 3px solid var(--mh-green-500);
  border-radius: var(--mh-radius-md);
  padding: var(--mh-space-3);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-day-appt:hover {
  transform: translateX(2px);
  box-shadow: var(--mh-shadow-sm);
}

.mh-day-appt--peluqueria {
  background: #FFF9EE;
  border-color: var(--mh-gold-300);
  border-left-color: var(--mh-gold-500);
}

.mh-day-appt--completado {
  opacity: 0.7;
  background: var(--mh-cream-100);
  border-left-color: var(--mh-ink-400);
}

.mh-day-appt--cancelado {
  opacity: 0.5;
  background: #FBE9E0;
  border-left-color: var(--mh-coral-500);
  text-decoration: line-through;
}

.mh-day-appt__head {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  flex-wrap: wrap;
}

.mh-day-appt__time {
  font-weight: 600;
  color: var(--mh-green-900);
}

.mh-day-appt--peluqueria .mh-day-appt__time {
  color: var(--mh-gold-600);
}

.mh-day-appt__duration {
  font-size: var(--mh-text-xs);
  color: var(--mh-ink-500);
}

.mh-day-appt__body strong {
  color: var(--mh-ink-900);
}

.mh-day-appt__notes {
  margin-top: 4px;
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-500);
  font-style: italic;
}

.mh-tag--xs {
  font-size: 10px;
  padding: 1px 6px;
}

/* ============ Items breakdown ============ */

.mh-items {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  padding: var(--mh-space-4);
  background: var(--mh-cream-50);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
}

.mh-items__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mh-items__header .mh-field__label {
  color: var(--mh-green-900);
  font-weight: 600;
}

.mh-items__empty {
  padding: var(--mh-space-2);
}

.mh-items__list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-items__row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: var(--mh-space-2);
  align-items: center;
}

.mh-items__desc {
  padding: 8px 12px;
  border: 1px solid var(--mh-cream-400);
  background: var(--mh-white);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  font-family: inherit;
  color: var(--mh-ink-900);
}

.mh-items__desc:focus {
  outline: none;
  border-color: var(--mh-green-500);
  box-shadow: 0 0 0 3px rgba(46, 95, 75, 0.15);
}

.mh-items__amount-wrap {
  display: flex;
  align-items: center;
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-400);
  border-radius: var(--mh-radius-md);
  overflow: hidden;
}

.mh-items__amount-wrap:focus-within {
  border-color: var(--mh-green-500);
  box-shadow: 0 0 0 3px rgba(46, 95, 75, 0.15);
}

.mh-items__amount-prefix {
  padding: 0 4px 0 10px;
  color: var(--mh-ink-500);
  font-weight: 600;
}

.mh-items__amount {
  width: 100%;
  padding: 8px 10px 8px 4px;
  border: none;
  background: transparent;
  font-size: var(--mh-text-sm);
  font-family: inherit;
  color: var(--mh-ink-900);
  text-align: right;
}

.mh-items__amount:focus {
  outline: none;
}

/* Sugerencias rápidas */

.mh-items__suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-space-2);
  padding-top: var(--mh-space-2);
  border-top: 1px solid var(--mh-cream-300);
}

.mh-items__suggestion {
  padding: 4px 10px;
  background: var(--mh-white);
  border: 1px solid var(--mh-green-200);
  border-radius: var(--mh-radius-full);
  font-size: var(--mh-text-xs);
  color: var(--mh-green-700);
  cursor: pointer;
  transition: all var(--mh-transition-fast);
}

.mh-items__suggestion:hover {
  background: var(--mh-green-50);
  border-color: var(--mh-green-400);
}

.mh-items__suggestion--blank {
  background: var(--mh-cream-100);
  border-color: var(--mh-cream-400);
  color: var(--mh-ink-700);
}

/* Total */

.mh-items__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mh-space-3) var(--mh-space-4);
  margin: var(--mh-space-2) calc(var(--mh-space-4) * -1) calc(var(--mh-space-4) * -1);
  background: var(--mh-green-900);
  color: var(--mh-cream-100);
  border-radius: 0 0 var(--mh-radius-md) var(--mh-radius-md);
  font-size: var(--mh-text-base);
}

.mh-items__total strong {
  font-family: var(--mh-font-display);
  font-size: var(--mh-text-xl);
  font-weight: 400;
  color: var(--mh-gold-400);
}

/* ============ Modal de ejecución ============ */

/* FIX: cuando hay un form como hijo directo del modal,
   tiene que comportarse como flex container para que el body
   pueda hacer scroll correctamente (flex:1 + min-height:0). */

.mh-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mh-appt-exec__info {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-4);
  padding: var(--mh-space-4) var(--mh-space-5);
  background: var(--mh-cream-50);
  border-bottom: 1px solid var(--mh-cream-300);
  flex-wrap: wrap;
  flex-shrink: 0;  /* no se comprime aunque haya poco espacio */
}

.mh-appt-exec__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  font-size: var(--mh-text-sm);
  color: var(--mh-ink-700);
  width: 100%;
}

.mh-appt-exec__time {
  font-weight: 600;
  color: var(--mh-green-900);
  text-transform: capitalize;
}

.mh-appt-exec__sep {
  color: var(--mh-ink-400);
}

.mh-appt-exec__type--clinica {
  color: var(--mh-green-700);
  font-weight: 600;
}

.mh-appt-exec__type--peluqueria {
  color: var(--mh-gold-600);
  font-weight: 600;
}

.mh-appt-exec__pet {
  flex: 1;
  min-width: 200px;
  font-size: var(--mh-text-base);
}

.mh-appt-exec__pet strong {
  color: var(--mh-green-900);
  font-size: var(--mh-text-lg);
}

.mh-appt-exec__footer-left {
  flex: 1;
}

/* Summary post-ejecución */

.mh-exec-summary {
  margin-top: var(--mh-space-4);
  padding: var(--mh-space-4);
  background: var(--mh-cream-50);
  border-radius: var(--mh-radius-md);
}

.mh-exec-summary ul {
  margin-top: var(--mh-space-2);
  list-style: none;
  padding: 0;
}

.mh-exec-summary li {
  display: flex;
  justify-content: space-between;
  padding: var(--mh-space-2) 0;
  border-bottom: 1px dashed var(--mh-cream-300);
  font-size: var(--mh-text-sm);
}

.mh-exec-summary li:last-child {
  border-bottom: none;
}

.mh-alert--success {
  background: var(--mh-green-50);
  border-left: 3px solid var(--mh-green-500);
  color: var(--mh-green-900);
  padding: var(--mh-space-4);
  border-radius: var(--mh-radius-md);
}

.mh-alert--muted {
  background: var(--mh-cream-100);
  border-left: 3px solid var(--mh-ink-400);
  color: var(--mh-ink-700);
  padding: var(--mh-space-4);
  border-radius: var(--mh-radius-md);
}

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .mh-day-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mh-items__row {
    grid-template-columns: 1fr;
    gap: var(--mh-space-2);
    padding: var(--mh-space-3);
    background: var(--mh-white);
    border-radius: var(--mh-radius-md);
  }

  .mh-items__amount-wrap {
    width: 100%;
  }

  .mh-appt-exec__info {
    flex-direction: column;
    gap: var(--mh-space-3);
  }
}

@media (max-width: 640px) {
  .mh-day-row__time {
    font-size: var(--mh-text-xs);
    padding: var(--mh-space-2);
  }

  .mh-day-row {
    grid-template-columns: 60px 1fr;
  }
}

/* ============ VaccinesApplied ============ */

.mh-vacc-applied {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-3);
  padding: var(--mh-space-4);
  background: #F4F8F1;                         /* verde MUY suave para diferenciar */
  border: 1px solid var(--mh-green-100);
  border-left: 3px solid var(--mh-green-500);
  border-radius: var(--mh-radius-md);
}

.mh-vacc-applied__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-vacc-applied__header .mh-field__label {
  color: var(--mh-green-900);
  font-weight: 600;
}

.mh-vacc-applied__list {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-vacc-applied__row {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: var(--mh-space-2);
  align-items: center;
  padding: var(--mh-space-2) var(--mh-space-3);
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: var(--mh-radius-md);
}

.mh-vacc-applied__name strong {
  color: var(--mh-green-900);
  font-size: var(--mh-text-sm);
}

.mh-vacc-applied__batch {
  padding: 6px 10px;
  border: 1px solid var(--mh-cream-400);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-text-sm);
  font-family: inherit;
}

.mh-vacc-applied__batch:focus {
  outline: none;
  border-color: var(--mh-green-500);
  box-shadow: 0 0 0 3px rgba(46, 95, 75, 0.15);
}

.mh-vacc-applied__adder {
  display: flex;
  gap: var(--mh-space-2);
  align-items: center;
}

.mh-vacc-applied__adder .mh-select {
  flex: 1;
}

@media (max-width: 700px) {
  .mh-vacc-applied__row {
    grid-template-columns: 1fr;
    gap: var(--mh-space-2);
  }
  .mh-vacc-applied__adder {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =====================================================================
   Iconos SVG — ajustes de tamaño/alineación cuando reemplazan emojis
   ===================================================================== */

/* Helper: label con icono inline */

.mh-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mh-with-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Celda de tabla con icono de especie + nombre */

.mh-species-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mh-species-cell svg {
  width: 18px;
  height: 18px;
  color: var(--mh-ink-500);
  flex-shrink: 0;
}

/* ============ Tags y chips con iconos ============ */

.mh-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mh-tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.mh-tag--xs svg {
  width: 10px;
  height: 10px;
}

.mh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mh-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ============ Avatar con icono ============ */

.mh-avatar--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mh-white);
}

.mh-avatar--icon svg {
  width: 55%;
  height: 55%;
  stroke-width: 1.6;
}

/* ============ Dashboard ============ */

.mh-dash-appt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mh-radius-md);
  background: var(--mh-green-50);
  color: var(--mh-green-700);
  flex-shrink: 0;
}

.mh-dash-appt__icon svg {
  width: 16px;
  height: 16px;
}

.mh-dash-vacc__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mh-radius-md);
  background: var(--mh-cream-100);
  color: var(--mh-ink-500);
  flex-shrink: 0;
}

.mh-dash-vacc__emoji svg {
  width: 16px;
  height: 16px;
}

/* ============ Stats del día (vista día Agenda) ============ */

/* Los items con icono ahora tienen layout flex */

.mh-day-stats__item--clinic,
.mh-day-stats__item--grooming {
  flex-direction: row;
  align-items: center;
  gap: var(--mh-space-3);
}

.mh-day-stats__item--clinic > div,
.mh-day-stats__item--grooming > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-day-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mh-radius-md);
  flex-shrink: 0;
}

.mh-day-stats__item--clinic .mh-day-stats__icon {
  background: var(--mh-green-50);
  color: var(--mh-green-700);
}

.mh-day-stats__item--grooming .mh-day-stats__icon {
  background: #FFF9EE;
  color: var(--mh-gold-600);
}

.mh-day-stats__icon svg {
  width: 18px;
  height: 18px;
}

/* ============ Cards de turnos en Agenda ============ */

.mh-day-appt__icon {
  display: inline-flex;
  align-items: center;
  color: var(--mh-green-700);
}

.mh-day-appt--peluqueria .mh-day-appt__icon {
  color: var(--mh-gold-600);
}

.mh-day-appt__icon svg {
  width: 14px;
  height: 14px;
}

.mh-appt-chip__icon {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

.mh-appt-chip__icon svg {
  width: 12px;
  height: 12px;
}

/* ============ Modal de ejecución ============ */

.mh-appt-exec__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mh-appt-exec__type svg {
  width: 14px;
  height: 14px;
}

/* Banner de success con icono */

.mh-alert--success {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-space-3);
}

.mh-alert--success > svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--mh-green-500);
  margin-top: 2px;
}

/* ============ Stat cards de Vacunación ============ */

.mh-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mh-stat-card__icon svg {
  width: 20px;
  height: 20px;
}

/* ============ Empty states grandes ============ */

.mh-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mh-cream-100);
  color: var(--mh-ink-400);
  margin: 0 auto var(--mh-space-3);
}

.mh-empty__icon svg {
  width: 32px;
  height: 32px;
}

/* ============ Revenue cards ============ */

.mh-revenue-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mh-radius-md);
  background: var(--mh-cream-100);
  color: var(--mh-ink-700);
}

.mh-revenue-card--green .mh-revenue-card__icon {
  background: var(--mh-green-50);
  color: var(--mh-green-700);
}

.mh-revenue-card--gold .mh-revenue-card__icon {
  background: #FFF9EE;
  color: var(--mh-gold-600);
}

.is-highlight .mh-revenue-card__icon {
  background: rgba(201, 169, 97, 0.15);
  color: var(--mh-gold-400);
}

.mh-revenue-card__icon svg {
  width: 18px;
  height: 18px;
}

/* ============ Toast ============ */

.mh-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mh-toast__icon svg {
  width: 18px;
  height: 18px;
}

/* ============ Vacunas aplicadas (form) ============ */

.mh-vacc-applied__header .mh-field__label svg {
  width: 16px;
  height: 16px;
  color: var(--mh-green-700);
}

/* ============ Alerta-section header (en grooming) ============ */

.mh-alert-section__header .mh-field__label svg {
  width: 16px;
  height: 16px;
  color: var(--mh-coral-600);
}

/* =====================================================================
   Fase 9 — WhatsApp send (botón + modal + integraciones)
   ===================================================================== */

/* ============ Botón tamaño extra-small ============ */

.mh-btn--xs {
  padding: 4px 8px;
  font-size: var(--mh-text-xs);
  gap: 4px;
  min-height: 26px;
  border-radius: var(--mh-radius-sm);
}

.mh-btn--xs svg {
  width: 14px;
  height: 14px;
}

/* ============ Botón WhatsApp — verde específico ============ */

.mh-btn--wa {
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.4);
}

.mh-btn--wa:hover:not(:disabled) {
  background: rgba(37, 211, 102, 0.08);
  border-color: #25d366;
  color: #128c7e;
}

.mh-btn--wa svg {
  color: currentColor;
}

/* Botón en header de mascota (compacto, al lado del teléfono) */

.mh-pet-header__wa-btn {
  margin-left: 8px;
  vertical-align: middle;
}

/* ============ Modal de envío ============ */

.mh-wa-recipient {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  padding: var(--mh-space-3) var(--mh-space-4);
  background: rgba(37, 211, 102, 0.06);
  border-left: 3px solid #25d366;
  border-radius: var(--mh-radius-md);
  margin-bottom: var(--mh-space-4);
  font-size: var(--mh-text-sm);
}

.mh-wa-recipient__label {
  color: var(--mh-ink-500);
}

.mh-wa-recipient strong {
  color: var(--mh-green-900);
  font-family: var(--mh-font-mono, monospace);
  font-size: var(--mh-text-base);
}

.mh-wa-recipient__warning {
  color: var(--mh-coral-600);
  font-style: italic;
}

/* Detalles colapsables de placeholders */

.mh-wa-vars {
  margin-top: var(--mh-space-4);
  font-size: var(--mh-text-sm);
}

.mh-wa-vars > summary {
  cursor: pointer;
  color: var(--mh-ink-500);
  padding: var(--mh-space-2) 0;
  user-select: none;
}

.mh-wa-vars > summary:hover {
  color: var(--mh-green-700);
}

.mh-wa-vars dl {
  margin-top: var(--mh-space-2);
  padding: var(--mh-space-3);
  background: var(--mh-cream-50);
  border-radius: var(--mh-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.mh-wa-var-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--mh-space-2);
  align-items: center;
}

.mh-wa-var-row dt {
  margin: 0;
}

.mh-wa-var-row dd {
  margin: 0;
  color: var(--mh-ink-900);
}

.mh-wa-var-row code {
  font-size: var(--mh-text-xs);
}

/* ============ Botón WA en lista de vacunas del Dashboard ============ */

.mh-dash-vacc__wa {
  flex-shrink: 0;
  margin-left: var(--mh-space-2);
}

/* ============ Botón WA en tabla ============ */

.mh-table__actions-col {
  width: 60px;
}

/* ============ Responsive ============ */

@media (max-width: 640px) {
  .mh-wa-var-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mh-pet-header__wa-btn {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* =====================================================================
   MECOHUE — RESPONSIVE
   Breakpoints:
   - 1024px (lg): tablet landscape
   - 900px  (md): tablet portrait — sidebar colapsa
   - 640px  (sm): mobile
   - 480px  (xs): mobile chico
   ===================================================================== */

/* ===================================================================
   TABLET (1024px)
   =================================================================== */

@media (max-width: 1024px) {
  .mh-page {
    padding: var(--mh-space-6) var(--mh-space-6);
  }

  .mh-pets-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ===================================================================
   TABLET PORTRAIT (900px) — sidebar mobile
   =================================================================== */

@media (max-width: 900px) {

  /* ============================================================
     ADMIN MOBILE — FIX FINAL
     Layout block + sin min-height para evitar stretches.
     Forzamos posicionamiento del sidebar con !important para
     que ninguna otra regla pueda hacer que ocupe espacio en el flow.
     ============================================================ */
  .mh-layout {
    display: block !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }

  .mh-layout__main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-width: 0;
    min-height: auto !important;
    display: block !important;
    width: 100% !important;
  }

  /* Forzar sidebar fixed para que NO ocupe espacio en el flow */
  .mh-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform var(--mh-transition-base);
    z-index: var(--mh-z-modal);
    overflow-y: auto;
  }

  .mh-layout--mobile-open .mh-sidebar {
    transform: translateX(0) !important;
  }

  /* Toggle button siempre visible en mobile */
  .mh-layout__menu-toggle {
    width: 42px;
    height: 42px;
    position: fixed !important;
    top: var(--mh-space-3);
    left: var(--mh-space-3);
    z-index: var(--mh-z-sticky);
  }

  /* ---- Page ---- */
  .mh-page {
    padding: var(--mh-space-4) var(--mh-space-4) !important;
    margin: 0 !important;
  }

  .mh-page-header {
    padding-left: 56px;
    min-height: 44px;
    margin-bottom: var(--mh-space-6);
    padding-bottom: var(--mh-space-4);
  }

  .mh-page-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .mh-page-subtitle {
    font-size: var(--mh-text-sm);
  }

  /* ---- Pets grid ---- */
  .mh-pets-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ===================================================================
   MOBILE (640px) — los cambios más importantes
   =================================================================== */

@media (max-width: 640px) {

  /* ---- Page header: stack vertical ---- */
  .mh-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mh-space-4);
  }

  .mh-page-actions {
    width: 100%;
  }

  .mh-page-actions .mh-btn {
    flex: 1;
    width: 100%;
  }

  /* ---- Toolbar: stack vertical ---- */
  .mh-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--mh-space-3);
    gap: var(--mh-space-3);
  }

  .mh-toolbar .mh-search-input {
    min-width: 0;
    width: 100%;
  }

  .mh-toolbar .mh-select {
    max-width: 100% !important;
    width: 100%;
  }

  /* ---- Pets grid: una columna ---- */
  .mh-pets-grid {
    grid-template-columns: 1fr;
    gap: var(--mh-space-3);
  }

  .mh-pet-card {
    padding: var(--mh-space-4);
    gap: var(--mh-space-3);
  }

  .mh-pet-card__name {
    font-size: var(--mh-text-xl);
  }

  /* ---- Pet detail header: stack ---- */
  .mh-pet-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mh-space-4);
    padding: var(--mh-space-5);
  }

  .mh-pet-header__avatar {
    align-self: center;
  }

  .mh-pet-header__name {
    font-size: var(--mh-text-3xl);
  }

  .mh-pet-header__actions {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
  }

  .mh-pet-header__actions .mh-btn {
    flex: 1;
    min-width: 130px;
  }

  /* ---- Tabs: padding más chico ---- */
  .mh-tabs {
    margin-left: calc(-1 * var(--mh-space-4));
    margin-right: calc(-1 * var(--mh-space-4));
    padding: 0 var(--mh-space-4);
  }

  .mh-tab {
    padding: var(--mh-space-3) var(--mh-space-3);
    font-size: var(--mh-text-xs);
  }

  /* ---- Summary grid: una columna ---- */
  .mh-summary-grid {
    grid-template-columns: 1fr;
    gap: var(--mh-space-4);
  }

  .mh-card {
    padding: var(--mh-space-4);
  }

  /* Data rows: stack ---- */
  .mh-data-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--mh-space-2) 0;
    border-bottom: 1px dashed var(--mh-cream-300);
  }

  .mh-data-row:last-child {
    border-bottom: none;
  }

  .mh-data-row dt {
    font-size: var(--mh-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ---- Family ---- */
  .mh-family__header {
    flex-direction: column;
    align-items: stretch;
  }

  .mh-family__header .mh-btn {
    width: 100%;
  }

  .mh-family-list {
    grid-template-columns: 1fr;
  }

  .mh-family-card__actions {
    flex-direction: column;
  }

  .mh-family-card__actions .mh-btn {
    width: 100%;
  }

  /* ---- Modal: full-screen estilo bottom-sheet ---- */
  .mh-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .mh-modal {
    max-width: 100% !important;
    max-height: 95vh;
    border-radius: var(--mh-radius-xl) var(--mh-radius-xl) 0 0;
    width: 100%;
    animation: slideUpMobile 0.3s ease;
  }

  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mh-modal__header {
    padding: var(--mh-space-4) var(--mh-space-5);
  }

  .mh-modal__body {
    padding: var(--mh-space-5) var(--mh-space-4);
  }

  .mh-modal__footer {
    padding: var(--mh-space-4);
    flex-direction: column-reverse;
    gap: var(--mh-space-2);
  }

  .mh-modal__footer .mh-btn {
    width: 100%;
  }

  /* ---- Form grids: una columna ---- */
  .mh-form-grid {
    grid-template-columns: 1fr;
    gap: var(--mh-space-4);
  }

  /* ---- Form tabs (dentro de modal): scroll horizontal ---- */
  .mh-form-tabs {
    overflow-x: auto;
    padding: 0 var(--mh-space-3);
    -webkit-overflow-scrolling: touch;
  }

  .mh-form-tab {
    padding: var(--mh-space-3) var(--mh-space-3);
    white-space: nowrap;
    font-size: var(--mh-text-xs);
  }

  /* ============================================================
     LISTAS / TABLAS / STATS — Mobile responsive
     ============================================================ */

  /* Header alternativo (mh-page__header) usado en tienda y ventas */
  .mh-page__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mh-space-3);
    margin-bottom: var(--mh-space-5);
    padding-bottom: var(--mh-space-4);
    padding-left: 56px;
    min-height: 44px;
  }

  .mh-page__title {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .mh-page__subtitle {
    font-size: var(--mh-text-sm);
  }

  /* Stats grid: máx 2 columnas en mobile */
  .mh-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    margin-bottom: 1rem;
  }
  .mh-stat-card {
    padding: 0.75rem 0.875rem;
  }
  .mh-stat-card__value {
    font-size: 1.375rem;
  }
  .mh-stat-card__label {
    font-size: 0.6875rem;
  }

  /* Stats grid: 1 columna full en pantallas muy chicas (≤400px) */
  @media (max-width: 400px) {
    .mh-stat-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Filters bar: stack vertical con children al 100% */
  .mh-filters-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem;
    gap: 0.625rem;
  }
  /* IMPORTANTE: resetear el flex de los hijos. Algunas páginas (ej.
     SalesListPage) tienen un <form> con style="flex: 1 1 240px" inline.
     En flex-direction: column ese 240px se interpreta como HEIGHT y empuja
     al form a ocupar todo el alto del container, mostrando el search input
     gigante. Forzamos flex:none + height:auto para neutralizar eso. */
  .mh-filters-bar > * {
    flex: none !important;
    width: 100%;
    min-width: 0;
    height: auto !important;
  }
  /* Si el filters-bar tiene un <form> inline con search + botón, mantener
     ese subgrupo en fila horizontal con el botón al lado del input */
  .mh-filters-bar form {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
  }
  .mh-filters-bar form > .mh-input,
  .mh-filters-bar form > input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mh-filters-bar form > .mh-btn {
    flex-shrink: 0;
  }
  /* Field internos quedan al 100% del ancho */
  .mh-filters-bar .mh-field {
    width: 100%;
  }
  .mh-filters-bar .mh-btn:not(form .mh-btn) {
    width: 100%;
  }

  /* ============================================================
     TABLAS — scroll horizontal con ancho total del viewport.
     El mh-table-wrap rompe el padding del page para usar el ancho
     completo del celular (sino quedaría con 32px laterales perdidos).
     ============================================================ */
  .mh-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Romper padding del page para tener el ancho completo */
    margin-left: calc(-1 * var(--mh-space-4));
    margin-right: calc(-1 * var(--mh-space-4));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    /* Indicador visual de que hay scroll horizontal */
    background:
      linear-gradient(to right, var(--mh-white) 30%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(to left,  var(--mh-white) 30%, rgba(255, 255, 255, 0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.1), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), transparent) right center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .mh-table {
    min-width: 480px;
    font-size: 0.8125rem;
  }
  .mh-table th,
  .mh-table td {
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
  }

  /* La primera columna queda pegada al borde izquierdo al scrollear,
     para que no perdás el contexto (ej: el nombre del cliente). */
  .mh-table thead th:first-child,
  .mh-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }
  .mh-table thead th:first-child {
    background: var(--mh-cream-100);
  }
  .mh-table tbody tr td:first-child {
    background: var(--mh-white);
  }
  .mh-table tbody tr:nth-child(even) td:first-child {
    background: var(--mh-cream-50, #FBF8F0);
  }

  /* Pagination compacta */
  .mh-table-pagination {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    align-items: stretch;
    text-align: center;
  }

  /* ---- Page filters card más compacto en mobile ---- */
  .mh-page-toolbar {
    padding: var(--mh-space-3);
  }

  /* ---- Sidebar más angosta cuando se abre en mobile ---- */
  .mh-sidebar {
    width: 280px;
    max-width: 85vw;
  }

  /* ---- Dashboard cards: una columna ---- */
  .mh-dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Toasts: full width ---- */
  .mh-toast-container {
    top: 70px;
    left: var(--mh-space-3);
    right: var(--mh-space-3);
  }

  .mh-toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  /* ---- Breadcrumbs: más chico ---- */
  .mh-breadcrumbs {
    font-size: var(--mh-text-xs);
  }

  /* ---- Owner summary: stack pa que se lea ---- */
  .mh-owner-summary__contact {
    flex-direction: column;
    gap: 2px;
  }

  /* ---- Alerts: padding más chico ---- */
  .mh-alert {
    padding: var(--mh-space-3);
    font-size: var(--mh-text-sm);
  }

  /* ---- Status card phases ---- */
  .mh-phase {
    padding: var(--mh-space-2);
    font-size: var(--mh-text-xs);
  }

  .mh-phase__check {
    width: 24px;
    height: 24px;
    font-size: var(--mh-text-xs);
  }

  /* ---- Login: stack vertical pero compacto ---- */
  .mh-login__hero {
    padding: var(--mh-space-6) var(--mh-space-4);
    min-height: auto;
  }

  .mh-login__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .mh-login__hero-text {
    font-size: var(--mh-text-base);
    margin-bottom: var(--mh-space-6);
  }

  .mh-login__features {
    gap: var(--mh-space-2);
  }

  .mh-login__form-side {
    padding: var(--mh-space-6) var(--mh-space-4);
  }

  .mh-login__form-title {
    font-size: var(--mh-text-3xl);
  }

  /* ---- User chip en sidebar: ocultar nombre largo ---- */
  .mh-sidebar__user-name {
    font-size: var(--mh-text-sm);
  }
}

/* ===================================================================
   MOBILE CHICO (480px)
   =================================================================== */

@media (max-width: 480px) {

  .mh-page {
    padding: var(--mh-space-4) var(--mh-space-3);
  }

  .mh-pet-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .mh-pet-card__body {
    align-items: center;
  }

  .mh-pet-card__meta {
    justify-content: center;
  }

  .mh-pet-card__alerts {
    justify-content: center;
  }

  /* Avatar más chico */
  .mh-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: 1.75rem;
  }

  /* Modal padding ultra-mínimo */
  .mh-modal__body {
    padding: var(--mh-space-4) var(--mh-space-3);
  }
}

/* ===================================================================
   TOUCH DEVICES — botones más grandes para tap
   =================================================================== */

@media (hover: none) and (pointer: coarse) {
  .mh-btn--sm {
    padding: 8px 14px;
    min-height: 36px;
  }

  .mh-icon-btn {
    width: 40px;
    height: 40px;
  }

  .mh-tab {
    padding: var(--mh-space-3) var(--mh-space-4);
    min-height: 44px;
  }

  .mh-sidebar__link {
    min-height: 44px;
  }
}

/* ===================================================================
   PRINT (para carnet, recetas, certificados — Fase 5)
   =================================================================== */

@media print {
  .mh-sidebar,
  .mh-layout__menu-toggle,
  .mh-page-actions,
  .mh-tabs,
  .mh-toast-container {
    display: none !important;
  }

  .mh-layout {
    grid-template-columns: 1fr;
  }

  .mh-page {
    padding: 0;
    max-width: 100%;
  }

  body {
    background: white;
  }
}

/* ============ RESET ============ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  line-height: var(--mh-leading-normal);
  color: var(--mh-ink-700);
  background: var(--mh-cream-100);
  min-height: 100vh;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ============ FOCUS VISIBLE ============ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--mh-green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ SCROLLBAR ============ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mh-cream-100);
}

::-webkit-scrollbar-thumb {
  background: var(--mh-cream-400);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mh-ink-300);
}

/* ============ SELECCIÓN DE TEXTO ============ */

::selection {
  background: var(--mh-gold-300);
  color: var(--mh-ink-900);
}/* =====================================================================
   MECOHUE PETSHOP — TIENDA PÚBLICA
   Estilos del frontend público. Autocontenido: define sus propias
   variables CSS al inicio, sin depender de archivos externos.

   Paleta: verde profundo + crema + dorado + coral
   Tipografía: Fraunces (display) + Inter (body)
   ===================================================================== */

/* ============ VARIABLES ============ */

.shop-app,
[data-shop] {
  /* Verde */
  --shop-green-50:  #F0F5F2;
  --shop-green-100: #DBE7E0;
  --shop-green-200: #B5CFC2;
  --shop-green-300: #8FB7A3;
  --shop-green-400: #69A085;
  --shop-green-500: #4A8B6F;
  --shop-green-600: #356957;
  --shop-green-700: #2C5F4B;
  --shop-green-800: #234A3B;
  --shop-green-900: #1E3A2F;

  /* Crema */
  --shop-cream-50:  #FCFAF5;
  --shop-cream-100: #F8F5EC;
  --shop-cream-200: #F4F1E8;
  --shop-cream-300: #EAE5D4;
  --shop-cream-400: #D9D4C5;

  /* Dorado */
  --shop-gold-300: #E0CC93;
  --shop-gold-400: #D4B978;
  --shop-gold-500: #C9A961;
  --shop-gold-600: #A8893E;

  /* Coral */
  --shop-coral-300: #F0A78B;
  --shop-coral-500: #E07856;
  --shop-coral-600: #C45A38;

  /* Texto */
  --shop-ink-900: #1A1A1A;
  --shop-ink-700: #2A2A2A;
  --shop-ink-500: #6B6B6B;
  --shop-ink-400: #8B8B8B;
  --shop-ink-300: #C4C4C4;
  --shop-white:   #FFFFFF;

  /* Tipografía */
  --shop-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --shop-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sombras */
  --shop-shadow-sm: 0 1px 3px rgba(30, 58, 47, 0.06);
  --shop-shadow-md: 0 4px 12px rgba(30, 58, 47, 0.08);
  --shop-shadow-lg: 0 12px 36px rgba(30, 58, 47, 0.12);

  /* Radios */
  --shop-radius-sm: 8px;
  --shop-radius-md: 12px;
  --shop-radius-lg: 16px;

  /* Transiciones */
  --shop-trans-fast: 0.15s ease;
  --shop-trans-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ BASE ============ */

.shop-app {
  background: var(--shop-cream-100);
  color: var(--shop-ink-700);
  font-family: var(--shop-font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.shop-app *,
.shop-app *::before,
.shop-app *::after {
  box-sizing: border-box;
}

.shop-app img {
  display: block;
  max-width: 100%;
}

.shop-main {
  flex: 1;
}

.shop-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 768px) {
  .shop-container {
    padding: 0 1.25rem;
  }
}

/* ============ NAVBAR ============ */

.shop-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 245, 236, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--shop-cream-400);
  transition: box-shadow var(--shop-trans-base);
}

.shop-navbar.scrolled {
  box-shadow: 0 4px 20px rgba(30, 58, 47, 0.06);
}

.shop-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  gap: 2rem;
}

.shop-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--shop-green-900);
  text-decoration: none;
  font-family: var(--shop-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color var(--shop-trans-fast);
}

.shop-brand:hover {
  color: var(--shop-green-700);
}

.shop-brand-icon {
  color: var(--shop-gold-500);
  display: flex;
  align-items: center;
}

.shop-nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex: 1;
  justify-content: center;
}

.shop-nav-link {
  position: relative;
  color: var(--shop-ink-700);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color var(--shop-trans-fast);
}

.shop-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--shop-gold-500);
  transition: width var(--shop-trans-base);
}

.shop-nav-link:hover {
  color: var(--shop-green-700);
}

.shop-nav-link.active {
  color: var(--shop-green-900);
}

.shop-nav-link.active::after {
  width: 100%;
}

.shop-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.625rem;
  border-radius: var(--shop-radius-sm);
  color: var(--shop-ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--shop-trans-fast), color var(--shop-trans-fast);
}

.shop-icon-btn:hover {
  background: var(--shop-cream-200);
  color: var(--shop-green-700);
}

.shop-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--shop-coral-500);
  color: var(--shop-white);
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(224, 120, 86, 0.4);
}

.shop-menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .shop-nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--shop-cream-100);
    padding: 2rem 1.5rem;
    gap: 0;
    transform: translateX(100%);
    transition: transform var(--shop-trans-base);
    overflow-y: auto;
  }
  .shop-nav-links.open {
    transform: translateX(0);
  }
  .shop-nav-link {
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--shop-cream-300);
    font-size: 1.125rem;
  }
  .shop-nav-link::after {
    display: none;
  }
  .shop-menu-toggle {
    display: flex;
  }
}

/* ============ HERO ============ */

.shop-hero {
  background:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(74, 139, 111, 0.4), transparent 60%),
    linear-gradient(135deg, #1E3A2F 0%, #2C5F4B 100%);
  color: var(--shop-cream-100);
  padding: 6rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}

.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(224, 204, 147, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(143, 183, 163, 0.1) 0%, transparent 40%);
  pointer-events: none;
}

.shop-hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--shop-cream-100));
  pointer-events: none;
  opacity: 0.4;
}

.shop-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.shop-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--shop-gold-300);
  margin-bottom: 1.5rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(224, 204, 147, 0.1);
  border: 1px solid rgba(224, 204, 147, 0.25);
  border-radius: 99px;
  width: fit-content;
}

.shop-hero-title {
  font-family: var(--shop-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  color: var(--shop-cream-50);
}

.shop-hero-title em {
  font-style: italic;
  color: var(--shop-gold-300);
  font-weight: 400;
  display: inline-block;
}

.shop-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(248, 245, 236, 0.82);
  margin-bottom: 2.5rem;
  max-width: 520px;
}

.shop-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shop-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-hero-art-card {
  background: rgba(248, 245, 236, 0.06);
  border: 1px solid rgba(248, 245, 236, 0.18);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.shop-hero-feature {
  background: rgba(248, 245, 236, 0.04);
  border: 1px solid rgba(248, 245, 236, 0.1);
  border-radius: var(--shop-radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: all var(--shop-trans-base);
}

.shop-hero-feature:hover {
  background: rgba(248, 245, 236, 0.08);
  border-color: rgba(224, 204, 147, 0.3);
  transform: translateY(-2px);
}

.shop-hero-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224, 204, 147, 0.25), rgba(201, 169, 97, 0.1));
  color: var(--shop-gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  border: 1px solid rgba(224, 204, 147, 0.2);
}

.shop-hero-feature-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--shop-cream-50);
  margin: 0 0 0.25rem;
  letter-spacing: -0.005em;
}

.shop-hero-feature-desc {
  font-size: 0.8125rem;
  color: rgba(248, 245, 236, 0.65);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 900px) {
  .shop-hero {
    padding: 3.5rem 0 3rem;
  }
  .shop-hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .shop-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .shop-hero-actions {
    justify-content: center;
  }
  .shop-hero-art-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .shop-hero-art-card {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
}

/* ============ BUTTONS ============ */

.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--shop-trans-base);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.shop-btn:active {
  transform: translateY(1px);
}

.shop-btn-primary {
  background: var(--shop-green-700);
  color: var(--shop-cream-50);
  box-shadow: 0 4px 12px rgba(44, 95, 75, 0.25);
}

.shop-btn-primary:hover {
  background: var(--shop-green-800);
  box-shadow: 0 6px 20px rgba(44, 95, 75, 0.35);
  transform: translateY(-1px);
}

.shop-btn-secondary {
  background: rgba(248, 245, 236, 0.1);
  color: var(--shop-cream-50);
  border-color: rgba(248, 245, 236, 0.35);
  backdrop-filter: blur(8px);
}

.shop-btn-secondary:hover {
  background: rgba(248, 245, 236, 0.18);
  border-color: var(--shop-cream-100);
}

.shop-btn-gold {
  background: linear-gradient(135deg, var(--shop-gold-400), var(--shop-gold-500));
  color: var(--shop-ink-900);
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.4);
}

.shop-btn-gold:hover {
  background: linear-gradient(135deg, var(--shop-gold-500), var(--shop-gold-600));
  box-shadow: 0 6px 22px rgba(201, 169, 97, 0.5);
  transform: translateY(-1px);
}

.shop-btn-outline {
  background: transparent;
  color: var(--shop-green-700);
  border-color: var(--shop-green-300);
}

.shop-btn-outline:hover {
  background: var(--shop-green-700);
  color: var(--shop-cream-50);
  border-color: var(--shop-green-700);
}

.shop-btn-whatsapp {
  background: #25d366;
  color: var(--shop-white);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.shop-btn-whatsapp:hover {
  background: #1ebe5a;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
  transform: translateY(-1px);
}

.shop-btn-block {
  width: 100%;
}

.shop-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.shop-btn-icon {
  padding: 0.625rem;
}

/* ============ SECTIONS ============ */

.shop-section {
  padding: 5rem 0;
}

.shop-section-light {
  background: var(--shop-cream-50);
}

.shop-section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.shop-section-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--shop-gold-600);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.shop-section-title {
  font-family: var(--shop-font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--shop-green-900);
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
}

.shop-section-title em {
  font-style: italic;
  color: var(--shop-gold-600);
  font-weight: 400;
}

.shop-section-subtitle {
  font-size: 1.0625rem;
  color: var(--shop-ink-500);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .shop-section {
    padding: 3rem 0;
  }
  .shop-section-header {
    margin-bottom: 2.5rem;
  }
}

/* ============ CATEGORY CARDS ============ */

.shop-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.shop-cat-card {
  position: relative;
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-md);
  padding: 1.875rem 1.5rem;
  text-decoration: none;
  color: var(--shop-ink-700);
  text-align: center;
  transition: all var(--shop-trans-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  overflow: hidden;
}

.shop-cat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--shop-green-500), var(--shop-gold-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--shop-trans-base);
}

.shop-cat-card:hover {
  border-color: var(--shop-green-300);
  transform: translateY(-4px);
  box-shadow: var(--shop-shadow-lg);
}

.shop-cat-card:hover::before {
  transform: scaleX(1);
}

.shop-cat-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--shop-green-50), var(--shop-cream-200));
  color: var(--shop-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--shop-trans-base);
}

.shop-cat-card:hover .shop-cat-card-icon {
  background: linear-gradient(135deg, var(--shop-green-100), var(--shop-green-50));
  transform: scale(1.05);
}

.shop-cat-card-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--shop-green-900);
  margin: 0;
  letter-spacing: -0.01em;
}

.shop-cat-card-count {
  font-size: 0.8125rem;
  color: var(--shop-ink-500);
}

/* ============ PRODUCT CARDS ============ */

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.shop-product-card {
  position: relative;
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--shop-ink-700);
  display: flex;
  flex-direction: column;
  transition: all var(--shop-trans-base);
}

.shop-product-card:hover {
  border-color: var(--shop-green-300);
  transform: translateY(-4px);
  box-shadow: var(--shop-shadow-lg);
}

.shop-product-card-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--shop-cream-200), var(--shop-cream-100));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.shop-product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.shop-product-card:hover .shop-product-card-img img {
  transform: scale(1.05);
}

.shop-product-card-img-placeholder {
  color: var(--shop-cream-400);
}

.shop-product-card-featured {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--shop-gold-400), var(--shop-gold-500));
  color: var(--shop-ink-900);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.3125rem 0.75rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 10px rgba(201, 169, 97, 0.35);
}

.shop-product-card-body {
  padding: 1.125rem 1.125rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-product-card-brand {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-gold-600);
  font-weight: 700;
}

.shop-product-card-name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--shop-green-900);
  margin: 0;
  min-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: -0.005em;
}

.shop-product-card-price {
  font-family: var(--shop-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--shop-green-900);
  margin-top: auto;
  letter-spacing: -0.015em;
}

.shop-product-card-stock {
  font-size: 0.75rem;
  color: var(--shop-ink-500);
  font-weight: 500;
}

.shop-product-card-stock.low {
  color: var(--shop-coral-600);
}

/* ============ FOOTER ============ */

.shop-footer {
  background: linear-gradient(180deg, var(--shop-green-900) 0%, #162a23 100%);
  color: var(--shop-cream-200);
  padding: 5rem 0 2rem;
  margin-top: 5rem;
  position: relative;
}

.shop-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--shop-gold-500) 50%,
    transparent
  );
  opacity: 0.4;
}

.shop-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.shop-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shop-footer-brand h3 {
  font-family: var(--shop-font-display);
  font-size: 1.625rem;
  color: var(--shop-cream-50);
  margin: 0;
  letter-spacing: -0.015em;
}

.shop-footer-brand p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(248, 245, 236, 0.65);
  line-height: 1.6;
  max-width: 320px;
}

.shop-footer-col h4 {
  font-family: var(--shop-font-display);
  font-size: 1.0625rem;
  color: var(--shop-cream-50);
  margin: 0 0 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.shop-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shop-footer-col a {
  color: rgba(248, 245, 236, 0.65);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--shop-trans-fast);
}

.shop-footer-col a:hover {
  color: var(--shop-gold-300);
}

.shop-footer-info {
  font-size: 0.875rem;
  color: rgba(248, 245, 236, 0.65);
  line-height: 1.6;
}

.shop-footer-info strong {
  color: var(--shop-cream-50);
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shop-footer-socials {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.shop-footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(248, 245, 236, 0.08);
  border: 1px solid rgba(248, 245, 236, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shop-cream-200);
  transition: all var(--shop-trans-fast);
}

.shop-footer-socials a:hover {
  background: var(--shop-gold-500);
  border-color: var(--shop-gold-500);
  color: var(--shop-ink-900);
  transform: translateY(-2px);
}

.shop-footer-bottom {
  border-top: 1px solid rgba(248, 245, 236, 0.08);
  padding-top: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(248, 245, 236, 0.5);
}

@media (max-width: 900px) {
  .shop-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 540px) {
  .shop-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ SHOP PAGE (catálogo) ============ */

.shop-page {
  padding: 2.5rem 0 5rem;
}

.shop-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--shop-cream-400);
  flex-wrap: wrap;
}

.shop-page-title {
  font-family: var(--shop-font-display);
  font-size: 2.25rem;
  color: var(--shop-green-900);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.shop-page-subtitle {
  font-size: 0.9375rem;
  color: var(--shop-ink-500);
  margin: 0.375rem 0 0;
}

.shop-page-controls {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  flex-wrap: wrap;
}

.shop-search {
  position: relative;
  display: flex;
  align-items: center;
}

.shop-search input {
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: 10px;
  padding: 0.6875rem 1rem 0.6875rem 2.625rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--shop-ink-700);
  width: 280px;
  outline: none;
  transition: all var(--shop-trans-fast);
}

.shop-search input:focus {
  border-color: var(--shop-green-500);
  box-shadow: 0 0 0 3px rgba(74, 139, 111, 0.12);
}

.shop-search-icon {
  position: absolute;
  left: 0.9375rem;
  color: var(--shop-ink-400);
  pointer-events: none;
  display: flex;
}

.shop-sort-select {
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: 10px;
  padding: 0.6875rem 2rem 0.6875rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--shop-ink-700);
  cursor: pointer;
  outline: none;
  transition: border-color var(--shop-trans-fast);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.shop-sort-select:focus {
  border-color: var(--shop-green-500);
}

.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
}

.shop-filters-mobile-toggle {
  display: none;
}

@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-filters {
    display: none;
  }
  .shop-filters.open {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--shop-cream-100);
    z-index: 200;
    overflow-y: auto;
    padding: 1.5rem;
  }
  .shop-filters-mobile-toggle {
    display: inline-flex;
  }
  .shop-search input {
    width: 100%;
  }
}

.shop-filters {
  align-self: start;
  position: sticky;
  top: 88px;
}

.shop-filter-group {
  margin-bottom: 1.75rem;
}

.shop-filter-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shop-ink-500);
  font-weight: 700;
  margin: 0 0 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--shop-cream-400);
}

.shop-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.shop-filter-item {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--shop-ink-700);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--shop-trans-fast);
}

.shop-filter-item:hover {
  background: var(--shop-cream-200);
}

.shop-filter-item.active {
  background: var(--shop-green-50);
  color: var(--shop-green-900);
  font-weight: 600;
}

.shop-filter-count {
  font-size: 0.75rem;
  color: var(--shop-ink-400);
}

.shop-filter-item.active .shop-filter-count {
  color: var(--shop-green-700);
}

.shop-filter-clear {
  background: none;
  border: 1px dashed var(--shop-cream-400);
  width: 100%;
  padding: 0.625rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--shop-ink-500);
  cursor: pointer;
  border-radius: 8px;
  margin-top: 0.75rem;
  transition: all var(--shop-trans-fast);
}

.shop-filter-clear:hover {
  background: rgba(196, 90, 56, 0.06);
  color: var(--shop-coral-600);
  border-color: var(--shop-coral-300);
}

/* Pagination */

.shop-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.shop-pagination button {
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--shop-ink-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--shop-trans-fast);
}

.shop-pagination button:hover:not(:disabled) {
  border-color: var(--shop-green-500);
  background: var(--shop-green-50);
  color: var(--shop-green-900);
}

.shop-pagination button.active {
  background: var(--shop-green-700);
  color: var(--shop-cream-50);
  border-color: var(--shop-green-700);
}

.shop-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Empty state */

.shop-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--shop-ink-500);
}

.shop-empty-icon {
  color: var(--shop-cream-400);
  margin-bottom: 1.25rem;
}

.shop-empty h3 {
  font-family: var(--shop-font-display);
  font-size: 1.5rem;
  color: var(--shop-green-900);
  margin: 0 0 0.5rem;
  font-weight: 500;
}

.shop-empty p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ============ PRODUCT DETAIL ============ */

.product-detail {
  padding: 2.5rem 0 5rem;
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--shop-ink-500);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.product-breadcrumb a {
  color: var(--shop-ink-500);
  text-decoration: none;
  transition: color var(--shop-trans-fast);
}

.product-breadcrumb a:hover {
  color: var(--shop-green-700);
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
}

.product-detail-img {
  aspect-ratio: 1 / 1;
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
}

.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.product-detail-brand {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--shop-gold-600);
  font-weight: 700;
  margin: 0;
}

.product-detail-name {
  font-family: var(--shop-font-display);
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--shop-green-900);
  margin: 0;
  letter-spacing: -0.025em;
}

.product-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-detail-tag {
  background: var(--shop-cream-200);
  color: var(--shop-ink-700);
  font-size: 0.8125rem;
  padding: 0.3125rem 0.875rem;
  border-radius: 99px;
  font-weight: 500;
}

.product-detail-price {
  font-family: var(--shop-font-display);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--shop-green-900);
  line-height: 1;
  margin: 0.625rem 0;
  letter-spacing: -0.025em;
}

.product-detail-stock {
  font-size: 0.9375rem;
  color: var(--shop-ink-500);
  font-weight: 500;
}

.product-detail-stock.available {
  color: var(--shop-green-700);
  font-weight: 600;
}

.product-detail-stock.low {
  color: var(--shop-coral-600);
  font-weight: 600;
}

.product-detail-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--shop-ink-700);
}

.product-detail-qty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.625rem 0;
}

.product-detail-qty-label {
  font-size: 0.875rem;
  color: var(--shop-ink-500);
  font-weight: 500;
}

.product-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--shop-cream-400);
  border-radius: 10px;
  overflow: hidden;
  background: var(--shop-white);
}

.product-qty-control button {
  background: var(--shop-white);
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shop-ink-700);
  transition: background var(--shop-trans-fast);
}

.product-qty-control button:hover {
  background: var(--shop-cream-200);
  color: var(--shop-green-700);
}

.product-qty-control input {
  border: none;
  width: 56px;
  text-align: center;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  height: 44px;
  background: var(--shop-white);
  border-left: 1px solid var(--shop-cream-400);
  border-right: 1px solid var(--shop-cream-400);
  color: var(--shop-ink-700);
  outline: none;
}

.product-detail-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.product-detail-actions .shop-btn {
  flex: 1;
  padding: 1.125rem 1.5rem;
  font-size: 1rem;
}

.product-detail-shipping {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--shop-cream-400);
}

.product-detail-shipping h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shop-ink-500);
  font-weight: 700;
  margin: 0 0 1rem;
}

.product-detail-shipping ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.product-detail-shipping li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--shop-cream-300);
}

.product-detail-shipping li:last-child {
  border-bottom: none;
}

.product-detail-shipping-cost {
  color: var(--shop-green-900);
  font-weight: 600;
}

@media (max-width: 768px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============ CART ============ */

.cart-page {
  padding: 2.5rem 0 5rem;
}

.cart-empty {
  text-align: center;
  padding: 5rem 1rem;
}

.cart-empty .shop-empty-icon {
  margin-bottom: 1.75rem;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.125rem;
  align-items: center;
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-md);
  padding: 1.125rem;
  transition: border-color var(--shop-trans-fast);
}

.cart-item:hover {
  border-color: var(--shop-green-200);
}

.cart-item-img {
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, var(--shop-cream-200), var(--shop-cream-100));
  border-radius: var(--shop-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shop-cream-400);
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cart-item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--shop-green-900);
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.cart-item-name:hover {
  color: var(--shop-green-700);
}

.cart-item-price {
  font-size: 0.875rem;
  color: var(--shop-ink-500);
}

.cart-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}

.cart-item-subtotal {
  font-family: var(--shop-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--shop-green-900);
  letter-spacing: -0.015em;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--shop-ink-400);
  padding: 0.5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--shop-trans-fast);
}

.cart-item-remove:hover {
  color: var(--shop-coral-600);
  background: rgba(196, 90, 56, 0.08);
}

.cart-summary {
  align-self: start;
  position: sticky;
  top: 88px;
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-md);
  padding: 1.875rem;
  box-shadow: var(--shop-shadow-sm);
}

.cart-summary h3 {
  font-family: var(--shop-font-display);
  font-size: 1.5rem;
  color: var(--shop-green-900);
  margin: 0 0 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
  padding: 0.625rem 0;
  color: var(--shop-ink-700);
}

.cart-summary-row.muted {
  color: var(--shop-ink-500);
  font-size: 0.875rem;
}

.cart-summary-row.discount {
  color: var(--shop-coral-600);
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--shop-cream-400);
}

.cart-summary-total-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-ink-500);
  font-weight: 700;
}

.cart-summary-total-value {
  font-family: var(--shop-font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--shop-green-900);
  letter-spacing: -0.025em;
}

.cart-summary-cta {
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .cart-grid {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
  }
}

@media (max-width: 540px) {
  .cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 0.875rem;
  }
  .cart-item-img {
    width: 72px;
    height: 72px;
  }
  .cart-item-controls {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--shop-cream-300);
    padding-top: 0.875rem;
  }
}

/* ============ CHECKOUT ============ */

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
}

.checkout-form {
  background: var(--shop-white);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-md);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.checkout-form h2 {
  font-family: var(--shop-font-display);
  font-size: 1.5rem;
  color: var(--shop-green-900);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.shop-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.shop-form-field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--shop-ink-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.shop-form-field input,
.shop-form-field textarea,
.shop-form-field select {
  background: var(--shop-cream-50);
  border: 1px solid var(--shop-cream-400);
  border-radius: var(--shop-radius-sm);
  padding: 0.8125rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--shop-ink-700);
  outline: none;
  transition: all var(--shop-trans-fast);
}

.shop-form-field input:focus,
.shop-form-field textarea:focus,
.shop-form-field select:focus {
  border-color: var(--shop-green-500);
  background: var(--shop-white);
  box-shadow: 0 0 0 3px rgba(74, 139, 111, 0.12);
}

.shop-form-field textarea {
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}

.shop-form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.shop-form-field-help {
  font-size: 0.75rem;
  color: var(--shop-ink-500);
}

@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .shop-form-field-row {
    grid-template-columns: 1fr;
  }
}

/* ============ CONTACT PAGE ============ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-item {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--shop-green-50), var(--shop-cream-200));
  color: var(--shop-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--shop-cream-400);
}

.contact-info-content h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--shop-ink-500);
  font-weight: 700;
  margin: 0 0 0.375rem;
}

.contact-info-content p {
  font-size: 1.0625rem;
  color: var(--shop-green-900);
  margin: 0;
  line-height: 1.45;
  white-space: pre-line;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.contact-info-content a {
  color: var(--shop-green-700);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--shop-trans-fast);
}

.contact-info-content a:hover {
  color: var(--shop-green-900);
  text-decoration: underline;
}

.contact-map {
  background: var(--shop-cream-200);
  border-radius: var(--shop-radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shop-shadow-md);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ UTILS ============ */

.shop-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 1rem;
  color: var(--shop-ink-500);
  font-size: 0.9375rem;
}

.shop-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--shop-cream-400);
  border-top-color: var(--shop-green-700);
  border-radius: 50%;
  animation: shop-spin 0.8s linear infinite;
}

@keyframes shop-spin {
  to { transform: rotate(360deg); }
}

.shop-text-center {
  text-align: center;
}

.shop-mt-4 {
  margin-top: 1rem;
}

/* =====================================================================
   MECOHUE — PANEL ADMIN DE LA TIENDA
   Estilos extra que complementan los del panel del clínico (mh-card, mh-table, etc.)
   Solo lo que no existe en el sistema base.
   ===================================================================== */

/* ============ PAGE HEADER (variante con __) ============
   Las páginas de tienda y ventas usan mh-page__header en vez de
   mh-page-header. Espejamos los estilos para que no queden sin css. */

.mh-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mh-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--mh-space-8);
  padding-bottom: var(--mh-space-6);
  border-bottom: 1px solid var(--mh-cream-400);
}

.mh-page__title {
  font-family: var(--mh-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--mh-green-900);
  line-height: var(--mh-leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.mh-page__subtitle {
  font-size: var(--mh-text-base);
  color: var(--mh-ink-500);
  max-width: 60ch;
  line-height: var(--mh-leading-relaxed);
  margin-top: var(--mh-space-2);
}

/* ============ STAT CARDS ============ */

.mh-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mh-stat-card {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-400);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mh-stat-card__value {
  font-family: var(--mh-font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mh-green-900);
}

.mh-stat-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mh-ink-500);
  font-weight: 600;
}

.mh-stat-card--green {
  border-color: var(--mh-green-300);
  background: var(--mh-green-50);
}
.mh-stat-card--green .mh-stat-card__value {
  color: var(--mh-green-700);
}

.mh-stat-card--gold {
  border-color: var(--mh-gold-300);
}
.mh-stat-card--gold .mh-stat-card__value {
  color: var(--mh-gold-600);
}

.mh-stat-card--coral {
  border-color: var(--mh-coral-300);
}
.mh-stat-card--coral .mh-stat-card__value {
  color: var(--mh-coral-600);
}

/* ============ FILTERS BAR ============ */

.mh-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
}

.mh-filters-bar > * {
  flex-shrink: 0;
}

/* ============ PRODUCT THUMB ============ */

.mh-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mh-cream-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mh-product-thumb__placeholder {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mh-ink-400);
  letter-spacing: 0.05em;
}

/* ============ LINK-BTN (link visual con look de botón) ============ */

.mh-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--mh-green-900);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.mh-link-btn:hover {
  color: var(--mh-green-700);
  text-decoration: underline;
}

/* ============ TABLE PAGINATION ============ */

.mh-table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mh-cream-400);
}

/* ============ PRODUCT IMAGE UPLOADER ============ */

.mh-product-image-uploader {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.mh-product-image-preview {
  width: 140px;
  height: 140px;
  background: var(--mh-cream-100);
  border: 1px dashed var(--mh-cream-400);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mh-product-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mh-product-image-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .mh-product-image-uploader {
    grid-template-columns: 1fr;
  }
}

/* ============ DROPZONE ============ */

.mh-dropzone {
  border: 2px dashed var(--mh-cream-400);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--mh-cream-100);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 1.5rem;
}

.mh-dropzone:hover,
.mh-dropzone--active {
  border-color: var(--mh-green-500);
  background: var(--mh-green-50);
}

.mh-dropzone__icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.mh-dropzone h3 {
  font-family: var(--mh-font-display);
  font-size: 1.25rem;
  color: var(--mh-green-900);
  margin: 0 0 0.25rem;
}

.mh-dropzone p {
  margin: 0;
  color: var(--mh-ink-500);
}

.mh-dropzone code {
  background: var(--mh-cream-200);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.875em;
}

/* ============ GRIDS DE FORM ============ */

.mh-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.mh-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mh-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 700px) {
  .mh-grid-2,
  .mh-grid-3,
  .mh-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============ FIELDSET ============ */

.mh-fieldset {
  border: 1px solid var(--mh-cream-400);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0.5rem 0;
}

.mh-fieldset legend {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mh-ink-500);
  font-weight: 600;
  padding: 0 0.5rem;
}

/* ============ CHECKBOX ROW ============ */

.mh-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--mh-ink-700);
  user-select: none;
  padding: 0.25rem 0;
}

.mh-checkbox-row input[type="checkbox"] {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  accent-color: var(--mh-green-700);
}

/* ============ ALERT ============ */

.mh-alert {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  border: 1px solid;
}

.mh-alert--danger {
  background: rgba(196, 90, 56, 0.08);
  border-color: var(--mh-coral-300);
  color: var(--mh-coral-600);
}

.mh-alert--info {
  background: var(--mh-green-50);
  border-color: var(--mh-green-300);
  color: var(--mh-green-900);
}

/* ============ ICON BUTTON GOLD ============ */

.mh-icon-btn--gold {
  color: var(--mh-gold-600);
}

.mh-icon-btn--gold:hover {
  background: rgba(201, 169, 97, 0.12);
}

/* ============ TAG GOLD ============ */

.mh-tag--gold {
  background: var(--mh-gold-300);
  color: var(--mh-ink-900);
  font-weight: 600;
}

/* ============ TABLE SMALL ============ */

.mh-table--sm td,
.mh-table--sm th {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* ============ CARD HEADER ============ */

.mh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mh-cream-400);
}

.mh-card-header h3 {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 1.125rem;
  color: var(--mh-green-900);
}

/* ============ COMBOBOX (Select custom) ============ */

.mh-combobox {
  position: relative;
  display: inline-block;
  font-family: inherit;
}

.mh-combobox__trigger {
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-400);
  border-radius: 8px;
  padding: 0.5625rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--mh-ink-700);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.mh-combobox__trigger:hover:not(:disabled) {
  border-color: var(--mh-green-300);
}

.mh-combobox__trigger:focus,
.mh-combobox--open .mh-combobox__trigger {
  outline: none;
  border-color: var(--mh-green-500);
  box-shadow: 0 0 0 3px rgba(74, 139, 111, 0.12);
}

.mh-combobox__trigger:disabled {
  background: var(--mh-cream-200);
  color: var(--mh-ink-400);
  cursor: not-allowed;
  opacity: 0.7;
}

.mh-combobox__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-combobox__value--placeholder {
  color: var(--mh-ink-500);
}

.mh-combobox__arrow {
  color: var(--mh-ink-500);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mh-combobox--open .mh-combobox__arrow {
  transform: rotate(180deg);
}

.mh-combobox__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-400);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30, 58, 47, 0.12);
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  max-height: 320px;
  overflow-y: auto;
  animation: mh-combobox-in 0.12s ease-out;
}

@keyframes mh-combobox-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mh-combobox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--mh-ink-700);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-combobox__option.is-highlighted {
  background: var(--mh-cream-200);
}

.mh-combobox__option.is-selected {
  background: var(--mh-green-50);
  color: var(--mh-green-900);
  font-weight: 600;
}

.mh-combobox__option.is-selected.is-highlighted {
  background: var(--mh-green-100);
}

.mh-combobox__option svg {
  color: var(--mh-green-700);
  flex-shrink: 0;
}

/* Scrollbar del menú */
.mh-combobox__menu::-webkit-scrollbar {
  width: 8px;
}

.mh-combobox__menu::-webkit-scrollbar-track {
  background: transparent;
}

.mh-combobox__menu::-webkit-scrollbar-thumb {
  background: var(--mh-cream-400);
  border-radius: 4px;
}

.mh-combobox__menu::-webkit-scrollbar-thumb:hover {
  background: var(--mh-ink-300);
}

/* Combobox dentro de un Field debe ser full-width */
.mh-field .mh-combobox {
  display: block;
  width: 100%;
}

/* ============ WALK-IN MODAL ============ */

/* Buscador */
.mh-walkin-search {
  position: relative;
  margin-bottom: 1rem;
}

.mh-walkin-search__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mh-ink-400);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.mh-walkin-search__icon svg {
  width: 18px;
  height: 18px;
}

/* Resultados */
.mh-walkin-results {
  min-height: 120px;
  max-height: 360px;
  overflow-y: auto;
}

.mh-walkin-results__hint {
  text-align: center;
  color: var(--mh-ink-500);
  padding: 2rem 1rem;
  font-size: 0.9375rem;
}

.mh-walkin-empty {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--mh-cream-100);
  border: 1px dashed var(--mh-cream-400);
  border-radius: 12px;
}

.mh-walkin-empty svg {
  width: 32px;
  height: 32px;
  color: var(--mh-ink-400);
  flex-shrink: 0;
}

.mh-walkin-empty strong {
  display: block;
  color: var(--mh-ink-700);
  margin-bottom: 0.25rem;
}

/* Lista de mascotas */
.mh-walkin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mh-walkin-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--mh-white);
  border: 1px solid var(--mh-cream-300);
  border-radius: 10px;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.mh-walkin-result:hover {
  border-color: var(--mh-green-400);
  background: var(--mh-green-50);
}

.mh-walkin-result:active {
  transform: scale(0.99);
}

.mh-walkin-result__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mh-green-400), var(--mh-green-600));
  color: var(--mh-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.mh-walkin-result__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.mh-walkin-result__info strong {
  color: var(--mh-ink-800);
  font-size: 0.9375rem;
}

.mh-walkin-result__info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header con mascota elegida (paso 2) */
.mh-walkin-pet-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--mh-cream-100);
  border-radius: 10px;
  padding: 0.875rem;
  margin-bottom: 1.25rem;
}

.mh-walkin-pet-header__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mh-green-400), var(--mh-green-600));
  color: var(--mh-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Grid de tipos (consulta / peluquería) */
.mh-walkin-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .mh-walkin-type-grid {
    grid-template-columns: 1fr;
  }
}

.mh-walkin-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: var(--mh-white);
  border: 2px solid var(--mh-cream-300);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.mh-walkin-type-card:hover {
  border-color: var(--mh-green-500);
  background: var(--mh-green-50);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(74, 139, 111, 0.12);
}

.mh-walkin-type-card strong {
  font-size: 1.0625rem;
  color: var(--mh-ink-800);
}

.mh-walkin-type-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.mh-walkin-type-card__icon svg {
  width: 32px;
  height: 32px;
}

.mh-walkin-type-card__icon--clinic {
  background: var(--mh-green-100);
  color: var(--mh-green-700);
}

.mh-walkin-type-card__icon--grooming {
  background: var(--mh-gold-100, #fdf3d8);
  color: var(--mh-gold-700, #8a6500);
}

/* FAB en agenda */
.mh-walkin-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 100;
  background: linear-gradient(135deg, var(--mh-green-500), var(--mh-green-700));
  color: var(--mh-white);
  border: none;
  border-radius: 999px;
  padding: 0.875rem 1.375rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(74, 139, 111, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mh-walkin-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(74, 139, 111, 0.45);
}

.mh-walkin-fab:active {
  transform: translateY(0);
}

.mh-walkin-fab svg {
  width: 20px;
  height: 20px;
}

/* Botón en sidebar */
.mh-sidebar-walkin {
  margin: 0.5rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: linear-gradient(135deg, var(--mh-green-500), var(--mh-green-700));
  color: var(--mh-white);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(74, 139, 111, 0.25);
}

.mh-sidebar-walkin:hover {
  opacity: 0.92;
}

.mh-sidebar-walkin:active {
  transform: scale(0.98);
}

.mh-sidebar-walkin svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   MÓDULO POS / VENTAS
   ============================================================ */

.pos-page {
  padding: 1.5rem 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.pos-header {
  margin-bottom: 1.5rem;
}

.pos-title {
  font-family: var(--mh-serif, 'Fraunces', serif);
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
  color: var(--mh-ink, #1f3e2e);
}

.pos-subtitle {
  font-size: 0.875rem;
  color: var(--mh-text-muted, #6c757d);
  margin: 0;
}

/* Grid principal del POS */
.pos-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .pos-grid { grid-template-columns: 1fr; }
}

/* === Columna izquierda: búsqueda === */

.pos-search-col {
  background: white;
  border: 1px solid var(--mh-border, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem;
}

.pos-search-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: #f8f9fa;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.15s;
  position: relative;
}

.pos-search-label:focus-within {
  border-color: var(--mh-green, #2d5641);
  background: white;
}

.pos-search-label > svg {
  color: #9ca3af;
  flex-shrink: 0;
}

.pos-search-label:focus-within > svg {
  color: var(--mh-green, #2d5641);
}

.pos-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.0625rem;
  color: var(--mh-ink, #1a2e20);
}

.pos-search-input::placeholder {
  color: #9ca3af;
}

.pos-search-loader {
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--mh-green, #2d5641);
  border-radius: 50%;
  animation: pos-spin 0.8s linear infinite;
}

@keyframes pos-spin {
  to { transform: rotate(360deg); }
}

.pos-search-empty {
  padding: 1rem 0;
  color: #9ca3af;
  font-size: 0.875rem;
  text-align: center;
}

.pos-search-results {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

.pos-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}

.pos-result:hover {
  border-color: var(--mh-green, #2d5641);
  background: #f0fdf4;
}

.pos-result-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.pos-result-name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--mh-ink, #1a2e20);
}

.pos-result-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mh-text-muted, #6c757d);
  flex-wrap: wrap;
}

.pos-result-meta span:not(:last-child)::after {
  content: " ·";
  margin-left: 0.4rem;
  opacity: 0.5;
}

.pos-result-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}

.pos-result-price {
  font-weight: 600;
  color: var(--mh-green, #2d5641);
  font-size: 1rem;
}

.pos-result-stock {
  font-size: 0.75rem;
  color: var(--mh-text-muted, #6c757d);
}

.pos-result-stock.is-out {
  color: #dc2626;
  font-weight: 500;
}

/* === Columna derecha: ticket === */

.pos-ticket-col {
  position: sticky;
  top: 1rem;
}

.pos-ticket {
  background: white;
  border: 1px solid var(--mh-border, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem;
}

.pos-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid #e5e7eb;
}

.pos-ticket-header h2 {
  font-family: var(--mh-serif, 'Fraunces', serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  color: var(--mh-ink, #1a2e20);
}

.pos-ticket-clear {
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.pos-ticket-clear:hover { color: #dc2626; }

.pos-ticket-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

.pos-ticket-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e5e7eb;
}

.pos-ticket-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.pos-ticket-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.pos-ticket-item-name {
  font-size: 0.875rem;
  color: var(--mh-ink, #1a2e20);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-ticket-item-unit {
  font-size: 0.75rem;
  color: var(--mh-text-muted, #6c757d);
}

.pos-ticket-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.pos-ticket-item-qty button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--mh-ink, #1a2e20);
}

.pos-ticket-item-qty button:hover { background: #f3f4f6; }

.pos-ticket-item-qty input {
  width: 36px;
  height: 26px;
  border: 0;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  text-align: center;
  font-size: 0.8125rem;
  -moz-appearance: textfield;
}

.pos-ticket-item-qty input::-webkit-outer-spin-button,
.pos-ticket-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pos-ticket-item-total {
  font-weight: 600;
  color: var(--mh-green, #2d5641);
  font-size: 0.9375rem;
  min-width: 80px;
  text-align: right;
}

.pos-ticket-item-remove {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}

.pos-ticket-item-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* === Secciones del ticket (cliente, totales, pagos, notas) === */

.pos-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}

.pos-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-text-muted, #6c757d);
  margin-bottom: 0.5rem;
}

.pos-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  background: white;
  outline: 0;
  transition: border-color 0.12s;
}

.pos-input:focus {
  border-color: var(--mh-green, #2d5641);
}

.pos-input--num {
  text-align: right;
  -moz-appearance: textfield;
}

.pos-input--num::-webkit-outer-spin-button,
.pos-input--num::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.pos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pos-select {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  flex: 1;
}

.pos-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  outline: 0;
}

.pos-textarea:focus { border-color: var(--mh-green, #2d5641); }

/* Totales */
.pos-totals {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}

.pos-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--mh-ink, #1a2e20);
}

.pos-discount-input { width: 140px; }
.pos-discount-input .pos-input { padding: 0.375rem 0.5rem; }

.pos-totals-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid #e5e7eb;
  font-family: var(--mh-serif, 'Fraunces', serif);
}

.pos-totals-total > span:first-child {
  font-family: var(--mh-sans, system-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-text-muted, #6c757d);
}

.pos-totals-total > span:last-child {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--mh-green, #2d5641);
}

/* Pagos */
.pos-payment-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.pos-payment-remove {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 1.125rem;
  cursor: pointer;
  border-radius: 4px;
}

.pos-payment-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.pos-add-payment {
  background: transparent;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--mh-text-muted, #6c757d);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color 0.12s, color 0.12s;
}

.pos-add-payment:hover {
  border-color: var(--mh-green, #2d5641);
  color: var(--mh-green, #2d5641);
}

.pos-payment-diff {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  font-size: 0.875rem;
  text-align: center;
}

.pos-payment-diff.is-warning {
  background: #fef3c7;
  color: #92400e;
}

.pos-payment-diff.is-error {
  background: #fee2e2;
  color: #991b1b;
}

.pos-change {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.875rem;
  background: #d1fae5;
  color: #065f46;
  border-radius: 6px;
  font-size: 0.875rem;
  text-align: center;
}

/* Botón Cobrar */
.pos-submit {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--mh-green, #2d5641);
  color: white;
  border: 0;
  border-radius: 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
}

.pos-submit:hover:not(:disabled) {
  background: var(--mh-green-deep, #1f3e2e);
}

.pos-submit:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

.pos-submit-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--mh-text-muted, #9ca3af);
  margin: 0.5rem 0 0;
}

.pos-btn-secondary {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: white;
  color: var(--mh-ink, #1a2e20);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.pos-btn-secondary:hover { background: #f9fafb; }

/* Pantalla de éxito post-cobro */
.pos-success {
  max-width: 480px;
  margin: 4rem auto;
  padding: 3rem 2rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
}

.pos-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  background: #d1fae5;
  color: #065f46;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
}

.pos-success-title {
  font-family: var(--mh-serif, 'Fraunces', serif);
  font-size: 1.875rem;
  margin: 0 0 0.5rem;
  color: var(--mh-ink, #1a2e20);
  font-weight: 500;
}

.pos-success-number {
  font-size: 1rem;
  color: var(--mh-text-muted, #6c757d);
  margin: 0 0 0.75rem;
}

.pos-success-total {
  font-family: var(--mh-serif, 'Fraunces', serif);
  font-size: 3rem;
  font-weight: 500;
  color: var(--mh-green, #2d5641);
  margin: 0 0 1.25rem;
}

.pos-success-pending {
  background: #fef3c7;
  color: #92400e;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
}

.pos-success-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* ============================================================
   POS · OwnerSearch (búsqueda async de cliente)
   ============================================================ */

.pos-owner {
  position: relative;
}

.pos-owner-input {
  width: 100%;
}

/* Chip mostrando cliente seleccionado */
.pos-owner-selected {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--mh-cream-soft, #faf6ec);
  border: 1px solid var(--mh-border, #d1d5db);
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s;
}

.pos-owner-selected:hover {
  border-color: var(--mh-green, #2d5641);
}

.pos-owner-selected-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.pos-owner-selected-main strong {
  font-size: 0.875rem;
  color: var(--mh-ink, #1a2e20);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-owner-selected-main span {
  font-size: 0.75rem;
  color: var(--mh-text-muted, #6c757d);
}

.pos-owner-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 1.125rem;
  color: var(--mh-text-muted, #9ca3af);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.pos-owner-clear:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Dropdown de resultados */
.pos-owner-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--mh-border, #d1d5db);
  border-radius: 6px;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(26, 46, 32, 0.1);
  animation: pos-owner-in 0.12s ease;
}

@keyframes pos-owner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.pos-owner-empty {
  padding: 0.875rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--mh-text-muted, #9ca3af);
  font-style: italic;
}

.pos-owner-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  cursor: pointer;
  transition: background 0.08s;
}

.pos-owner-result:last-child { border-bottom: 0; }

.pos-owner-result.is-highlighted {
  background: var(--mh-cream-soft, #faf6ec);
}

.pos-owner-result strong {
  font-size: 0.875rem;
  color: var(--mh-ink, #1a2e20);
  font-weight: 500;
}

.pos-owner-result-meta {
  font-size: 0.75rem;
  color: var(--mh-text-muted, #6c757d);
}
/**
 * editorial.css — Sistema de diseño para Mecohue Petshop
 *
 * Filosofía:
 *   - Tipografía como protagonista (no fotos)
 *   - Verde botella + tierras + cream (calidez editorial, no clínico)
 *   - Layouts asimétricos, hairlines, sin sombras AI-ish
 *   - Numeración editorial visible (01/04, Est. 2020, Catalogue 2026)
 *   - Fraunces para display, Inter para body — contraste tipográfico
 *
 * Convención de prefijos:
 *   --me-*    tokens del sistema
 *   .me-*     clases de componentes
 *
 * Las fuentes se cargan en index.html (Fraunces + Inter desde Google Fonts).
 */

/* ============ TOKENS ============ */

:root {
  /* — Paleta editorial cálida — */
  --me-cream-base: #F4EDE0;
  --me-cream-soft: #FAF6EC;
  --me-cream-deep: #E8DCC4;
  --me-cream-edge: #D9CBAE;

  --me-ink: #1A2E20;
  --me-ink-soft: #3C4E40;
  --me-ink-mute: #6E7B6B;
  --me-ink-faint: #98A097;

  --me-green: #2D5641;
  --me-green-deep: #1F3E2E;
  --me-green-bright: #3F7556;
  --me-green-pale: #C9D6CC;

  --me-terra: #B8541E;
  --me-terra-deep: #8C3F12;
  --me-amber: #C68B3F;
  --me-amber-pale: #EAD8B0;

  --me-white: #FFFFFF;

  /* — Tipografía — */
  --me-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --me-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Espaciado editorial (asimétrico) — */
  --me-gutter: clamp(1.25rem, 4vw, 3rem);
  --me-section-y: clamp(4rem, 10vw, 7rem);
  --me-section-y-tight: clamp(2.5rem, 6vw, 4.5rem);

  /* — Bordes sin AI-look — */
  --me-radius-none: 0;
  --me-radius-soft: 3px;
  --me-radius-med: 8px;

  /* — Hairlines — */
  --me-line: 1px solid var(--me-cream-deep);
  --me-line-edge: 1px solid var(--me-cream-edge);
  --me-line-ink: 1px solid var(--me-ink);

  /* — Container — */
  --me-container: 1280px;
  --me-container-narrow: 960px;
  --me-container-wide: 1440px;
}

/* ============ BASE ============ */

.me-app {
  background: var(--me-cream-base);
  color: var(--me-ink);
  font-family: var(--me-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.me-app * {
  box-sizing: border-box;
}

.me-app p {
  margin: 0;
}

.me-app a {
  color: inherit;
  text-decoration: none;
}

/* ============ TIPOGRAFÍA ============ */

/* Display (Fraunces) */
.me-display {
  font-family: var(--me-serif);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}

.me-display--italic {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-display--xl { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
.me-display--lg { font-size: clamp(1.875rem, 4vw, 3.25rem); }
.me-display--md { font-size: clamp(1.5rem, 2.75vw, 2.25rem); }
.me-display--sm { font-size: clamp(1.25rem, 2vw, 1.625rem); }

/* Etiqueta / kicker (Inter mayúsculas tracking) */
.me-eyebrow {
  font-family: var(--me-sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--me-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.me-eyebrow--green { color: var(--me-green); }
.me-eyebrow--terra { color: var(--me-terra); }

.me-eyebrow__num {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--me-terra);
  text-transform: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.me-eyebrow__line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Body (Inter) */
.me-lead {
  font-family: var(--me-sans);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--me-ink-soft);
  font-weight: 400;
  max-width: 52ch;
}

.me-body {
  font-family: var(--me-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--me-ink-soft);
  max-width: 60ch;
}

.me-body--sm {
  font-size: 0.875rem;
}

/* Meta / tag */
.me-meta {
  font-family: var(--me-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--me-ink-mute);
}

/* ============ CONTAINER ============ */

.me-container {
  width: 100%;
  max-width: var(--me-container);
  margin: 0 auto;
  padding: 0 var(--me-gutter);
}

.me-container--narrow {
  max-width: var(--me-container-narrow);
}

.me-container--wide {
  max-width: var(--me-container-wide);
}

/* ============ SECCIÓN ============ */

.me-section {
  padding-top: var(--me-section-y);
  padding-bottom: var(--me-section-y);
}

.me-section--tight {
  padding-top: var(--me-section-y-tight);
  padding-bottom: var(--me-section-y-tight);
}

.me-section--bordered {
  border-top: var(--me-line);
}

/* ============ NAVBAR EDITORIAL ============ */

.me-nav {
  background: var(--me-cream-base);
  border-bottom: var(--me-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.me-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-block en vez de shorthand para no pisar el padding lateral del .me-container */
  padding-block: 1.125rem;
  gap: 1.5rem;
}

.me-nav__brand {
  font-family: var(--me-serif);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 400;
  color: var(--me-ink);
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  line-height: 1;
}

.me-nav__brand-est {
  font-family: var(--me-sans);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
}

.me-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-nav__link {
  font-family: var(--me-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.me-nav__link:hover,
.me-nav__link.is-active {
  border-bottom-color: var(--me-ink);
}

.me-nav__cart {
  font-family: var(--me-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--me-ink);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}

.me-nav__cart:hover {
  background: var(--me-ink);
  color: var(--me-cream-base);
}

.me-nav__cart-count {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.me-nav__hamburger {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--me-ink);
}

@media (max-width: 880px) {
  .me-nav__links { display: none; }
  .me-nav__hamburger { display: inline-flex; }
  .me-nav__cart-label { display: none; }
}

/* Menú mobile expandido */
.me-nav__mobile {
  display: none;
  flex-direction: column;
  padding: 1rem var(--me-gutter) 1.5rem;
  border-top: var(--me-line);
}

.me-nav__mobile.is-open {
  display: flex;
}

.me-nav__mobile a {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.5rem;
  padding: 0.5rem 0;
  color: var(--me-ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ============ HERO ============ */

.me-hero {
  padding: clamp(3rem, 8vw, 5.5rem) 0 var(--me-section-y);
  position: relative;
  overflow: hidden;
}

.me-hero__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

@media (max-width: 880px) {
  .me-hero__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.me-hero__left {
  padding-bottom: 1rem;
}

.me-hero__eyebrow {
  margin-bottom: 1.75rem;
}

.me-hero__title {
  margin: 0 0 1.5rem;
}

.me-hero__title em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  display: block;
}

.me-hero__lead {
  margin-bottom: 2rem;
}

.me-hero__ctas {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Visual derecho del hero (composición tipográfica si no hay foto) */
.me-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--me-green-deep);
  color: var(--me-cream-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.me-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(198, 139, 63, 0.18), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(184, 84, 30, 0.12), transparent 50%);
  pointer-events: none;
}

.me-hero__visual-top,
.me-hero__visual-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.me-hero__visual-top .me-eyebrow,
.me-hero__visual-bottom .me-eyebrow {
  color: var(--me-cream-deep);
}

.me-hero__visual-center {
  position: relative;
  z-index: 1;
  font-family: var(--me-serif);
  font-style: italic;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 0.9;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.02em;
  color: var(--me-cream-base);
}

.me-hero__visual-center span {
  display: block;
}

.me-hero__visual-center .me-hero__amp {
  color: var(--me-amber);
  margin-left: 0.5em;
  font-size: 1.15em;
}

/* Sello vintage / badge */
.me-seal {
  width: 80px;
  height: 80px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--me-sans);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  padding: 0.5rem;
}

.me-seal--ink { color: var(--me-ink); }
.me-seal--cream { color: var(--me-cream-base); }
.me-seal--terra { color: var(--me-terra); border-color: var(--me-terra); }

.me-seal strong {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ============ LINKS EDITORIAL (en lugar de botones pill) ============ */

.me-link {
  font-family: var(--me-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--me-ink);
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  transition: gap 0.2s ease, color 0.2s ease;
}

.me-link:hover {
  gap: 0.875rem;
  color: var(--me-green);
  border-bottom-color: var(--me-green);
}

.me-link--green {
  color: var(--me-green);
  border-bottom-color: var(--me-green);
}

.me-link--terra {
  color: var(--me-terra);
  border-bottom-color: var(--me-terra);
}

.me-link--ghost {
  border-bottom-color: transparent;
  color: var(--me-ink-soft);
}

.me-link--ghost:hover {
  border-bottom-color: var(--me-ink-soft);
  color: var(--me-ink);
}

/* Botón sólido — CTA principal */
.me-btn,
a.me-btn,
button.me-btn {
  font-family: var(--me-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--me-ink);
  color: var(--me-cream-base);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--me-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.me-btn:hover,
a.me-btn:hover,
button.me-btn:hover {
  background: var(--me-green);
  border-color: var(--me-green);
  color: var(--me-cream-base);
}

.me-btn:disabled,
button.me-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.me-btn--ghost,
a.me-btn--ghost,
button.me-btn--ghost {
  background: transparent;
  color: var(--me-ink);
}

.me-btn--ghost:hover,
a.me-btn--ghost:hover,
button.me-btn--ghost:hover {
  background: var(--me-ink);
  color: var(--me-cream-base);
}

/* ============ SECCIÓN: CATÁLOGO (categorías) ============ */

.me-catalog__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 720px) {
  .me-catalog__header {
    grid-template-columns: 1fr;
  }
}

.me-catalog__title {
  margin: 0;
}

.me-catalog__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--me-green);
}

.me-catalog__desc {
  text-align: right;
}

@media (max-width: 720px) {
  .me-catalog__desc { text-align: left; }
}

/* Lista editorial vertical de categorías */
.me-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--me-line-ink);
}

.me-cat-item {
  border-bottom: var(--me-line-ink);
}

.me-cat-link {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  color: var(--me-ink);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.3s ease;
  position: relative;
}

.me-cat-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--me-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.me-cat-link:hover::before {
  transform: scaleX(1);
}

.me-cat-link:hover {
  color: var(--me-cream-base);
}

.me-cat-link > * {
  position: relative;
  z-index: 1;
}

.me-cat-num {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--me-terra);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  transition: color 0.3s ease;
}

.me-cat-link:hover .me-cat-num {
  color: var(--me-amber);
}

.me-cat-name {
  font-family: var(--me-serif);
  font-size: clamp(1.375rem, 2.75vw, 2.25rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  line-height: 1.05;
}

.me-cat-name em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-cat-arrow {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.125rem;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.me-cat-link:hover .me-cat-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 600px) {
  .me-cat-link {
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
  }
  .me-cat-num { font-size: 1.125rem; }
  .me-cat-arrow { display: none; }
}

/* ============ SECCIÓN: VALOR (3 columnas de propuesta de valor) ============ */

.me-values {
  background: var(--me-cream-soft);
  border-top: var(--me-line);
  border-bottom: var(--me-line);
}

.me-values__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.me-values__title {
  margin: 1rem 0 0;
}

.me-values__title em {
  font-style: italic;
  color: var(--me-terra);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

@media (max-width: 880px) {
  .me-values__grid {
    grid-template-columns: 1fr;
  }
}

.me-value {
  padding: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
  border-right: var(--me-line);
}

.me-value:last-child {
  border-right: none;
}

@media (max-width: 880px) {
  .me-value {
    border-right: none;
    border-bottom: var(--me-line);
  }
  .me-value:last-child {
    border-bottom: none;
  }
}

.me-value__num {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 2.25rem;
  color: var(--me-terra);
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-bottom: 1.5rem;
  display: block;
}

.me-value__title {
  font-family: var(--me-serif);
  font-size: 1.375rem;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--me-ink);
}

.me-value__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--me-ink-soft);
}

/* ============ SECCIÓN: SERVICIOS / CLÍNICA ============ */

.me-services__grid {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .me-services__grid {
    grid-template-columns: 1fr;
  }
}

.me-services__visual {
  aspect-ratio: 4 / 5;
  background: var(--me-amber);
  color: var(--me-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}

.me-services__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(184, 84, 30, 0.2), transparent 50%);
  pointer-events: none;
}

.me-services__visual-center {
  font-family: var(--me-serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-style: italic;
  line-height: 0.9;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--me-terra-deep);
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}

.me-services__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.me-services__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: var(--me-line);
  align-items: baseline;
}

.me-services__item:last-child {
  border-bottom: var(--me-line);
}

.me-services__item-num {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--me-terra);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  min-width: 2.5rem;
}

.me-services__item-name {
  font-family: var(--me-serif);
  font-size: clamp(1.125rem, 1.75vw, 1.375rem);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 400;
  line-height: 1.2;
  color: var(--me-ink);
}

.me-services__item-desc {
  display: block;
  font-family: var(--me-sans);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--me-ink-soft);
  margin-top: 0.375rem;
  letter-spacing: 0;
}

/* ============ SECCIÓN: CITA (testimonial) ============ */

.me-quote {
  background: var(--me-green-deep);
  color: var(--me-cream-base);
  padding: var(--me-section-y) 0;
  text-align: center;
}

.me-quote__mark {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 4rem;
  line-height: 0;
  color: var(--me-amber);
  display: block;
  margin-bottom: 1.5rem;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.me-quote__text {
  font-family: var(--me-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  max-width: 22ch;
  margin: 0 auto 2rem;
  letter-spacing: -0.01em;
}

.me-quote__attr {
  font-family: var(--me-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-cream-deep);
}

/* ============ SECCIÓN: CTA FINAL / VISITA ============ */

.me-visit {
  border-top: var(--me-line);
}

.me-visit__grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .me-visit__grid { grid-template-columns: 1fr; }
}

.me-visit__title {
  margin: 1rem 0 1.5rem;
}

.me-visit__title em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-visit__info {
  font-family: var(--me-serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  margin-bottom: 1.75rem;
  color: var(--me-ink);
  font-variation-settings: "SOFT" 50, "opsz" 30;
}

.me-visit__info em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  color: var(--me-terra);
}

.me-visit__data {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.me-visit__data li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 0.875rem 0;
  border-bottom: var(--me-line);
  font-size: 0.9375rem;
}

.me-visit__data li:first-child {
  border-top: var(--me-line);
}

.me-visit__data dt {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--me-ink-mute);
  padding-top: 0.125rem;
}

.me-visit__data dd {
  font-family: var(--me-serif);
  font-size: 0.9375rem;
  margin: 0;
  color: var(--me-ink);
  font-variation-settings: "SOFT" 50, "opsz" 30;
}

.me-visit__visual {
  aspect-ratio: 1 / 1;
  background: var(--me-terra);
  color: var(--me-cream-base);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.me-visit__visual-center {
  font-family: var(--me-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-style: italic;
  line-height: 0.9;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  text-align: center;
  align-self: center;
  margin: auto 0;
  letter-spacing: -0.02em;
}

/* ============ FOOTER EDITORIAL ============ */

.me-footer {
  background: var(--me-ink);
  color: var(--me-cream-base);
  padding: var(--me-section-y) 0 2rem;
}

.me-footer__top {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
}

.me-footer__brand {
  font-family: var(--me-serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-style: italic;
  line-height: 1;
  margin: 0 0 0.5rem;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.02em;
}

.me-footer__brand em {
  color: var(--me-amber);
  font-style: italic;
}

.me-footer__tagline {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--me-cream-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
}

.me-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
}

@media (max-width: 880px) {
  .me-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 520px) {
  .me-footer__grid {
    grid-template-columns: 1fr;
  }
}

.me-footer__col h4 {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--me-amber);
  margin: 0 0 1.25rem;
}

.me-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.me-footer__col a,
.me-footer__col span {
  font-family: var(--me-serif);
  font-size: 0.9375rem;
  color: var(--me-cream-base);
  font-variation-settings: "SOFT" 50, "opsz" 30;
  transition: color 0.2s ease;
}

.me-footer__col a:hover {
  color: var(--me-amber);
}

.me-footer__col em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
}

.me-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-family: var(--me-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--me-ink-faint);
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============ UTILIDADES ============ */

.me-divider {
  border: none;
  border-top: var(--me-line);
  margin: 0;
}

.me-divider--ink {
  border-top: var(--me-line-ink);
}

.me-text-center { text-align: center; }
.me-text-right { text-align: right; }

.me-mt-0 { margin-top: 0; }
.me-mb-0 { margin-bottom: 0; }

/* ============ PROMO BAR ============ */
.me-promo {
  background: var(--me-green-deep);
  color: var(--me-cream-base);
  padding: 0.625rem 0;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.me-promo__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: me-promo-scroll 28s linear infinite;
}

.me-promo__msg {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  padding-right: 3rem;
}

.me-promo__msg::after {
  content: "·";
  position: absolute;
  right: 1.25rem;
  color: var(--me-amber);
  font-size: 1.25rem;
  line-height: 0.5;
}

@keyframes me-promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.me-promo:hover .me-promo__track {
  animation-play-state: paused;
}

/* ============ HERO HÍBRIDO ============ */
.me-hero-h {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(2rem, 3.5vw, 3rem);
}

.me-hero-h__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 960px) {
  .me-hero-h__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.me-hero-h__left {
  padding-right: 1rem;
}

.me-hero-h__eyebrow {
  margin-bottom: 1.25rem;
}

.me-hero-h__title {
  font-family: var(--me-serif);
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  margin: 0 0 1.125rem;
}

.me-hero-h__title em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  display: block;
}

.me-hero-h__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--me-ink-soft);
  max-width: 40ch;
  margin: 0 0 1.5rem;
}

.me-hero-h__ctas {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Por default, la versión mobile del CTA está oculta */
.me-hero-h__ctas--mobile {
  display: none;
}

/* En mobile (≤720px) ocultamos el CTA del bloque izquierdo y mostramos el de abajo */
@media (max-width: 720px) {
  .me-hero-h__ctas--desktop {
    display: none;
  }
  .me-hero-h__ctas--mobile {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .me-hero-h__ctas--mobile .me-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Grid 2x2 de productos */
.me-hero-h__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

/* Mobile: carrusel horizontal con scroll-snap */
@media (max-width: 720px) {
  .me-hero-h__products {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1rem 1rem;
    margin: 0 -1rem;
    scrollbar-width: thin;
  }
  .me-hero-h__products::-webkit-scrollbar {
    height: 4px;
  }
  .me-hero-h__products::-webkit-scrollbar-thumb {
    background: var(--me-cream-deep);
    border-radius: 2px;
  }
  .me-hero-h__products .me-prod {
    flex: 0 0 65%;
    scroll-snap-align: start;
  }
  .me-hero-h__products .me-prod--skeleton {
    flex: 0 0 65%;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .me-hero-h__products {
    grid-template-columns: 1fr;
  }
}

.me-hero-h__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
  border: 1px dashed var(--me-cream-edge);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* Cards de producto MÁS COMPACTAS solo en el hero (no afecta catálogo) */
.me-hero-h__products .me-prod__photo {
  aspect-ratio: 4 / 3;
}

.me-hero-h__products .me-prod__photo-letter {
  font-size: 2.75rem;
}

.me-hero-h__products .me-prod__badge {
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.5625rem;
  padding: 0.2rem 0.45rem;
}

.me-hero-h__products .me-prod__info {
  padding: 0.625rem 0.875rem 0.75rem;
}

.me-hero-h__products .me-prod__category {
  font-size: 0.6rem;
}

.me-hero-h__products .me-prod__name {
  font-size: 0.875rem;
  line-height: 1.25;
  margin: 0.2rem 0 0.4rem;
}

.me-hero-h__products .me-prod__price {
  font-size: 1rem;
}

/* ============ PRODUCT CARD (hero) ============ */
.me-prod {
  background: var(--me-white);
  border: 1px solid var(--me-cream-deep);
  display: block;
  color: var(--me-ink);
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.me-prod:hover {
  border-color: var(--me-green);
  transform: translateY(-3px);
}

.me-prod__photo {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.me-prod__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variantes de placeholder editorial */
.me-prod__photo--cream {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(135deg, #D9CBAE 0%, #C5B188 100%);
}
.me-prod__photo--sage {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(135deg, #C9D6CC 0%, #94AC9B 100%);
}
.me-prod__photo--amber {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(135deg, #EAD8B0 0%, #C68B3F 80%);
}
.me-prod__photo--neutral {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.5), transparent 50%),
    linear-gradient(135deg, #F4EDE0 0%, #E8DCC4 100%);
}

.me-prod__photo-letter {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 4rem;
  color: rgba(26, 46, 32, 0.18);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  line-height: 1;
}

.me-prod__photo--amber .me-prod__photo-letter {
  color: rgba(140, 63, 18, 0.35);
}

.me-prod__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  background: var(--me-ink);
  color: var(--me-cream-base);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
}

.me-prod__info {
  padding: 0.875rem 1rem 1rem;
  border-top: 1px solid var(--me-cream-deep);
}

.me-prod__category {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
  display: block;
  margin-bottom: 0.625rem;
}

.me-prod__name {
  font-family: var(--me-serif);
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  color: var(--me-ink);
  font-variation-settings: "SOFT" 50, "opsz" 30;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.me-prod__price {
  font-family: var(--me-serif);
  font-size: 1.0625rem;
  color: var(--me-green);
  font-variation-settings: "SOFT" 50, "opsz" 30;
  font-weight: 500;
  display: block;
}

/* Skeleton mientras carga */
.me-prod--skeleton {
  background: var(--me-cream-soft);
  border: 1px solid var(--me-cream-deep);
  aspect-ratio: 1 / 1.35;
  position: relative;
  overflow: hidden;
}

.me-prod--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  animation: me-skel-shimmer 1.4s infinite;
}

@keyframes me-skel-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ============ TRUST STRIP ============ */
.me-trust {
  background: var(--me-green-deep);
  color: var(--me-cream-base);
  padding: 2rem 0;
  border-top: 1px solid rgba(244, 237, 224, 0.12);
}

.me-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 880px) {
  .me-trust__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .me-trust__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .me-trust__item {
    gap: 0.625rem;
  }
  .me-trust__icon {
    width: 28px;
    height: 28px;
  }
  .me-trust__icon svg {
    width: 16px;
    height: 16px;
  }
  .me-trust__text strong {
    font-size: 0.8125rem;
  }
  .me-trust__text span {
    font-size: 0.6875rem;
  }
}

.me-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.me-trust__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--me-amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--me-amber);
  flex-shrink: 0;
}

.me-trust__icon svg {
  width: 18px;
  height: 18px;
}

.me-trust__text {
  min-width: 0;
  padding-top: 0.0625rem;
}

.me-trust__text strong {
  display: block;
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  color: var(--me-cream-base);
  margin-bottom: 0.25rem;
}

.me-trust__text span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--me-cream-deep);
  letter-spacing: 0.02em;
}

/* ============================================================
   SHOP PAGE — Catálogo
   ============================================================ */

.me-shop-head {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--me-cream-base);
}

.me-shop-head__title {
  font-family: var(--me-serif);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  margin: 1.5rem 0 1.25rem;
  max-width: 18ch;
}

.me-shop-head__title em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-shop-head__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--me-ink-soft);
  max-width: 50ch;
  margin: 0;
}

/* Toolbar */
.me-shop-toolbar {
  background: var(--me-cream-soft);
  border-top: 1px solid var(--me-cream-deep);
  border-bottom: 1px solid var(--me-cream-deep);
  padding: 1rem 0;
}

.me-shop-toolbar__inner {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Search bar editorial */
.me-shop-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--me-white);
  border: 1px solid var(--me-cream-deep);
  flex: 1;
  min-width: 240px;
  max-width: 460px;
  padding: 0 0.875rem;
  transition: border-color 0.15s ease;
  position: relative;
}

.me-shop-search:focus-within {
  border-color: var(--me-green);
}

.me-shop-search > svg {
  width: 16px;
  height: 16px;
  color: var(--me-ink-mute);
  flex-shrink: 0;
}

.me-shop-search:focus-within > svg {
  color: var(--me-green);
}

.me-shop-search__input {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.6875rem 0;
  font-family: var(--me-sans);
  font-size: 0.875rem;
  color: var(--me-ink);
  width: 100%;
}

.me-shop-search__input::placeholder {
  color: var(--me-ink-mute);
  font-style: italic;
}

.me-shop-search__clear {
  background: transparent;
  border: 0;
  width: 22px;
  height: 22px;
  font-size: 1.125rem;
  color: var(--me-ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.me-shop-search__clear:hover {
  color: var(--me-terra);
}

/* Right side de la toolbar */
.me-shop-toolbar__right {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: auto;
}

.me-shop-toolbar__filter-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--me-ink);
  color: var(--me-ink);
  padding: 0.5625rem 1rem;
  font-family: var(--me-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}

.me-shop-toolbar__filter-toggle:hover {
  background: var(--me-ink);
  color: var(--me-cream-base);
}

.me-shop-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.me-shop-toolbar__sort-label {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .me-shop-toolbar__inner {
    gap: 0.875rem;
  }
  .me-shop-toolbar__filter-toggle { display: inline-flex; }
  .me-shop-search {
    max-width: 100%;
    width: 100%;
    flex: 1 0 100%;
    min-width: 0;
    order: 1;
  }
  .me-shop-toolbar__right {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    order: 2;
    gap: 0.625rem;
  }
  .me-shop-toolbar__sort {
    flex: 1;
    min-width: 0;
    gap: 0.5rem;
  }
  .me-shop-toolbar__sort-label {
    display: none;
  }
  .me-shop-toolbar__filter-toggle {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
  }
}

/* ============================================================
   EDITORIAL SELECT (dropdown custom)
   ============================================================ */
.me-select {
  position: relative;
  font-family: var(--me-sans);
  min-width: 180px;
}

.me-select__trigger {
  width: 100%;
  background: var(--me-white);
  border: 1px solid var(--me-cream-deep);
  padding: 0.625rem 0.875rem;
  font-family: var(--me-sans);
  font-size: 0.875rem;
  color: var(--me-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: border-color 0.15s ease;
  text-align: left;
}

.me-select__trigger:hover {
  border-color: var(--me-ink-soft);
}

.me-select.is-open .me-select__trigger {
  border-color: var(--me-green);
}

.me-select__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-select__caret {
  color: var(--me-ink-mute);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.me-select.is-open .me-select__caret {
  transform: rotate(180deg);
}

.me-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--me-white);
  border: 1px solid var(--me-cream-deep);
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 6px 24px rgba(26, 46, 32, 0.08);
  animation: me-select-in 0.12s ease;
}

@keyframes me-select-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.me-select__option {
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--me-ink);
  cursor: pointer;
  transition: background 0.08s ease;
}

.me-select__option.is-highlighted {
  background: var(--me-cream-soft);
}

.me-select__option.is-selected {
  color: var(--me-green);
  font-weight: 500;
  background: var(--me-cream-soft);
}

.me-select__option.is-selected::before {
  content: "✓ ";
  color: var(--me-green);
}

/* ============================================================
   APPOINTMENT FORM (reserva de turnos en contacto)
   ============================================================ */
.me-appointment {
  background: var(--me-cream-soft);
  border-top: 1px solid var(--me-cream-deep);
  margin-top: 3rem;
}

.me-appointment__head {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.me-appointment__title {
  font-family: var(--me-serif);
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.012em;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  margin: 1.5rem 0 1rem;
}

.me-appointment__title em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.me-appointment__form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.me-appointment__submit {
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Que el input date se vea consistente */
.me-checkout__field input[type="date"] {
  font-family: var(--me-sans);
  color: var(--me-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--me-white);
  position: relative;
}

.me-checkout__field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(0.3);
  cursor: pointer;
}

/* Body */
.me-shop-body { padding: 2.5rem 0 5rem; }
.me-shop-body__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .me-shop-body__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Filtros sidebar */
.me-shop-filters {
  position: sticky;
  top: 2rem;
}

.me-shop-filters__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--me-cream-deep);
  margin-bottom: 1.5rem;
}

.me-shop-filters__head h3 {
  font-family: var(--me-serif);
  font-size: 1.125rem;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  color: var(--me-ink);
  margin: 0;
}

.me-filter-group { margin-bottom: 2rem; }

.me-filter-group__title {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
  margin: 0 0 0.75rem;
}

.me-filter-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-filter-item {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.4375rem 0;
  font-family: var(--me-sans);
  font-size: 0.875rem;
  color: var(--me-ink-soft);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.me-filter-item:hover { color: var(--me-ink); }

.me-filter-item.is-active {
  color: var(--me-green);
  font-weight: 500;
}

.me-filter-item__num {
  font-family: var(--me-serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--me-terra);
  min-width: 1.4em;
  font-variation-settings: "SOFT" 100;
}

.me-filter-item__name { flex: 1; }

.me-filter-item__count {
  font-size: 0.75rem;
  color: var(--me-ink-mute);
}

@media (max-width: 880px) {
  .me-shop-filters {
    display: none;
    position: static;
  }
  .me-shop-filters.is-open { display: block; }
}

/* Grid de productos */
.me-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .me-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

.me-shop-empty {
  padding: 4rem 2rem;
  text-align: center;
  border: 1px dashed var(--me-cream-edge);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

/* Paginación */
.me-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--me-cream-deep);
}

.me-pagination__btn {
  background: transparent;
  border: 0;
  font-family: var(--me-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink);
  cursor: pointer;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.me-pagination__btn:hover:not(:disabled) { border-bottom-color: var(--me-ink); }
.me-pagination__btn:disabled { color: var(--me-cream-edge); cursor: not-allowed; }

.me-pagination__nums {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.me-pagination__num {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  font-family: var(--me-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--me-ink-mute);
  cursor: pointer;
  font-variation-settings: "SOFT" 100;
}

.me-pagination__num:hover { color: var(--me-ink); }

.me-pagination__num.is-active {
  color: var(--me-green);
  font-weight: 500;
  border-bottom: 1px solid var(--me-green);
}

.me-pagination__sep {
  color: var(--me-ink-mute);
  padding: 0 0.25rem;
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */

.me-breadcrumb {
  padding: 1.5rem 0 0;
  font-family: var(--me-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
}

.me-breadcrumb > .me-container {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.me-breadcrumb a {
  color: var(--me-ink-mute);
  text-decoration: none;
  transition: color 0.15s ease;
}

.me-breadcrumb a:hover { color: var(--me-ink); }

.me-breadcrumb__current {
  color: var(--me-ink);
  font-weight: 500;
}

.me-product-detail {
  padding: 2.5rem 0 4rem;
}

.me-product-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 880px) {
  .me-product-detail__grid { grid-template-columns: 1fr; }
}

.me-product-detail__photo {
  aspect-ratio: 1 / 1;
  position: relative;
  border: 1px solid var(--me-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.me-product-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-product-detail__info {
  padding: 1rem 0;
}

.me-product-detail__name {
  font-family: var(--me-serif);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.012em;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  margin: 1rem 0 1.5rem;
  color: var(--me-ink);
}

.me-product-detail__price {
  font-family: var(--me-serif);
  font-size: 2.25rem;
  color: var(--me-green);
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.me-product-detail__desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--me-ink-soft);
  margin: 0 0 1.5rem;
  max-width: 52ch;
  white-space: pre-wrap;
}

.me-product-detail__stock {
  font-size: 0.875rem;
  color: var(--me-ink-mute);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.me-product-detail__actions {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}

/* Quantity selector */
.me-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--me-ink);
}

.me-qty button {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--me-ink);
  transition: background 0.15s ease;
}

.me-qty button:hover { background: var(--me-cream-soft); }

.me-qty__num {
  font-family: var(--me-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  min-width: 44px;
  text-align: center;
  font-variation-settings: "SOFT" 50;
}

.me-product-detail__feedback {
  background: var(--me-cream-soft);
  border-left: 3px solid var(--me-green);
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  color: var(--me-green-deep);
  margin: 1.25rem 0;
}

.me-product-detail__meta {
  border-top: 1px solid var(--me-cream-deep);
  padding-top: 1.5rem;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

.me-product-detail__meta dt {
  font-family: var(--me-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
  align-self: center;
}

.me-product-detail__meta dd {
  margin: 0;
  color: var(--me-ink);
  align-self: center;
}

.me-product-detail__meta dd a {
  color: var(--me-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   CART
   ============================================================ */

.me-cart__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .me-cart__grid { grid-template-columns: 1fr; }
}

.me-cart__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.me-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto 32px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--me-cream-deep);
}

.me-cart-item:first-child { border-top: 1px solid var(--me-cream-deep); }

.me-cart-item__photo {
  aspect-ratio: 1 / 1;
  width: 100px;
  border: 1px solid var(--me-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.me-cart-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.me-cart-item__name {
  font-family: var(--me-serif);
  font-size: 1.0625rem;
  font-variation-settings: "SOFT" 50, "opsz" 30;
  color: var(--me-ink);
  text-decoration: none;
  line-height: 1.25;
}

.me-cart-item__name:hover { color: var(--me-green); }

.me-cart-item__unit {
  font-size: 0.8125rem;
  color: var(--me-ink-mute);
}

.me-cart-item__discount {
  font-size: 0.75rem;
  color: var(--me-terra);
  font-style: italic;
}

.me-cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--me-cream-deep);
}

.me-cart-item__qty button {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--me-ink);
  font-size: 1rem;
}

.me-cart-item__qty button:hover { background: var(--me-cream-soft); }

.me-cart-item__qty span {
  font-family: var(--me-serif);
  min-width: 32px;
  text-align: center;
  font-size: 0.9375rem;
}

.me-cart-item__total {
  font-family: var(--me-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--me-green);
  font-variation-settings: "SOFT" 50, "opsz" 30;
  min-width: 100px;
  text-align: right;
}

.me-cart-item__remove {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  font-size: 1.5rem;
  color: var(--me-ink-mute);
  cursor: pointer;
  transition: color 0.15s ease;
  line-height: 1;
}

.me-cart-item__remove:hover { color: var(--me-terra); }

@media (max-width: 600px) {
  .me-cart-item {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "photo info remove"
      "photo qty total"
      "photo discount discount";
    gap: 0.5rem 0.75rem;
    align-items: start;
  }
  .me-cart-item__photo {
    grid-area: photo;
    width: 72px;
    align-self: start;
  }
  .me-cart-item__info {
    grid-area: info;
    padding-top: 0.125rem;
  }
  .me-cart-item__name {
    font-size: 0.9375rem;
    line-height: 1.2;
  }
  .me-cart-item__unit {
    font-size: 0.75rem;
  }
  .me-cart-item__qty {
    grid-area: qty;
    justify-self: start;
  }
  .me-cart-item__qty button {
    width: 28px;
    height: 28px;
  }
  .me-cart-item__qty span {
    min-width: 28px;
    font-size: 0.875rem;
  }
  .me-cart-item__total {
    grid-area: total;
    min-width: 0;
    font-size: 1rem;
    align-self: center;
    white-space: nowrap;
  }
  .me-cart-item__discount {
    grid-area: discount;
    margin-top: 0;
    font-size: 0.6875rem;
  }
  .me-cart-item__remove {
    grid-area: remove;
    width: 28px;
    height: 28px;
    font-size: 1.25rem;
  }
}

.me-cart__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Cart summary sidebar */
.me-cart__summary {
  background: var(--me-cream-soft);
  border: 1px solid var(--me-cream-deep);
  padding: 1.75rem;
  position: sticky;
  top: 2rem;
}

.me-cart__summary-title {
  font-family: var(--me-serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 60;
  color: var(--me-ink);
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--me-cream-deep);
  padding-bottom: 0.875rem;
}

.me-cart__summary-list {
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.me-cart__summary-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.me-cart__summary-list dt {
  font-size: 0.875rem;
  color: var(--me-ink-soft);
}

.me-cart__summary-list dd {
  margin: 0;
  font-family: var(--me-serif);
  font-size: 0.9375rem;
  color: var(--me-ink);
  font-variation-settings: "SOFT" 50;
}

.me-cart__summary-discount { color: var(--me-terra) !important; }

.me-cart__summary-applied {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start !important;
}

.me-cart__summary-applied-tag {
  background: var(--me-amber);
  color: var(--me-terra-deep);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
}

.me-cart__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.125rem;
  border-top: 1px solid var(--me-cream-deep);
  font-family: var(--me-serif);
}

.me-cart__summary-total > span:first-child {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--me-sans);
  font-weight: 500;
}

.me-cart__summary-total > span:last-child {
  font-size: 1.75rem;
  color: var(--me-green);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 60;
}

.me-cart__summary-hint {
  font-size: 0.75rem;
  color: var(--me-ink-mute);
  margin: 0.75rem 0 0;
  font-style: italic;
}

/* ============================================================
   CHECKOUT
   ============================================================ */

.me-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .me-checkout__grid { grid-template-columns: 1fr; }
}

.me-checkout__form { display: flex; flex-direction: column; gap: 2rem; }

.me-checkout__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.me-checkout__legend {
  font-family: var(--me-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 30;
  color: var(--me-ink);
  margin-bottom: 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--me-cream-deep);
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.me-checkout__legend .me-eyebrow__num {
  font-size: 1.125rem;
  color: var(--me-terra);
}

.me-checkout__field { display: flex; flex-direction: column; margin-bottom: 1rem; }

.me-checkout__field label {
  font-family: var(--me-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-ink-mute);
  margin-bottom: 0.5rem;
}

.me-checkout__field input,
.me-checkout__field textarea {
  border: 1px solid var(--me-cream-deep);
  background: var(--me-white);
  padding: 0.75rem 0.875rem;
  font-family: var(--me-sans);
  font-size: 0.9375rem;
  color: var(--me-ink);
  outline: 0;
  transition: border-color 0.15s ease;
  border-radius: 0;
  resize: vertical;
}

.me-checkout__field input:focus,
.me-checkout__field textarea:focus { border-color: var(--me-green); }

.me-checkout__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 540px) {
  .me-checkout__row { grid-template-columns: 1fr; gap: 0; }
}

/* Shipping zones */
.me-checkout__shipping { display: flex; flex-direction: column; gap: 0.625rem; }

.me-checkout__zone {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.125rem;
  border: 1px solid var(--me-cream-deep);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.me-checkout__zone:hover { border-color: var(--me-ink-soft); }

.me-checkout__zone.is-selected {
  border-color: var(--me-green);
  background: var(--me-cream-soft);
}

.me-checkout__zone input[type="radio"] { margin: 0; }

.me-checkout__zone strong {
  display: block;
  font-family: var(--me-serif);
  font-size: 1rem;
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  margin-bottom: 0.125rem;
}

.me-checkout__zone span {
  font-size: 0.8125rem;
  color: var(--me-ink-mute);
}

.me-checkout__zone-cost {
  font-family: var(--me-serif) !important;
  font-size: 1.0625rem !important;
  color: var(--me-green) !important;
  font-weight: 500;
}

/* Checkout summary items */
.me-checkout__summary {
  background: var(--me-cream-soft);
  border: 1px solid var(--me-cream-deep);
  padding: 1.75rem;
  position: sticky;
  top: 2rem;
}

.me-checkout__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--me-cream-deep);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.me-checkout__items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.875rem;
}

.me-checkout__item-name {
  color: var(--me-ink);
  flex: 1;
}

.me-checkout__item-qty {
  color: var(--me-ink-mute);
  font-size: 0.8125rem;
}

.me-checkout__item-price {
  font-family: var(--me-serif);
  color: var(--me-green);
  font-variation-settings: "SOFT" 50;
  font-weight: 500;
}

/* ============================================================
   ABOUT
   ============================================================ */

.me-about__story {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .me-about__story { grid-template-columns: 1fr; gap: 2.5rem; }
}

.me-about__story-text { max-width: 60ch; }

.me-about__lead {
  font-family: var(--me-serif);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--me-ink);
  margin: 1rem 0 0;
  font-variation-settings: "SOFT" 50, "opsz" 60;
  font-weight: 400;
}

.me-about__lead em {
  font-style: italic;
  color: var(--me-green);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 60;
}

.me-about__story-visual {
  background: var(--me-green-deep);
  color: var(--me-cream-base);
  padding: 2.5rem;
  border-left: 3px solid var(--me-amber);
}

.me-about__visual-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.me-about__visual-num {
  font-family: var(--me-serif);
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1;
  color: var(--me-amber);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  font-weight: 500;
}

.me-about__visual-num em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  margin-left: 0.05em;
}

.me-about__visual-caption {
  font-family: var(--me-sans);
  font-size: 0.875rem;
  color: var(--me-cream-deep);
  margin: 0;
  max-width: 22ch;
  line-height: 1.5;
}

.me-about__visual-caption em {
  font-family: var(--me-serif);
  font-style: italic;
  color: var(--me-cream-base);
}

/* ============================================================
   CONTACT
   ============================================================ */

.me-contact__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 880px) {
  .me-contact__grid { grid-template-columns: 1fr; gap: 3rem; }
}

.me-contact__form {}

.me-contact__info {
  background: var(--me-cream-soft);
  border: 1px solid var(--me-cream-deep);
  padding: 2rem;
}

.me-contact__info dt {
  color: var(--me-ink) !important;
  font-weight: 500;
}

.me-contact__map {
  margin-top: 3rem;
  border-top: 1px solid var(--me-cream-deep);
  border-bottom: 1px solid var(--me-cream-deep);
  background: var(--me-cream-soft);
}

/* ============================================================
   Utilities
   ============================================================ */

.me-text-center { text-align: center; }

.me-section--tight {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.me-eyebrow--terra { color: var(--me-terra-deep); }

/* "ghost" button variant when needs to be transparent w/ underline */
.me-link--ghost {
  font-family: var(--me-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25rem;
  cursor: pointer;
}

.me-link--ghost:hover {
  color: var(--me-ink);
  border-bottom-color: var(--me-ink-soft);
}