/* =========================================================
   SISTEMA VISUAL — "PLANO DE OBRA"
   Blanco / #f1f1f1, tinta negra, azul Francia como acento puntual.
   Sin bordes redondeados. Líneas finas. Anguloso.
   ========================================================= */

@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:   #ffffff;
  --surface: #f1f1f1;
  --ink:     #0a0a0a;
  --ink-60:  rgba(10,10,10,.6);
  --ink-40:  rgba(10,10,10,.4);
  --ink-15:  rgba(10,10,10,.15);
  --ink-08:  rgba(10,10,10,.08);
  --blue:    #0055a4;   /* azul Francia */
  --blue-deep:#00335f;
  --danger:  #b3261e;

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

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

  --step-h: 3.25rem;
}

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

/* Fondo tipo papel milimetrado, muy tenue, sólo en la superficie general */
body{
  background-image:
    linear-gradient(var(--ink-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

h1,h2,h3,h4{ margin:0; font-weight:600; 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 6rem;
}

.masthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .85rem;
  margin-bottom: 1.75rem;
}
.masthead .brand{
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.02em;
}
.masthead .brand span{ color: var(--blue); }
.masthead .doc-id{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--ink-60);
}

/* ---------------------------------------------------------
   REGLA DE PASOS (step indicator tipo regla técnica)
   --------------------------------------------------------- */
.stepline{
  position:relative;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 2.25rem;
  border-top: var(--line);
  border-bottom: var(--line-soft);
}
.stepline .tick{
  position:relative;
  padding: .6rem .1rem .55rem;
  text-align:center;
  border-right: var(--line-soft);
}
.stepline .tick:last-child{ border-right:none; }
.stepline .tick .n{
  display:block;
  font-family: var(--font-mono);
  font-size:.68rem;
  color: var(--ink-40);
  margin-bottom:.2rem;
}
.stepline .tick .lbl{
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--ink-40);
  font-weight:600;
}
.stepline .tick.is-active .n,
.stepline .tick.is-active .lbl{ color: var(--blue); }
.stepline .tick.is-done .n,
.stepline .tick.is-done .lbl{ color: var(--ink); }
.stepline .tick.is-active::after{
  content:'';
  position:absolute; left:50%; bottom:-6px;
  width:0; height:0; transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:6px solid var(--blue);
}

/* ---------------------------------------------------------
   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.35rem; }
.panel-head .sub{ color:var(--ink-60); font-size:.9rem; margin-top:.3rem; max-width:34rem; }

.plate{
  position:relative;
  background: var(--paper);
  border: var(--line);
  padding: 1.5rem;
}
.plate + .plate{ margin-top: 1rem; }

/* marcas de registro tipo plano — sólo en el elemento activo */
.plate.is-focused::before,
.plate.is-focused::after{
  content:'';
  position:absolute; width:10px; height:10px;
  border-top:2px solid var(--blue); border-left:2px solid var(--blue);
  top:-1px; left:-1px;
}
.plate.is-focused::after{
  top:auto; left:auto; bottom:-1px; right:-1px;
  border-top:none; border-left:none;
  border-bottom:2px solid var(--blue); border-right:2px solid var(--blue);
}

/* ---------------------------------------------------------
   GRID DE ZONAS
   --------------------------------------------------------- */
.zone-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .75rem;
}
.zone-card{
  border: var(--line);
  background: var(--paper);
  padding: 1rem 1rem 1.1rem;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition: background .12s ease, color .12s ease;
}
.zone-card:hover{ background: var(--surface); }
.zone-card .zn{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-40); }
.zone-card .name{ font-weight:600; margin-top:.25rem; font-size:1.02rem; }
.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:.5rem; right:.6rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em;
  color: #6fb3ff;
}

