/* =========================================================
   SISTEMA VISUAL — "weAAAre" (adaptado)
   Papel cálido + tinta negra + degradé arcoíris pastel como acento.
   Redondeado, sombra dura offset, serif editorial en titulares.
   ========================================================= */

@font-face{
  font-family:'Geist Sans';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Sans';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Sans';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Sans';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style:normal; font-display:swap;
}

:root{
  --paper:   #f7f5f0;   /* fondo cálido tipo papel */
  --card:    #ffffff;
  --ink:     #131211;
  --ink-60:  rgba(19,18,17,.62);
  --ink-40:  rgba(19,18,17,.42);
  --ink-15:  rgba(19,18,17,.15);
  --ink-08:  rgba(19,18,17,.07);
  --yellow:  #f5d949;
  --yellow-pale: #faf0c2;
  --mint:    #cdf2dd;
  --pink:    #ffd9e3;
  --danger:  #c0392b;
  --danger-pale: #fbe4e1;

  --grad: linear-gradient(90deg, #ffb4c6 0%, #ffd7a8 22%, #fff3a0 42%, #c9f0c4 62%, #b8dcff 80%, #d7bdff 100%);

  --font-sans:  'Geist Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --line: 1.5px solid var(--ink);
  --line-soft: 1.5px solid var(--ink-15);

  --r-full: 999px;
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: .6rem;

  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
}

*{ box-sizing:border-box; }
html{ font-size:18px; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; }
input, select, textarea{ font-family:inherit; }

.mono{ font-family: var(--font-mono); }
.eyebrow{
  font-family: var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink-60);
}

/* ---------------------------------------------------------
   SHELL
   --------------------------------------------------------- */
.shell{
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6.5rem;
}

.masthead{
  display:flex;
  align-items:center;
  border-bottom: var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}
.masthead .brand{
  display:flex;
  align-items:center;
}
.brand-logo{
  height: 2.75rem;
  width: 2.75rem;
  object-fit: contain;
  display:block;
}

/* ---------------------------------------------------------
   REGLA DE PASOS — pills en fila
   --------------------------------------------------------- */
