/* autism.css — Nivelato UI — clean professional SaaS */

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

:root {
  --white:    #ffffff;
  --grey-50:  #f8f9fa;
  --grey-100: #f1f3f5;
  --grey-200: #e9ecef;
  --grey-300: #dee2e6;
  --grey-400: #ced4da;
  --grey-500: #adb5bd;
  --grey-600: #495057;
  --grey-700: #495057;
  --grey-800: #343a40;
  --grey-900: #212529;
  --accent:   #1971c2;
  --accent-light: #e7f5ff;
  --green:    #2f9e44;
  --green-bg: #ebfbee;
  --red:      #c92a2a;
  --red-bg:   #fff5f5;
  --radius:   12px;
  --radius-sm: 8px;
  --shadow:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
}

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--grey-50);
  color: var(--grey-900);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
#app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 10px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
}

#app-logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

#step-indicator {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--grey-500);
}

/* ─── PROGRESS BAR ───────────────────────────────────────────────────────── */
#progress-bar-wrap {
  height: 3px;
  background: var(--grey-200);
}
#progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
  width: 0%;
}

/* ─── CANVAS ─────────────────────────────────────────────────────────────── */
#reset-zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px; /* a11y: touch targets ≥ 44px */
  min-width: 44px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  color: #495057;
  font-weight: 700;
  line-height: 1;
}
#reset-zoom-btn:active { background: #e9ecef; }

/* ─── CANVAS FIX ─── */
#canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;            /* let flex distribute space; don't force 200px */
  min-height: 200px;        /* keep a usable canvas when there's room */
  position: relative;
  overflow: hidden;
  touch-action: none; /* prevent browser zoom/scroll on canvas */
}

@media (max-width: 600px) {
  #canvas-wrap {
    min-height: 80px;
  }
}

/* Short viewports: the shell is height-constrained, so cap the canvas
   min-height to keep the header + panel visible and stop upward overflow. */
@media (max-height: 520px) {
  #canvas-wrap {
    min-height: 40px;
  }
}
#drawing-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── STEP PANELS ────────────────────────────────────────────────────────── */
.step-panel {
  display: none;
  padding: 16px 20px 16px;
  animation: fadeUp 0.25s ease;
}

.step-panel.active {
  display: flex;
  flex-direction: column;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 4px;
}

.step-hint {
  font-size: 0.85rem;
  color: var(--grey-600);
  margin-bottom: 18px;
}


/* ─── DERIVED / CALCULATED FIELDS ─── */
.input-col.derived label {
  color: #495057;
}
.input-col.derived input,
.input-col.derived select {
  background: #f1f3f5;
  color: #495057;
  cursor: default;
}
.input-col.derived input:focus,
.input-col.derived select:focus {
  /* a11y: keep a visible focus indicator on derived fields (don't strip the outline) */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ─── DERIVED NOTE ─── */
#derived-hueco-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: #e7f5ff;
  border-radius: 8px;
  font-size: 13px;
  color: #1971c2;
  font-weight: 500;
}

/* ─── VERIFY NOTE ─── */
.verify-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff3bf;
  border-radius: 8px;
  font-size: 13px;
  color: #b25e00;
  font-weight: 500;
}

/* ─── INPUTS ─────────────────────────────────────────────────────────────── */
.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.input-col {
  /* content-driven: stay side-by-side while each column keeps a usable
     width; wrap to full width only when the row would otherwise overflow */
  flex: 1 1 240px;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

/* step 0 has three text inputs — always stack them; 3-up is unusable
   below ~740px and they read better full-width */
#step-0 .input-col {
  flex: 1 1 100%;
}

.input-col label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.fraction-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fraction-row input[type="number"] {
  width: 72px;
  padding: 10px 8px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--grey-900);
  background: var(--grey-50);
  -moz-appearance: textfield;
  text-align: center;
  flex-shrink: 0;
}

.fraction-row input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.fraction-row input::-webkit-outer-spin-button,
.fraction-row input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ─── STEP 0 TEXT INPUTS (Cliente / Proyecto / Ubicación) ─── */
.input-col input[type="text"] {
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--grey-900);
  background: var(--grey-50);
}

.input-col input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.input-col input[type="text"]::placeholder {
  color: var(--grey-600); /* a11y: #ced4da on #f8f9fa was 1.42:1 */
  font-weight: 400;
}

.fraction-row input[type="number"]::placeholder {
  color: var(--grey-600);
  font-weight: 400;
}

.frac-select {
  width: 70px;
  flex: 0 0 70px;
  min-height: 44px;
  padding: 4px 2px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--grey-50);
  color: var(--grey-700);
  cursor: pointer;
}

.frac-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.unit {
  font-size: 0.9rem;
  color: var(--grey-500);
  font-weight: 500;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-primary {
  flex: 1;
  padding: 13px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-primary:active { transform: scale(0.98); background: #1864ab; }

.btn-secondary {
  padding: 13px 16px;
  background: var(--white);
  color: var(--grey-700);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-secondary:active { background: var(--grey-100); }

/* Step 0 single button */
#step-0 .btn-primary { width: 100%; margin-top: 4px; }

/* ─── SUMMARY ────────────────────────────────────────────────────────────── */
.summary-grid {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--grey-100);
}

.summary-row:last-child { border-bottom: none; }

.summary-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--grey-900);
}

/* ─── VALIDATION BLOCK ───────────────────────────────────────────────────── */
#validation-block {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  transition: all 0.2s ease;
}

