:root {
  --primary: #cc785c;
  --primary-active: #a9583e;
  --primary-disabled: #e6dfd8;
  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;
  --accent-amber: #e8a55a;
  --success: #5db872;
  --error: #c64545;
  --serif: 'Cormorant Garamond', 'Tiempos Headline', Garamond, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 16px/1.55 var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* Navegación */
.nav { border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.nav-fila { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.marca { font: 500 22px/1 var(--serif); color: var(--ink); letter-spacing: -0.3px; }
.nav-proyecto { font: 500 14px/1.4 var(--sans); color: var(--muted); }

/* Portada */
.hero { padding: 72px 0 48px; }
.etiqueta {
  margin: 0 0 16px;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
}
h1 {
  margin: 0 0 24px;
  font: 500 56px/1.05 var(--serif);
  letter-spacing: -1.2px;
  color: var(--ink);
}
.lead { margin: 0 0 32px; max-width: 640px; font-size: 18px; color: var(--body-strong); }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.leyenda li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 9999px;
  background: var(--surface-card); color: var(--ink);
  font: 500 13px/1.4 var(--sans);
}
.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punto.ok { background: var(--success); }
.punto.warn { background: var(--accent-amber); }
.punto.new { background: var(--muted-soft); }
.punto.abierta { background: var(--primary); }

/* Resumen */
.resumen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 0 0 32px; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  background: var(--hairline);
}
.resumen-item { background: var(--surface-soft); padding: 24px; }
.resumen-item strong { display: block; font: 500 40px/1.05 var(--sans); letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; }
.resumen-item span { display: block; margin-top: 8px; font: 500 13px/1.4 var(--sans); color: var(--muted); }

/* Secciones */
.grupo { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--hairline); }
.grupo h2 { margin: 0 0 8px; font: 500 40px/1.1 var(--serif); letter-spacing: -0.8px; color: var(--ink); }
.grupo p { margin: 0; max-width: 620px; color: var(--muted); }

/* Barra de lo creado */
.barra { display: flex; height: 8px; margin: 24px 0 0; border-radius: 9999px; overflow: hidden; background: var(--surface-cream-strong, #e8e0d2); }
.tramo { display: block; height: 100%; }
.tramo.ok { background: var(--success); }
.tramo.warn { background: var(--accent-amber); }
.tramo.abierta { background: var(--primary); }

/* Tarjetas */
.tarjetas { display: flex; flex-direction: column; gap: 24px; padding-bottom: 96px; }
.tarjetas > .grupo + .tarjeta { margin-top: 0; }
.tarjeta { background: var(--surface-card); color: var(--ink); border-radius: 12px; padding: 32px; }
.tarjeta.oscura { background: var(--surface-dark); color: var(--on-dark); }
.tarjeta.coral { background: var(--primary); color: #fff; margin-top: 48px; }

.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.numero { font: 500 12px/1.4 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.oscura .numero { color: var(--on-dark-soft); }
.coral .numero { color: rgba(255, 255, 255, 0.85); }
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 9999px;
  background: var(--canvas); font: 500 13px/1.4 var(--sans); color: var(--ink);
}
.tarjeta h2 { margin: 0 0 24px; font: 500 34px/1.15 var(--serif); letter-spacing: -0.5px; }

.filas { display: grid; grid-template-columns: 160px 1fr; gap: 16px 24px; margin: 0; }
.filas dt { font: 500 14px/1.55 var(--sans); color: var(--muted); }
.oscura .filas dt { color: var(--on-dark-soft); }
.filas dd { margin: 0; color: var(--body); }
.oscura .filas dd { color: var(--on-dark); }

.cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 12px 0 0; border-radius: 8px; overflow: hidden; background: var(--hairline);
}
.cifra { background: var(--canvas); padding: 16px; }
.cifra strong { display: block; font: 500 26px/1.15 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.5px; }
.cifra span { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--sans); color: var(--muted); }

.ajuste { margin: 24px 0 0; padding: 20px 24px; border-radius: 8px; background: var(--canvas); border-left: 3px solid var(--success); }
.ajuste p { margin: 0; color: var(--body-strong); }
.ajuste .etiqueta { margin-bottom: 8px; color: #3f8f53; }
.pregunta { margin: 16px 0 0; padding: 20px 24px; border-radius: 8px; background: var(--canvas); border-left: 3px solid var(--primary); }
.pregunta p { margin: 0; color: var(--body-strong); }
.pregunta .etiqueta { margin-bottom: 8px; color: var(--primary); }

/* Observación */
.obs { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.oscura .obs { border-top-color: var(--surface-dark-elevated); }
.coral .obs { border-top: 0; padding-top: 0; }
.obs label { display: block; margin-bottom: 8px; font: 500 14px/1.4 var(--sans); }
.obs textarea {
  display: block; width: 100%; min-height: 104px; resize: vertical;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink);
  font: 400 16px/1.55 var(--sans);
}
.obs textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.18); }
.oscura .obs textarea { background: var(--surface-dark-elevated); border-color: var(--surface-dark-elevated); color: var(--on-dark); }
.coral .obs textarea { border-color: transparent; }
.coral .obs textarea:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }

.obs-pie { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.boton {
  height: 40px; padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--primary); color: #fff; font: 500 14px/1 var(--sans);
}
.boton:hover { background: var(--primary-active); }
.boton:disabled { background: var(--primary-disabled); color: var(--muted); cursor: wait; }
.coral .boton { background: var(--canvas); color: var(--ink); }
.coral .boton:hover { background: var(--surface-card); }
.aviso { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.oscura .aviso { color: var(--on-dark-soft); }
.coral .aviso { color: rgba(255, 255, 255, 0.9); }
.aviso.error { color: var(--error); }
.coral .aviso.error { color: #fff; font-weight: 600; }

/* Pie */
.pie { background: var(--surface-dark); color: var(--on-dark-soft); font: 400 14px/1.55 var(--sans); padding: 48px 0; }

@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .hero { padding: 48px 0 32px; }
  h1 { font-size: 40px; letter-spacing: -0.8px; }
  .lead { font-size: 16px; }
  .tarjeta { padding: 24px 20px; }
  .tarjeta h2 { font-size: 28px; }
  .filas { grid-template-columns: 1fr; gap: 4px; }
  .filas dd { margin-bottom: 12px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .resumen-item { padding: 16px; }
  .resumen-item strong { font-size: 30px; }
  .grupo h2 { font-size: 32px; }
}

@media print {
  .nav, .boton, .aviso { display: none; }
  .tarjeta { break-inside: avoid; }
  body { background: #fff; }
}