/* ============================================================
   Pame Fontán — Design System (plataforma de módulos)
   Tokens heredados del sistema de marca (bordó + crema,
   DM Sans + DM Serif Display) + capa funcional sobria de estado.
   Compartido por el panel Cliente y el panel Admin.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ── Superficies oscuras (bordó) ── */
  --bordo:        oklch(12% 0.006 350);
  --bordo-lifted: oklch(18% 0.010 350);
  --bordo-panel:  oklch(29% 0.020 1.63);   /* chrome admin (ciruela) */
  --bordo-form:   oklch(35% 0.022 1.63);

  /* ── Acento ── */
  --accent:       oklch(30% 0.190 355);
  --accent-dim:   oklch(42% 0.140 355);
  --accent-text:  oklch(82% 0.055 355);
  --accent-wash:  oklch(97% 0.02 355);     /* fondo seleccionado claro */
  --accent-tint:  oklch(95% 0.03 355);     /* chip de ícono */

  /* ── Superficies claras ── */
  --surface:      oklch(97% 0.006 75);
  --surface-2:    oklch(93% 0.010 75);
  --white:        oklch(100% 0 0);

  /* ── Texto ── */
  --ink:          oklch(15% 0.020 350);
  --ink-soft:     oklch(48% 0.018 350);
  --light:        oklch(95% 0.005 350);
  --light-dim:    oklch(68% 0.016 350);
  --light-faint:  oklch(42% 0.012 350);

  /* ── Reglas ── */
  --rule-light:   oklch(87% 0.010 75);
  --rule-onplum:  oklch(100% 0 0 / 0.30);

  /* ── Estado funcional ── */
  --ok:        oklch(56% 0.12 155);  --ok-bg:     oklch(95% 0.03 155);  --ok-line:   oklch(85% 0.06 155);
  --warn:      oklch(66% 0.14 68);   --warn-bg:   oklch(96% 0.05 75);   --warn-line: oklch(86% 0.09 75);
  --danger:    oklch(55% 0.19 25);   --danger-bg: oklch(96% 0.03 25);   --danger-line: oklch(85% 0.08 25);

  /* ── Tipografía ── */
  --font:         'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* ── Radios ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* ── Sombras ── */
  --shadow-soft: 0 4px 24px oklch(0% 0 0 / 0.07);
  --shadow-card: 0 2px 0 oklch(0% 0 0 / 0.06), 0 8px 32px oklch(0% 0 0 / 0.08);
  --shadow-lift: 0 16px 56px oklch(0% 0 0 / 0.13);

  /* ── Motion ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: #F7F5F1;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

.serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* ── Eyebrow / etiquetas ── */
.eyebrow {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ── Botones ── */
.btn {
  height: 42px; padding: 0 20px; border: none; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-family: var(--font);
  font-weight: 600; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--ease) 0.2s, transform 0.1s;
}
.btn:hover { background: var(--accent-dim); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: oklch(88% 0.006 350); color: oklch(60% 0.01 350); cursor: not-allowed; }
.btn--ghost { background: var(--white); color: var(--ink); border: 1px solid var(--rule-light); }
.btn--ghost:hover { background: var(--surface); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.btn--danger:hover { background: oklch(93% 0.05 25); }
.btn--block { width: 100%; }

/* ── Toggle universal ── */
.switch { position: relative; width: 46px; height: 26px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: oklch(85% 0.01 350); cursor: pointer; transition: background 0.18s var(--ease);
}
.switch .slider::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform 0.18s var(--ease);
}
.switch input:checked + .slider { background: var(--ok); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ── Campos de formulario (schema-driven) ── */
.f-field { margin-bottom: 16px; }
.f-field > label, .field > label {
  display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink);
}
.f-field .req { color: var(--danger); }
.f-field input, .field input, .input {
  width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--rule-light);
  border-radius: var(--r-sm); background: var(--white); font-family: var(--font);
  font-size: 13.5px; color: var(--ink); outline: none; transition: border-color 0.15s;
}
.f-field textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--rule-light);
  border-radius: var(--r-sm); background: var(--white); font-family: var(--font);
  font-size: 13.5px; color: var(--ink); outline: none; transition: border-color 0.15s;
  resize: vertical; line-height: 1.5; box-sizing: border-box;
}
.f-field input:focus, .field input:focus, .input:focus, .f-field textarea:focus { border-color: var(--accent); }
.f-image-zone {
  border: 1.5px dashed var(--rule-light); border-radius: var(--r-sm); background: var(--white);
  padding: 14px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.f-image-zone:hover, .f-image-over { border-color: var(--accent); background: rgba(0,0,0,0.02); }
.f-image-error { border-color: var(--danger) !important; background: var(--danger-bg) !important; }
.f-image-zone img { max-width: 100%; max-height: 120px; border-radius: 6px; display: block; margin: 0 auto; }
.f-image-hint { font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; }
.f-image-hint span { font-size: 20px; }
.f-image-hint small { font-size: 11px; opacity: 0.75; }
.f-image-del {
  margin-top: 8px; border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--danger); text-decoration: underline;
}
.f-field input.invalid { border-color: var(--danger); border-width: 1.5px; background: var(--danger-bg); }
.f-hint { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.f-error { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--danger); margin-top: 6px; font-weight: 600; }