#validation-block.val-ok {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid #b2f2bb;
}

#validation-block.val-warn {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid #ffc9c9;
  animation: warn-pulse 1.6s ease-in-out infinite;
}

@keyframes warn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ─── NOTAS ──────────────────────────────────────────────────────────────── */
.notas-block {
  margin-bottom: 16px;
}

.notas-block label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.notas-block textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--grey-900);
  background: var(--white);
  resize: vertical;
  min-height: 72px;
}

.notas-block textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ─── SHARE ──────────────────────────────────────────────────────────────── */
.share-block {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.share-block.hidden { display: none; }

/* ─── STEP 6 — FOTO CON MEDIDAS ──────────────────────────────────────────── */
/* A tall/tall door photo otherwise makes the bottom panel balloon and pushes
   the Atrás/Siguiente menu out of reach. Cap the preview image so it can never
   overflow the screen, then pin the button menu to the bottom of the scroll
   panel so it stays horizontal and reachable while the photo scrolls. */
#photo-preview img {
  max-height: 60vh;
}
#step-6 .btn-row {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 5;
  padding: 8px 20px;
  margin: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  border-top: 1px solid var(--grey-200);
}

/* ─── APP SHELL ──────────────────────────────────────────────────────────── */
html, body {
  /* allow natural page height on mobile so nothing is clipped by the address bar */
  overflow-y: auto;
}

#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;            /* fallback for browsers without dvh */
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#bottom-panel {
  flex: 0 1 auto;           /* can shrink below content height on short viewports */
  min-height: 0;
  background: var(--white);
  border-top: 1px solid var(--grey-200);
  overflow-x: hidden;
  overflow-y: auto;         /* M16: the panel scrolls internally so the save button is always reachable */
  -webkit-overflow-scrolling: touch;
  /* iOS safe area — keep buttons above home indicator / tab bar */
  padding-bottom: constant(safe-area-inset-bottom, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* On short / mobile viewports the panel should never eat the canvas or run
   past the viewport — let it grow with content but stay inside the shell. */
@media (max-width: 600px) {
  #app-shell {
    height: 100vh;
    height: 100dvh;
  }
  .input-row {
    gap: 8px;
  }
  .step-panel {
    padding: 14px 14px 18px;
  }
}

/* ─── ESTRADIOL MODE ─────────────────────────────────────────────────────── */
.estradiol-mode {
  --accent: #e64980;
  --accent-light: #fce4ec;
  --green: #e64980;
  --green-bg: #fce4ec;
}

.estradiol-mode #app-logo {
  color: #e64980;
}

.estradiol-mode .btn-primary {
  background: #e64980;
}

.estradiol-mode .btn-primary:active {
  background: #d6336c;
}

.estradiol-mode #progress-bar {
  background: #e64980;
}

.estradiol-mode .fraction-row input[type="number"]:focus {
  border-color: #e64980;
  box-shadow: 0 0 0 3px #fce4ec;
}

.estradiol-mode .input-col input[type="text"]:focus {
  border-color: #e64980;
  box-shadow: 0 0 0 3px #fce4ec;
}

.estradiol-mode .frac-select:focus {
  border-color: #e64980;
  box-shadow: 0 0 0 3px #fce4ec;
}

.estradiol-mode .notas-block textarea:focus {
  border-color: #e64980;
  box-shadow: 0 0 0 3px #fce4ec;
}

.estradiol-mode #validation-block.val-ok {
  background: #fce4ec;
  color: #e64980;
  border-color: #f8ceda;
}

/* ─── ITALIANO MODE (type "nivelato") ─── */
.italiano-mode {
  --accent: #008c45;            /* Italian green */
  --accent-light: #e6f4ea;
}
.italiano-mode #app-logo,
.italiano-mode .header-logo {
  color: #008c45;
  background: linear-gradient(90deg, #008c45 0%, #008c45 33%, #ffffff 33%, #ffffff 66%, #cd212a 66%, #cd212a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.italiano-mode .btn-primary {
  background: #008c45;
}
.italiano-mode .btn-primary:active {
  background: #00703a;
}
.italiano-mode #progress-bar {
  background: linear-gradient(90deg, #008c45, #ffffff, #cd212a);
}
.italiano-mode .fraction-row input[type="number"]:focus,
.italiano-mode .input-col input[type="text"]:focus,
.italiano-mode .frac-select:focus,
.italiano-mode .notas-block textarea:focus {
  border-color: #008c45;
  box-shadow: 0 0 0 3px #e6f4ea;
}
.italiano-mode #validation-block.val-ok {
  background: #e6f4ea;
  color: #008c45;
  border-color: #b7e4c7;
}

/* ─── ESTRADIOL INDICATOR IN HEADER ─── */
#estradiol-indicator {
  display: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: #e64980;
  background: #fce4ec;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.estradiol-mode #estradiol-indicator {
  display: inline-block;
}