/* Login (inc/auth.php) y panel "Mis obras" (template-mis-obras.php) —
   comparten esta hoja porque el login puede aparecer delante de cualquiera
   de las dos plantillas. Reutiliza los tokens --mh-* ya definidos en
   minimal.css/style.css, no introduce paleta propia. */

.ct-login-form {
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ct-login-form label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: var(--mh-muted);
}
.ct-login-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--mh-border);
  background: var(--mh-card);
  color: var(--mh-text);
  font: inherit;
}
.ct-login-form button {
  margin-top: 24px;
}

.ct-obra-card {
  background: var(--mh-card);
  border: 1px solid var(--mh-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.ct-obra-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ct-obra-header h2 { margin: 0; font-size: 19px; }
.ct-obra-badge { flex-shrink: 0; }
.ct-obra-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-muted);
  background: var(--mh-card-2);
  border: 1px solid var(--mh-border);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.ct-obra-badge--en_produccion { background: color-mix(in srgb, var(--mh-accent) 18%, var(--mh-card-2)); color: var(--mh-text); border-color: transparent; }
.ct-obra-badge--entregado { background: var(--mh-card-2); color: var(--mh-muted); }

.ct-obra-meta { color: var(--mh-muted); font-size: 13.5px; margin: 4px 0 16px; }
.ct-obra-presupuesto { color: var(--mh-accent); font-weight: 600; }
.ct-obra-presupuesto--pendiente { color: var(--mh-muted); font-weight: 400; }
.ct-obra-descarga-icon { opacity: 0.5; cursor: not-allowed; }
.ct-obra-piezas {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ct-obra-pieza {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ct-obra-pieza .pdp-pieza-thumb { flex-shrink: 0; }
.ct-obra-pieza-detalle { color: var(--mh-muted); font-size: 13px; }

/* Plano de conjunto visible para el profesional. Es deliberadamente de solo
   lectura: la clasificación y las juntas se resuelven en el panel de taller. */
.ct-plano-profesional { margin:16px 0; padding:16px; border:1px solid var(--mh-border); border-radius:var(--radius); background:var(--mh-bg); }
.ct-plano-profesional h3 { margin:0 0 8px; font-size:14px; }
.ct-plano-profesional h3:not(:first-child) { margin-top:18px; }
.ct-plano-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ct-plano-heading span { color:var(--mh-muted); font-size:12px; }
.ct-plano-svg { width:100%; height:260px; display:block; background:var(--mh-card); border:1px solid var(--mh-border); }
.ct-plano-superficie { fill:var(--mh-card-2); stroke:none; }
.ct-plano-hueco { fill:var(--mh-card); stroke:var(--mh-text); stroke-width:1; vector-effect:non-scaling-stroke; }
.ct-plano-contorno { stroke:var(--mh-text); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.ct-plano-junta { stroke:var(--mh-accent); stroke-width:2.5; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.ct-plano-aux-nota,.ct-plano-pendiente { color:var(--mh-muted); font-size:13px; }