/* ---------------------------------------------------------
   DROPZONE
   --------------------------------------------------------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  border: 1.5px dashed var(--ink-40);
  background: var(--paper);
  padding: 2.75rem 1.5rem;
  text-align:center;
  cursor:pointer;
}
.dropzone.is-active{ border-color: var(--blue); background:#f4f8fc; }
.dropzone input{ display:none; }
.dropzone .dz-title{ font-weight:600; font-size:1.02rem; }
.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);
  background: var(--paper);
  color: var(--ink);
  padding: .6rem 1.1rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover{ background: var(--ink); color:#fff; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--paper); color:var(--ink); }
.btn-primary{ background: var(--blue); border-color: var(--blue); color:#fff; }
.btn-primary:hover{ background: var(--blue-deep); border-color:var(--blue-deep); }
.btn-primary:disabled:hover{ background:var(--blue); }
.btn-outline{ background:transparent; }
.btn-block{ width:100%; }
.btn-sm{ padding:.42rem .8rem; font-size:.76rem; }
.btn-ghost{ border-color:transparent; }
.btn-ghost:hover{ background: var(--ink-08); color:var(--ink); }

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.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:.35rem; }
.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-soft);
  border-bottom:1.5px solid var(--ink);
  background: var(--paper);
  padding:.6rem .65rem;
  font-size:.9rem;
  color:var(--ink);
}
.input:focus, .select:focus, .textarea:focus{ outline:none; border-bottom-color:var(--blue); }
.textarea{ resize:vertical; min-height:5rem; }
.checkline{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.checkline input{ width:1rem; height:1rem; accent-color:var(--blue); }

.segmented{ display:inline-flex; border: var(--line); }
.segmented button{
  border:none; background:var(--paper); color:var(--ink);
  padding:.5rem .8rem; font-size:.78rem; font-weight:600; cursor:pointer;
  border-right: var(--line-soft);
}
.segmented button:last-child{ border-right:none; }
.segmented button.is-on{ background:var(--ink); color:#fff; }
.segmented.accent button.is-on{ background:var(--blue); }

/* ---------------------------------------------------------
   FICHAS DE ARCHIVO (spec sheet)
   --------------------------------------------------------- */
.file-scroll{ display:flex; flex-direction:column; gap:1rem; max-height:none; }
.file-card{
  background:var(--paper);
  border: var(--line);
  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);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  background: var(--surface);
  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:.92rem; word-break:break-word; }
.file-meta .fsub{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-60); margin-top:.15rem; }
.file-remove{
  border:var(--line-soft); background:var(--paper); 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); }

/* línea de cota (dimension line) con el cálculo del archivo */
.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);
}
.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(--blue); }

/* ---------------------------------------------------------
   TURNOS
   --------------------------------------------------------- */
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.6rem; }
.slot-card{
  border:var(--line); background:var(--paper); 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:.92rem; margin-top:.15rem; }
.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; }
.slot-card.is-full:hover{ background:var(--paper); }

.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); background:var(--paper); padding:.55rem .9rem; 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; }
.date-chip.is-selected{ background:var(--blue); color:#fff; border-color:var(--blue); }
.date-chip.is-selected .dow{ color:rgba(255,255,255,.65); }

/* ---------------------------------------------------------
   RECIBO / RESUMEN
   --------------------------------------------------------- */
.receipt{
  background:var(--paper);
  border: var(--line);
  padding:1.5rem;
}
.receipt-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom: 2px solid var(--ink); padding-bottom:.75rem; margin-bottom:.9rem;
}
.receipt-head h3{ font-size: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:.45rem 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:2px solid var(--ink);
}
.receipt-total .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-60); }
.receipt-total .amount{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--blue); }

/* ---------------------------------------------------------
   NAV INFERIOR
   --------------------------------------------------------- */
.wizard-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--paper); border-top:2px solid var(--ink);
  padding:.85rem 1.25rem;
  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(--blue); font-weight:700; font-size:1.05rem; }

.alert{ border:var(--line); padding:.85rem 1rem; font-size:.82rem; display:flex; gap:.6rem; margin-bottom:1.25rem; }
.alert-error{ border-color:var(--danger); color:var(--danger); background:#fdf1f0; }
.alert-info{ color:var(--ink-60); background:var(--surface); }

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

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