.stepline{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  margin-bottom: 2rem;
  padding-bottom:.15rem;
}
.stepline .tick{
  flex: 1 1 0;
  min-width:5rem;
  text-align:center;
  border: var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  padding: .55rem .4rem;
}
.stepline .tick .n{
  display:block;
  font-family: var(--font-mono);
  font-size:.65rem;
  color: var(--ink-40);
  margin-bottom:.1rem;
}
.stepline .tick .lbl{
  font-size:.66rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--ink-40);
  font-weight:600;
}
.stepline .tick.is-active{ background: var(--ink); box-shadow: var(--shadow-sm); }
.stepline .tick.is-active .n,
.stepline .tick.is-active .lbl{ color:#fff; }
.stepline .tick.is-done{ background: var(--mint); }
.stepline .tick.is-done .n,
.stepline .tick.is-done .lbl{ color: var(--ink); }

/* ---------------------------------------------------------
   PANELES / TARJETAS
   --------------------------------------------------------- */
.panel{ display:none; }
.panel.is-active{ display:block; animation: fade .18s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

.panel-head{ margin-bottom:1.5rem; }
.panel-head h2{ font-size:1.5rem; }
.panel-head .sub{ color:var(--ink-60); font-size:.9rem; margin-top:.4rem; max-width:34rem; }

.plate{
  position:relative;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.plate + .plate{ margin-top: 1.15rem; }

.plate.is-focused{ box-shadow: 6px 6px 0 var(--ink); }
.plate.is-focused::before{
  content:'';
  position:absolute; top:-.5rem; left:1.5rem;
  width:2.5rem; height:.4rem;
  border-radius: var(--r-full);
  background: var(--grad);
}

/* ---------------------------------------------------------
   GRID DE ZONAS
   --------------------------------------------------------- */
.zone-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .85rem;
}
.zone-card{
  border: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--card);
  padding: 1rem 1rem 1.1rem;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition: background .12s ease, color .12s ease, transform .08s ease, box-shadow .08s ease;
}
.zone-card:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.zone-card .zn{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-40); }
.zone-card .name{ font-weight:600; margin-top:.3rem; font-size:1.05rem; font-family:var(--font-serif); }
.zone-card.is-selected{ background: var(--ink); color:#fff; }
.zone-card.is-selected .zn{ color: rgba(255,255,255,.55); }
.zone-card.is-selected::after{
  content:'✓ SELECCIONADA';
  position:absolute; top:.6rem; right:.7rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em;
  color: var(--yellow);
}

/* ---------------------------------------------------------
   DROPZONE
   --------------------------------------------------------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  border: 1.5px dashed var(--ink-40);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: 2.75rem 1.5rem;
  text-align:center;
  cursor:pointer;
}
.dropzone.is-active{ border-color: var(--ink); background: var(--yellow-pale); }
.dropzone input{ display:none; }
.dropzone .dz-title{ font-weight:600; font-size:1.05rem; font-family:var(--font-serif); }
.dropzone .dz-or{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-40); }
.dropzone .dz-list{ font-size:.78rem; color:var(--ink-60); }

/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem;
  border: var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink);
  padding: .6rem 1.25rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  transition: background .1s ease, color .1s ease, transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-primary{
  background: var(--ink); border-color: var(--ink); color:#fff;
  position:relative;
}
.btn-primary::after{
  content:'';
  position:absolute; left:14%; right:14%; bottom:-.45rem;
  height:.3rem; border-radius: var(--r-full);
  background: var(--grad);
}
.btn-outline{ background:var(--card); }
.btn-block{ width:100%; }
.btn-sm{ padding:.42rem .9rem; font-size:.76rem; box-shadow:none; }
.btn-sm:hover{ transform:none; box-shadow:none; }
.btn-ghost{ border-color:transparent; box-shadow:none; }
.btn-ghost:hover{ background: var(--ink-08); color:var(--ink); transform:none; box-shadow:none; }

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; min-width:0; }
.form-grid.cols-1{ grid-template-columns:1fr; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field.span-2{ grid-column: 1/-1; }
.field label{ font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-60); }
.field .hint{ font-size:.72rem; color:var(--ink-40); }
.input, .select, .textarea{
  border: var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  padding:.65rem .85rem;
  font-size:.9rem;
  color:var(--ink);
}
.input:focus, .select:focus, .textarea:focus{ outline:none; box-shadow:0 0 0 3px var(--yellow-pale); }
.textarea{ resize:vertical; min-height:5rem; }
.checkline{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.checkline input{ width:1.1rem; height:1.1rem; accent-color:var(--ink); }

.segmented{
  display:inline-flex; border: var(--line); border-radius: var(--r-full);
  overflow:hidden; max-width:100%; background:var(--card);
}
.segmented button{
  border:none; background:transparent; color:var(--ink);
  padding:.5rem .9rem; font-size:.78rem; font-weight:600; cursor:pointer;
  flex:0 0 auto;
}
.segmented button.is-on{ background:var(--ink); color:#fff; }

/* ---------------------------------------------------------
   FICHAS DE ARCHIVO
   --------------------------------------------------------- */
.file-scroll{ display:flex; flex-direction:column; gap:1rem; max-height:none; }
.file-card{
  background:var(--card);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding:1.25rem;
  position:relative;
}
.file-card-head{
  display:grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap:1rem;
  align-items:center;
  padding-bottom:1rem;
  margin-bottom:1rem;
  border-bottom: var(--line-soft);
}
.file-thumb{
  width:4.5rem; height:4.5rem;
  border: var(--line-soft);
  border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  background: var(--paper);
  overflow:hidden;
}
.file-thumb img{ width:100%; height:100%; object-fit:cover; }
.file-meta .idx{ font-family:var(--font-mono); font-size:.65rem; color:var(--ink-40); }
.file-meta .fname{ font-weight:600; font-size:.95rem; word-break:break-word; font-family:var(--font-serif); }
.file-meta .fsub{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-60); margin-top:.15rem; }
.upload-status{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.66rem; margin-top:.35rem;
  padding:.15rem .55rem; border-radius:var(--r-full);
}
.upload-status.is-uploading{ color:var(--ink-60); background:var(--yellow-pale); }
.upload-status.is-ok{ color:#0a7a3d; background:var(--mint); }
.upload-status.is-error{ color:var(--danger); background:var(--danger-pale); flex-wrap:wrap; }
.upload-status .btn{ padding:.15rem .5rem; font-size:.66rem; box-shadow:none; }
.file-remove{
  border:var(--line-soft); border-radius:var(--r-full); background:var(--card); width:1.9rem; height:1.9rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-60);
  flex-shrink:0;
}
.file-remove:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

