/* ============================================================
   TAMY STORE — Design System: Organic Professionalism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Primary — Deep Forest Green */
  --g900: #051207;
  --g800: #163f1d;
  --g700: #264f2b;
  --g600: #3e6841;
  --g200: #a4d2a3;
  --g100: #bfefbd;
  --g50:  #e6f5e4;

  /* Neutrals — Warm Organic */
  --n950: #1a1c19;
  --n900: #2f312d;
  --n700: #424940;
  --n500: #605e59;
  --n400: #727970;
  --n200: #c2c9be;
  --n100: #e2e3dd;
  --n50:  #edeee9;
  --white:#ffffff;

  /* Semantic */
  --danger:       #ba1a1a;
  --danger-light: #ffdad6;
  --danger-border:#ffb4ab;
  --warn:         #906300;
  --warn-light:   #fffbeb;
  --success:      #16a34a;
  --wa-green:     #25D366;

  /* Typography — Noto Serif + Manrope */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Shadows — Soft diffused, tinted green */
  --shadow-xs: 0 1px 2px rgba(46,87,50,.06);
  --shadow-sm: 0 1px 8px rgba(46,87,50,.08);
  --shadow-md: 0 4px 16px rgba(46,87,50,.10);
  --shadow-lg: 0 8px 32px rgba(46,87,50,.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.10);

  /* Radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full:9999px;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 250ms cubic-bezier(.4,0,.2,1);
  --t-slow: 350ms cubic-bezier(.4,0,.2,1);

  /* Z-index scale */
  --z-base:   1;
  --z-sticky: 100;
  --z-drawer: 300;
  --z-modal:  500;
  --z-toast:  900;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: #f9faf4;
  color: var(--n950);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-body);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--g800);
  color: var(--white);
  border-color: var(--g800);
}
.btn-primary:hover  { background: var(--g700); border-color: var(--g700); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--g900); transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--g800);
  border-color: var(--g800);
}
.btn-outline:hover { background: var(--g50); }

.btn-ghost {
  background: transparent;
  color: var(--n500);
  border-color: var(--n200);
}
.btn-ghost:hover { background: var(--n50); color: var(--n950); border-color: var(--n400); }

.btn-danger {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}
.btn-danger:hover { background: #a01515; }

.btn:disabled, .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
  background: var(--danger);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  border-radius: var(--r-full);
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  font-family: var(--font-body);
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  background: var(--n900);
  color: var(--white);
  padding: 13px 18px;
  border-radius: var(--r-md);
  font-size: .84rem;
  font-weight: 500;
  font-family: var(--font-body);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .25s ease;
  max-width: 300px;
  pointer-events: all;
  border-left: 3px solid transparent;
}

.toast.success { border-left-color: #22c55e; }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--g600); }
.toast.warn    { border-left-color: var(--warn); }

.toast.removing { animation: toastOut .25s ease forwards; }

@keyframes toastIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; }   to { transform: translateX(110%); opacity: 0; } }

/* ── Modal base ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,28,25,.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}

.modal {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-xl);
  animation: scaleIn .22s ease;
}

.modal h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--n950);
  line-height: 1.3;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--n700);
  margin-bottom: 6px;
  font-family: var(--font-body);
  letter-spacing: .02em;
}

.form-group label small {
  font-weight: 400;
  color: var(--n400);
  margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--n200);
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--n950);
  background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--g800);
  box-shadow: 0 0 0 3px rgba(22,63,29,.10);
}

/* ── Un campo bloqueado tiene que PARECER bloqueado ─────────── */
/* El fallo que cierra esta regla: el Stock de un producto con
   variantes se pone en `readonly` a propósito —lo manda la suma de
   los colores, y el servidor lo recalcula igual—, pero se pintaba
   exactamente igual que un campo normal.
   En escritorio el navegador todavía da cursor de texto al pulsarlo,
   así que el engaño pasa desapercibido. En Android un campo readonly
   ni abre el teclado ni muestra nada: el dueño tocaba, no pasaba
   nada, y no había forma de saber por qué. Reportado como "no puedo
   actualizar el stock desde el celular".
   Gris, sin anillo de foco y con el cursor de prohibido: el campo
   dice por sí solo que no se escribe ahí. */
