/* Panel de la clienta: donde arma su vetrina desde el celular. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&display=swap");

:root {
  --fondo: #F7F1EA; --tarjeta: #FFFFFF; --texto: #3B2F2A; --suave: #8C7B70;
  --acento: #B5653F; --acento-claro: #F3E3D8; --borde: #EADFD3; --peligro: #B3261E;
  --sombra: 0 4px 18px rgba(80, 50, 30, 0.08); --radio: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.45;
  min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, .marca { font-family: Fraunces, Georgia, serif; font-weight: 600; }
h1 { font-size: 1.55rem; margin: 0.3em 0 0.2em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }
p { margin: 0.3em 0 0.8em; }
.suave { color: var(--suave); font-size: 0.92rem; }

.barra {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(247, 241, 234, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde);
}
.marca { text-decoration: none; color: var(--acento); font-size: 1.15rem; }
.salir { background: none; border: 0; color: var(--suave); font: inherit; font-size: 0.9rem; }

main { max-width: 560px; margin: 0 auto; padding: 12px 16px 40px; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; margin: 12px 0; }

label { display: block; font-weight: 500; font-size: 0.92rem; margin: 12px 0 4px; }
input, textarea, select {
  width: 100%; font: inherit; color: var(--texto); background: #fff;
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px; min-height: 48px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.prefijo { display: flex; align-items: stretch; }
.prefijo span { display: grid; place-items: center; padding: 0 12px; background: var(--acento-claro); border: 1px solid var(--borde); border-right: 0; border-radius: 12px 0 0 12px; }
.prefijo input { border-radius: 0 12px 12px 0; }

.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font: inherit; font-weight: 600; padding: 14px 18px; min-height: 50px; margin-top: 14px;
  border-radius: 999px; border: 0; background: var(--acento); color: #fff; text-decoration: none; cursor: pointer;
}
.boton.claro { background: var(--acento-claro); color: var(--acento); }
.boton.borde { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.boton.peligro { background: none; color: var(--peligro); min-height: 44px; }
.boton[disabled] { opacity: 0.6; }
.fila { display: flex; gap: 10px; }
.fila > * { flex: 1; }

.enlace { background: var(--acento-claro); border-radius: 12px; padding: 12px; font-weight: 600; overflow-wrap: anywhere; color: var(--acento); }

.lista { list-style: none; margin: 0; padding: 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.item:last-child { border-bottom: 0; }
.mini { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; background: var(--borde); flex: none; }
.item-txt { flex: 1; min-width: 0; text-align: left; background: none; border: 0; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.item-txt b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.item-txt span { color: var(--suave); font-size: 0.88rem; }
.flechas { display: flex; flex-direction: column; gap: 4px; }
.flechas button { width: 40px; height: 34px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; font-size: 1rem; color: var(--texto); }

.subir-foto {
  display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%; max-width: 260px; margin: 6px auto 0;
  border: 2px dashed var(--borde); border-radius: var(--radio); background: #fff; overflow: hidden; cursor: pointer; color: var(--suave); text-align: center;
}
.subir-foto img { width: 100%; height: 100%; object-fit: cover; }
.subir-foto input { display: none; }

.temas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tema { border: 2px solid var(--borde); border-radius: 12px; padding: 8px 4px; background: #fff; font: inherit; font-size: 0.8rem; color: var(--texto); }
.tema i { display: block; height: 28px; border-radius: 8px; margin-bottom: 4px; }
.tema[aria-pressed="true"] { border-color: var(--acento); }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.pasos li { counter-increment: paso; display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.pasos li::before { content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 0.85rem; font-weight: 600; }
.pasos li.hecho::before { content: "✓"; background: #5E7F66; }

.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5;
  max-width: 520px; margin: 0 auto; background: var(--texto); color: #fff; padding: 12px 16px; border-radius: 12px; text-align: center;
}