.dim-line{
  display:flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono);
  font-size:.74rem;
  color: var(--ink-60);
  margin-top:1rem;
  padding-top:.85rem;
  border-top: 1px dashed var(--ink-15);
  flex-wrap:wrap;
}
.dim-line .tickmark{ color:var(--ink-15); }
.dim-line .result{ margin-left:auto; color:var(--ink); font-weight:600; }
.dim-line .result .amt{ color:var(--ink); background:var(--yellow); padding:.05rem .45rem; border-radius:var(--r-full); }

/* ---------------------------------------------------------
   TURNOS
   --------------------------------------------------------- */
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.65rem; }
.slot-card{
  border:var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  background:var(--card); padding:.75rem .8rem; cursor:pointer; text-align:left;
}
.slot-card .day{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-40); }
.slot-card .range{ font-weight:600; font-size:.95rem; margin-top:.15rem; font-family:var(--font-serif); }
.slot-card .cap{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-60); margin-top:.35rem; }
.slot-card.is-selected{ background:var(--ink); color:#fff; }
.slot-card.is-selected .day, .slot-card.is-selected .cap{ color:rgba(255,255,255,.6); }
.slot-card.is-full{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.slot-card.is-full:hover{ background:var(--card); }

.date-picker{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:1.25rem; }
.date-chip{
  flex:0 0 auto; border:var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  background:var(--card); padding:.55rem .95rem; cursor:pointer; text-align:center;
}
.date-chip .dow{ font-family:var(--font-mono); font-size:.62rem; color:var(--ink-40); display:block; }
.date-chip .dnum{ font-weight:700; font-size:1.05rem; font-family:var(--font-serif); }
.date-chip.is-selected{ background:var(--ink); color:#fff; }
.date-chip.is-selected .dow{ color:rgba(255,255,255,.65); }

/* ---------------------------------------------------------
   RECIBO / RESUMEN
   --------------------------------------------------------- */
.receipt{
  background:var(--card);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding:1.5rem;
}
.receipt-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom: var(--line); padding-bottom:.75rem; margin-bottom:.9rem;
}
.receipt-head h3{ font-size:1.1rem; }
.receipt-head .id{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-60); }
.receipt-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.82rem; padding:.5rem 0; border-bottom:1px dashed var(--ink-15); }
.receipt-row .name{ font-weight:600; }
.receipt-row .spec{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-60); }
.receipt-row .val{ font-family:var(--font-mono); flex-shrink:0; }
.receipt-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1rem; padding-top:1rem; border-top: var(--line);
}
.receipt-total .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-60); }
.receipt-total .amount{ font-family:var(--font-serif); font-size:1.7rem; font-weight:600; color:var(--ink); }

/* ---------------------------------------------------------
   NAV INFERIOR
   --------------------------------------------------------- */
.wizard-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--paper); border-top: var(--line);
  padding:.85rem 1.25rem 1.15rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  z-index:20;
}
.wizard-nav .price-peek{ font-family:var(--font-mono); font-size:.85rem; }
.wizard-nav .price-peek .amt{ color:var(--ink); font-weight:700; font-size:1.05rem; }

.alert{ border:var(--line); border-radius:var(--r-md); padding:.85rem 1rem; font-size:.82rem; display:flex; gap:.6rem; margin-bottom:1.25rem; }
.alert-error{ border-color:var(--danger); color:var(--danger); background:var(--danger-pale); }
.alert-info{ color:var(--ink-60); background:var(--yellow-pale); border-color:var(--ink-15); }

.empty{ text-align:center; padding:3rem 1rem; color:var(--ink-40); font-size:.88rem; }

@media (max-width:640px){
  .shell{ padding:1rem .9rem 6.5rem; }
  .stepline .tick .lbl{ display:none; }
  .file-card-head{ grid-template-columns:3.5rem 1fr auto; }
  .receipt-total .amount{ font-size:1.4rem; }
}