.form-group input[readonly],
.form-group textarea[readonly] {
  background: var(--n100);
  color: var(--n500);
  cursor: not-allowed;
}

.form-group input[readonly]:focus,
.form-group textarea[readonly]:focus {
  border-color: var(--n200);
  box-shadow: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--n400);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--n200);
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--n500);
}

.empty-state .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--n400);
}

.empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--n700);
  margin-bottom: 6px;
}

.empty-state p {
  font-size: .85rem;
}

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--n200);
  border-top-color: var(--g800);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 40px auto;
}

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

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 24px 18px; }
  .toast-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }
  .toast { max-width: 100%; }
}

@media (max-width: 768px) {
  /* Auditoría móvil: el número del carrito se pintaba a 10.4px, por
     debajo del mínimo legible. Se sube a 12px y la burbuja crece con
     él para que siga siendo redonda en lugar de un óvalo apretado. */
  .badge {
    font-size: .75rem;   /* .65rem = 10.4px */
    min-width: 20px;
    padding: 1px 6px;
    line-height: 1.45;
  }
}

/* ── 16px en los campos de cualquier pantalla táctil ─────────── */
/* Esto NO es una preferencia de tamaño: 16px es el umbral exacto por
   debajo del cual iOS Safari hace zoom automático al enfocar un
   campo. El zoom no es inocuo — agranda la ventana visual sin avisar
   y descoloca todo lo que sea `position: fixed`, que es justamente
   el overlay de los modales. El resultado en un teléfono es que el
   campo deja de responder al toque y el teclado no llega a abrirse:
   el fallo que reportó el dueño al intentar cambiar el stock desde
   el celular.
   Toda la app estaba a 14px (.form-group, .ventas-filtros, .combo,
   .admin-search-wrap, .search-box, .input-icon-wrap, .color-row), así
   que se arregla en un solo sitio en vez de campo por campo.
   `pointer: coarse` la limita a dispositivos táctiles: en escritorio
   el zoom no existe y el diseño se queda como está.
   Los `:not()` no filtran de más — suben la especificidad a (0,2,1)
   para ganarle a reglas como `.form-group input`, que valen (0,1,1) y
   llegan después en otras hojas. Sin eso, la regla se perdería justo
   donde importa. Checkbox y radio quedan fuera: no llevan texto y su
   tamaño está fijado aparte. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select:not([hidden]):not([multiple]),
  textarea:not([hidden]):not([disabled]) {
    font-size: 16px;
  }
}

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

:focus-visible {
  outline: 2px solid var(--g800);
  outline-offset: 2px;
}

/* ── Botón flotante de WhatsApp ──────────────────────────────
   Vive aquí y no en catalog.css porque producto.html solo carga
   styles.css + producto.css. Mientras estuvo en catalog.css, la
   página de detalle pintaba el FAB sin ningún estilo: una franja
   transparente de 390x26 en vez del círculo verde de 60x60.
   Si se mueve, comprobar antes qué hojas carga cada página. */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa-green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  animation: fabPulse 2.4s ease-in-out infinite;
  text-decoration: none;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, .5);
}
.whatsapp-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  border-radius: var(--r-full);
  padding: 2px 7px;
  min-width: 22px;
  text-align: center;
  font-family: var(--font-body);
  line-height: 1.4;
  border: 2px solid var(--white);
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, .4); }
  50% { box-shadow: 0 4px 30px rgba(37, 211, 102, .6); }
}

/* Ningún texto por debajo de 12px en móvil. */
@media (max-width: 480px) {
  .whatsapp-fab-badge { font-size: .75rem; }   /* .68rem = 10.88px */
}

/* Visible para los lectores de pantalla y para Google, no en pantalla.
   Lo usa el <h1> que el servidor pinta en la ficha: el diseño ya tiene
   su propio título dentro del detalle, así que duplicarlo a la vista
   sería un error visual — pero sin un <h1> en el HTML, el robot de
   Google no sabe de qué trata la página hasta ejecutar el JavaScript. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}