:root {
  /*
    Formulario de trabajo, no pieza de marca. Se llena en veinte minutos
    mirando la pantalla de cerca, así que el fondo va claro y neutro: un
    formulario largo sobre fondo oscuro cansa.

    El acento es el mismo ladrillo del sitio, para que la pyme reconozca que
    es la misma herramienta que la página que le mostraron.
  */
  --bg: #F4F4F1;
  --bg-card: #FFFFFF;
  --bg-inset: #FAFAF8;
  --border: rgba(20, 23, 26, 0.10);
  --border-strong: rgba(20, 23, 26, 0.22);
  --primary: #7A2E1E;
  --accent: #7A2E1E;
  --accent-soft: rgba(122, 46, 30, 0.08);
  --text: #1F2225;      /* 15.4:1 sobre el fondo */
  --text-dim: #5A5F5C;  /* 5.8:1  */
  --text-faint: #858A87; /* 3.4:1, sólo para pistas cortas, nunca cuerpo */
  --danger: #A8321F;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(127, 85, 57, 0.25), transparent),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(201, 162, 39, 0.08), transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2 { font-family: var(--font-display); color: var(--accent); margin: 0; letter-spacing: 0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0.2em 0 0; color: var(--text-dim); font-size: 0.85rem; }

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem 2rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar__brand { display: flex; align-items: center; gap: 0.7rem; }
.topbar__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--accent);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
}
.topbar__brand p { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

.topbar__slug { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; max-width: 260px; }
.topbar__slug label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.topbar__slug input { font-family: var(--font-mono); }

.topbar__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.missing-count { font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; }

.copy-btn {
  position: relative;
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px -4px rgba(201, 162, 39, 0.5);
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -4px rgba(201, 162, 39, 0.65); }
.copy-btn:active { transform: translateY(0); }
.copy-btn__check { display: none; margin-left: 0.4em; }
.copy-btn.is-copied .copy-btn__check { display: inline; }

/* ---------- layout ---------- */

main { max-width: 880px; margin: 0 auto; padding: 2rem 2rem 5rem; }

.intro {
  font-size: 0.9rem;
  color: var(--text-dim);
  border-left: 2px solid var(--border-strong);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.req-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: middle;
}

/* ---------- cards ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.card--freeform { border-color: var(--border-strong); background: linear-gradient(160deg, var(--bg-card), var(--accent-soft)); }

.card__header { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: baseline; }
.card__num { font-family: var(--font-mono); color: var(--text-faint); font-size: 0.8rem; padding-top: 0.2rem; }

/* ---------- fields ---------- */

.grid { display: grid; gap: 1rem 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.field--span2 { grid-column: span 2; }
.field--span3 { grid-column: span 3; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--inline { max-width: 420px; }

label { font-size: 0.78rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.35em; }
.limit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); margin-left: auto; }

input, textarea, select {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  resize: vertical;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ---------- image slots ---------- */

.image-slot {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
}
.image-slot::before {
  content: attr(data-image-role);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--accent);
  grid-column: 1 / -1;
}
.image-slot input[type="file"] { font-size: 0.78rem; color: var(--text-dim); }
.image-slot input[type="text"] { font-family: var(--font-mono); font-size: 0.78rem; }

/* ---------- repeatable lists ---------- */

.repeatable-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }

.repeat-item {
  position: relative;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1rem 1rem 1.1rem;
  border-left: 2px solid var(--border-strong);
}

.repeat-item__remove {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.repeat-item__remove:hover { color: var(--danger); }

.add-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
.add-btn:hover { background: var(--accent-soft); }

/* ---------- hours ---------- */

.hours-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.hour-row {
  display: grid;
  grid-template-columns: 110px auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.hour-row label.day-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); }
.hour-row .toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-faint); }
.hour-row input[type="text"] { font-size: 0.82rem; }

/* ---------- json preview ---------- */

.json-preview {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.json-preview summary {
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--bg-card);
}
.json-preview pre {
  margin: 0;
  padding: 1.25rem;
  background: var(--bg-inset);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-dim);
  overflow-x: auto;
  max-height: 420px;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.5);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 0.8rem 1.2rem; }
  .topbar__slug { order: 3; max-width: none; flex-basis: 100%; }
  main { padding: 1.5rem 1.2rem 4rem; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .field--span2, .field--span3 { grid-column: span 1; }
  .hour-row { grid-template-columns: 90px auto; }
  .hour-row input[type="text"] { grid-column: span 2; }
}


/* La descripción libre es el campo donde la pyme cuenta lo suyo con sus
   palabras: si la caja es chica, escribe poco. Ocupa el ancho de la tarjeta
   y arranca con alto suficiente para tres o cuatro frases. */
.card--freeform textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
}