.linklike {
  background: none; border: none; padding: 0; font-family: var(--font); font-size: inherit;
  color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline;
}
.linklike:hover { color: var(--accent-dim); }
.linklike:disabled { color: var(--ink-soft); cursor: default; text-decoration: none; }

/* select con la misma pinta que los inputs */
.f-field select, select.input {
  width: 100%; height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--rule-light);
  border-radius: var(--r-sm); background: var(--white); font-family: var(--font);
  font-size: 13.5px; color: var(--ink); outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a5a60' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.f-field select:focus { border-color: var(--accent); }

/* Campo/lista bloqueada por venir ya completada desde una plantilla —
   el cliente ve que existe y qué dice, pero no puede tocarlo. */
.f-locked { position: relative; }
.f-locked::after {
  content: '🔒 Definido en la plantilla';
  display: inline-block;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  margin-top: 4px;
}
.f-locked input,
.f-locked textarea,
.f-locked select {
  background: var(--surface-2) !important;
  color: var(--ink-soft) !important;
  cursor: not-allowed !important;
}
.f-locked .btn,
.f-locked button {
  opacity: .5;
  pointer-events: none;
}

/* campo booleano: tarjeta con checkbox + label + ayuda */
.f-bool {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px;
  border: 1px solid var(--rule-light); border-radius: 11px; margin-bottom: 16px; background: var(--white);
}
.f-bool input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px; flex: none; cursor: pointer; accent-color: var(--accent);
}
.f-bool .b-txt label { font-size: 13.5px; font-weight: 600; margin: 0; cursor: pointer; }
.f-bool .b-txt .f-hint { margin-top: 4px; }

/* campo color: swatch + hex */
.f-color .swatchrow { display: flex; gap: 8px; align-items: center; }
.f-color input[type="color"] {
  width: 46px; height: 40px; padding: 3px; border: 1px solid var(--rule-light);
  border-radius: 8px; background: var(--white); cursor: pointer; flex: none;
}
.f-color input.hex { flex: 1; text-transform: lowercase; }

/* nota de alcance/ubicación fijos (módulos que solo permiten una opción) */
.fixed-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--rule-light); margin-bottom: 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
}
.fixed-note svg { flex: none; margin-top: 1px; color: var(--ink-soft); }
.fixed-note strong { color: var(--ink); font-weight: 600; }

/* Cada grupo es su propia card blanca (antes solo los grupos con toggle
   tenían caja; el resto era una línea divisoria arriba y listo — con el
   fondo de .editor-form pasando a gris, esos grupos "sin caja" quedaban
   flotando sin ningún borde que los contuviera. Referencia: paneles de
   otras apps de widgets para Tiendanube, donde cada sección vive en su
   propia card). */
.f-group {
  padding: 18px; margin-bottom: 16px; border: 1px solid var(--rule-light);
  border-radius: 10px; background: var(--white);
}
.f-group--card > .f-group-label { margin-bottom: 6px; }
.f-group--card > .f-hint { font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.f-group:not(.f-group--card) > .f-hint { font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
/* grupo con toggle (ver manifest-form.js, field.toggle): el checkbox
   prende/apaga y el resto se despliega ADENTRO de la misma card, con una
   línea propia separándolo del checkbox. */
.f-group--card .f-group-toggle-rest { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule-light); }
.f-group--card .f-group-toggle-rest .f-field:last-child,
.f-group--card .f-group-toggle-rest .f-bool:last-child { margin-bottom: 0; }
.f-group > .f-group-label {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.f-group-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: var(--surface-2); color: var(--accent);
}

/* ── Chips ── */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px;
  padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--rule-light); font-size: 12.5px; font-weight: 500;
}
.chip button {
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.08); color: var(--ink-soft); font-size: 12px;
  line-height: 1; cursor: pointer;
}

