/* ────────────────────────────────────────────────────────────────────────────
   Lenguaje visual común de CIVIL QC 360 — cuaderno de campo.

   Fondo papel y tinta oscura porque estas pantallas se usan a pleno sol en una
   obra: un tema oscuro sería ilegible al mediodía. La monoespaciada se reserva
   para lo que es dato —medidas, códigos, tiempos— y la sans para prosa, como en
   un plano técnico. El amarillo de señalización no decora: marca lo único que
   hay que leer de reojo con el móvil en una mano.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  --papel:#E6E2D8;
  --papel-alto:#F0EDE5;
  --tinta:#181D26;
  --tinta-media:#4A5464;
  --tinta-suave:#8A93A1;
  --linea:#C9C4B6;
  --senal:#F2B705;
  --nivel:#3F7D62;
  --nivel-suave:#E3EFE8;
  --oxido:#B04A3A;
  --oxido-suave:#F6E4E0;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:3px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:28px 28px;opacity:.30;
}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 16px 190px}

header{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 0 14px;border-bottom:2px solid var(--tinta);margin-bottom:22px;
}
.marca{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-decoration:none;color:var(--tinta)}
h1{font-size:clamp(23px,5vw,32px);margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.sub{font-family:var(--mono);font-size:12px;color:var(--tinta-media);margin-left:auto;text-align:right}

/* Cotas de plano: numeran etapas solo donde el orden es información real. */
.cotas{display:flex;margin:0 0 24px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.cota{flex:1;position:relative;padding:0 0 14px;color:var(--tinta-suave);text-transform:uppercase}
.cota::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--linea)}
.cota::before{content:"";position:absolute;left:0;bottom:-4px;width:2px;height:10px;background:var(--linea)}
.cota.activa{color:var(--tinta);font-weight:700}
.cota.activa::after,.cota.activa::before{background:var(--tinta)}
.cota.hecha{color:var(--nivel)}
.cota.hecha::after,.cota.hecha::before{background:var(--nivel)}
.cota-n{opacity:.55;margin-right:6px}

.bloque{background:var(--papel-alto);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;margin-bottom:18px}
.bloque h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px;color:var(--tinta-media);font-weight:700;display:flex;align-items:center;gap:8px}
.bloque h2::after{content:"";flex:1;height:1px;background:var(--linea)}

label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-media);margin:0 0 6px}
input,select,textarea{width:100%;padding:11px 12px;font-family:var(--sans);font-size:16px;
  background:#fff;color:var(--tinta);border:1px solid var(--linea);border-radius:var(--radio)}
textarea{font-family:var(--mono);font-size:14px;line-height:1.7;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
.campo{margin-bottom:14px}
.fila{display:flex;gap:10px;flex-wrap:wrap}

button{font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;
  padding:11px 18px;border-radius:var(--radio);border:1px solid var(--tinta);
  background:var(--tinta);color:var(--papel-alto);transition:transform .08s ease}
button:active{transform:translateY(1px)}
button.suave{background:transparent;color:var(--tinta)}
button.nivel{background:var(--nivel);border-color:var(--nivel);color:#fff}
button.oxido{background:transparent;border-color:var(--oxido);color:var(--oxido)}
button:disabled{opacity:.38;cursor:not-allowed}

.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--papel-alto);
  border-top:2px solid var(--tinta);padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.barra-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px}

.aviso{border-left:4px solid var(--senal);background:#fff;padding:11px 14px;font-size:14px;
  border-radius:var(--radio);margin-bottom:14px}
.aviso.malo{border-left-color:var(--oxido)}
.aviso.bien{border-left-color:var(--nivel)}
.nota{font-size:13px;color:var(--tinta-media);margin:10px 0 0}
.oculto{display:none!important}
.dato{font-family:var(--mono)}