/* ── Pills de estado ── */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.pill--ok .dot { background: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.pill--warn .dot { background: var(--warn); }
.pill--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.pill--danger .dot { background: var(--danger); }
.pill--off { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--rule-light); }
.pill--off .dot { background: oklch(80% 0.01 350); }

/* ── Tarjetas ── */
.card {
  background: var(--white); border: 1px solid var(--rule-light);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}

/* ── Ícono de módulo ── */
.mod-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent);
}
.mod-icon--off { background: var(--surface-2); color: var(--ink-soft); }

/* ── Banners (validación / éxito) ── */
.banner { display: flex; gap: 11px; padding: 13px 16px; border-radius: var(--r-md); align-items: flex-start; }
.banner--danger { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }
.banner--ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.banner strong { font-weight: 700; }
.banner p { font-size: 12px; line-height: 1.5; }

/* ── Opción tipo radio-card (ubicación / modo de alcance) ── */
.opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--rule-light); border-radius: 9px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.opt:hover { border-color: var(--accent-dim); }
.opt .radio { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--rule-light); flex: none; }
.opt[aria-checked="true"] { border: 1.5px solid var(--accent); background: var(--accent-wash); }
.opt[aria-checked="true"] .radio { border: 5px solid var(--accent); }
.opt__title { font-size: 13px; font-weight: 600; }

/* ── Utilidades ── */
.divider { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.divider .eyebrow { white-space: nowrap; }
.divider .line { flex: 1; height: 1px; background: var(--rule-light); }
.muted { color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Skeleton ── */
@keyframes shimmer { 0% { opacity: .6; } 50% { opacity: 1; } 100% { opacity: .6; } }
.skel { background: oklch(92% 0.008 75); border-radius: 6px; animation: shimmer 1.4s ease-in-out infinite; }

/* ── Selector de alcance (compartido: admin + cliente, ver shared/scope-picker.js) ── */
.scope-opt { margin-bottom: 9px; padding: 13px 14px; border-radius: 11px; }
.scope-opt .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink-soft); }
.scope-opt[aria-checked="true"] .ic { background: var(--accent-tint); color: var(--accent); }
.scope-opt .tx { flex: 1; }
.scope-opt .t1 { font-size: 13.5px; font-weight: 600; }
.scope-opt .t2 { font-size: 11.5px; color: var(--ink-soft); }
.scope-detail { margin: 4px 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip .thumb { width: 20px; height: 20px; border-radius: 5px; flex: none; }

.results { border: 1px solid var(--rule-light); border-radius: 10px; overflow: hidden; max-height: 264px; overflow-y: auto; }
.results:empty { display: none; }
.rrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  border-top: 1px solid var(--rule-light); background: var(--white);
}
.rrow:first-child { border-top: none; }
.rrow:hover { background: var(--surface); }
.rrow.sel { background: var(--accent-wash); }
.rrow .thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; background-size: cover; background-position: center; }
.rrow .thumb--cat { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-soft); }
.rrow .inf { flex: 1; min-width: 0; }
.rrow .n { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .p { font-size: 11.5px; color: var(--ink-soft); }
.rrow .chk {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--rule-light);
  background: var(--white); flex: none; display: flex; align-items: center; justify-content: center;
}
.rrow.sel .chk { border-color: var(--accent); background: var(--accent); }
.rrow .empty-msg { padding: 14px; font-size: 12.5px; color: var(--ink-soft); }

.summary-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--rule-light); box-shadow: var(--shadow-soft);
}
.summary-card .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.summary-card .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.summary-card .v { font-size: 16px; font-weight: 600; line-height: 1.25; }
.f-color .f-color-none { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; cursor: pointer; color: var(--ink-soft); }
.f-color input:disabled { opacity: .45; }